Charts

折线图

基本折线图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line'
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line'
    }
  ]
}

export default [option1, option2]

光滑折线图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line',
      smooth: true
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line',
      smooth: true
    }
  ]
}

export default [option1, option2]

虚线折线图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line',
      lineStyle: {
        lineDash: [5, 5]
      }
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line',
      lineStyle: {
        lineDash: [10, 10]
      }
    }
  ]
}

export default [option1, option2]

填充折线图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line',
      lineArea: {
        show: true
      }
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line',
      lineArea: {
        show: true
      }
    }
  ]
}

export default [option1, option2]

渐变填充折线图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line',
      lineArea: {
        show: true,
        gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
      }
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line',
      lineArea: {
        show: true,
        gradient: ['rgba(251, 114, 147, 0.6)', 'rgba(251, 114, 147, 0)']
      }
    }
  ]
}

export default [option1, option2]

数值显示

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line',
      label: {
        show: true,
        formatter: '{value} 元'
      }
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line',
      label: {
        show: true
      }
    }
  ]
}

export default [option1, option2]

球点半径

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line',
      linePoint: {
        radius: 4
      }
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line'
    }
  ]
}

export default [option1, option2]

边界间隙

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    boundaryGap: false
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line'
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line'
    }
  ]
}

export default [option1, option2]

多组折线

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  legend: {
    data: ['系列A', '系列B', '系列C']
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      name: '系列A',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line',
      stack: 'a',
      fill: {
        show: true
      }
    },
    {
      name: '系列B',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line',
      stack: 'a',
      smooth: true
    },
    {
      name: '系列C',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'line',
      stack: 'a',
      lineStyle: {
        lineDash: [5, 5]
      }
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  legend: {
    data: ['系列A', '系列B', '系列C']
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      name: '系列A',
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line',
      stack: 'a',
      fill: {
        show: true
      }
    },
    {
      name: '系列B',
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line',
      stack: 'a',
      smooth: true
    },
    {
      name: '系列C',
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'line',
      stack: 'a',
      lineStyle: {
        lineDash: [5, 5]
      }
    }
  ]
}

export default [option1, option2]

线柱混用

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  legend: {
    data: [
      {
        name: '销售额',
        color: '#aeeff0'
      },
      {
        name: '人流量',
        color: '#f1829f'
      }
    ]
  },
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: [
    {
      name: '销售额',
      data: 'value'
    },
    {
      name: '人流量',
      data: 'value',
      position: 'right',
      max: 2000,
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '人流量',
      data: [1000, 1200, 900, 1500, 900, 1200, 1000],
      type: 'line',
      smooth: true,
      lineArea: {
        show: true,
        gradient: ['rgba(251, 114, 147, 1)', 'rgba(251, 114, 147, 0)']
      },
      lineStyle: {
        stroke: 'rgba(251, 114, 147, 1)',
        lineDash: [3, 3]
      },
      linePoint: {
        style: {
          stroke: 'rgba(251, 114, 147, 1)'
        }
      },
      yAxisIndex: 1
    },
    {
      name: '销售额',
      data: [1500, 1700, 1400, 2000, 1400, 1700, 1500],
      type: 'bar',
      gradient: {
        color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
      },
      barStyle: {
        stroke: 'rgba(103, 224, 227, 1)'
      }
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  legend: {
    data: [
      {
        name: '销售额',
        color: '#aeeff0'
      },
      {
        name: '人流量',
        color: '#f1829f'
      }
    ]
  },
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: [
    {
      name: '销售额',
      data: 'value'
    },
    {
      name: '人流量',
      data: 'value',
      position: 'right',
      max: 2000,
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '人流量',
      data: [1200, 1000, 1500, 900, 1500, 1000, 1200],
      type: 'line',
      smooth: true,
      lineArea: {
        show: true,
        gradient: ['rgba(251, 114, 147, 1)', 'rgba(251, 114, 147, 0)']
      },
      lineStyle: {
        stroke: 'rgba(251, 114, 147, 1)'
      },
      linePoint: {
        style: {
          stroke: 'rgba(251, 114, 147, 1)'
        }
      },
      yAxisIndex: 1
    },
    {
      name: '销售额',
      data: [1700, 1500, 2000, 1400, 2000, 1500, 1700],
      type: 'bar',
      gradient: {
        color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)']
      },
      barStyle: {
        stroke: 'rgba(103, 224, 227, 1)'
      }
    }
  ]
}

export default [option1, option2]

← 柱状图 →