{T}

ECharts 示例集合

本文档收集了各种实用的 ECharts 示例代码。

基础示例

销售柱状图

html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      chart.setOption({
        title: {
          text: '快速入门 ECharts 开发'
        },
        xAxis: {
          data: ['食品', '数码', '服饰', '箱包']
        },
        yAxis: {},
        series: {
          type: 'bar',
          data: [100, 120, 90, 150]
        }
      })
    </script>
  </body>
</html>

多图表实例

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
      #chart, #chart2 {
        width: 800px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div>这是第一个 echarts 图表</div>
    <div id="chart"></div>
    <div>这是第二个 echarts 图表</div>
    <div id="chart2"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chartDom2 = document.getElementById('chart2')
      const chart = echarts.init(chartDom)
      const chart2 = echarts.init(chartDom2)
      
      const option1 = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }]
      }
      
      const option2 = {
        legend: {
          data: ['高度(km)与气温(°C)变化关系']
        },
        tooltip: {
          trigger: 'axis',
          formatter: 'Temperature : <br/>{b}km : {c}°C'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        yAxis: {
          type: 'category',
          axisLine: { onZero: false },
          axisLabel: {
            formatter: '{value} km'
          },
          boundaryGap: false,
          data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
        },
        series: [{
          name: '高度(km)与气温(°C)变化关系',
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 3,
            shadowColor: 'rgba(0,0,0,0.4)',
            shadowBlur: 10,
            shadowOffsetY: 10
          },
          data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
        }]
      }
      
      chart.setOption(option1)
      chart2.setOption(option2)
    </script>
  </body>
</html>

系列混合示例

多系列混合

javascript
const option = {
  xAxis: {
    data: ['一季度', '二季度', '三季度', '四季度']
  },
  yAxis: {},
  series: [
    {
      type: 'pie',
      center: ['65%', 60],
      radius: 35,
      data: [
        { name: '分类1', value: 50 },
        { name: '分类2', value: 60 },
        { name: '分类3', value: 55 },
        { name: '分类4', value: 70 }
      ]
    },
    {
      type: 'line',
      data: [100, 112, 96, 123]
    },
    {
      type: 'bar',
      data: [79, 81, 88, 72]
    }
  ]
}

dataset 数据集

javascript
const option = {
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  dataset: {
    source: [
      ['一季度', 79, 100, '分类1', 50],
      ['二季度', 81, 112, '分类2', 60],
      ['三季度', 88, 96, '分类3', 55],
      ['四季度', 72, 123, '分类4', 70]
    ]
  },
  series: [
    {
      type: 'pie',
      center: ['65%', 60],
      radius: 35,
      encode: { itemName: 3, value: 4 }
    },
    {
      type: 'line',
      encode: { x: 0, y: 2 }
    },
    {
      type: 'bar',
      encode: { x: 0, y: 1 }
    }
  ]
}

组件示例

完整组件配置

javascript
const option = {
  title: {
    text: '数据可视化',
    subtext: 'ECharts 示例'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  legend: {
    data: [{
      name: '分类',
      icon: 'circle',
      textStyle: {
        color: 'red'
      }
    }, '折线图', '柱状图'],
    left: 100
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  dataZoom: [{
    show: true,
    start: 30,
    end: 70
  }],
  dataset: {
    source: [
      ['一季度', 79, 100, '分类1', 50],
      ['二季度', 81, 112, '分类2', 60],
      ['三季度', 88, 96, '分类3', 55],
      ['四季度', 72, 123, '分类4', 70]
    ]
  },
  grid: [{
    left: 50,
    top: 70
  }],
  series: [{
    name: '分类',
    type: 'pie',
    center: ['65%', 60],
    radius: 35,
    encode: { itemName: 3, value: 4 }
  }, {
    name: '折线图',
    type: 'line',
    encode: { x: 0, y: 2 }
  }, {
    name: '柱状图',
    type: 'bar',
    encode: { x: 0, y: 1 }
  }]
}

坐标系示例

散点图

javascript
const option = {
  xAxis: {},
  yAxis: {},
  dataset: {
    source: [
      [13, 44],
      [51, 51],
      [51, 32],
      [67, 19],
      [19, 33]
    ]
  },
  series: [{
    type: 'scatter',
    encode: { x: 0, y: 1 }
  }]
}

双 Y 轴

javascript
const option = {
  legend: {},
  tooltip: {},
  xAxis: {
    type: 'category'
  },
  yAxis: [{
    min: 0,
    max: 100
  }, {
    min: 0,
    max: 100
  }],
  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1]
    ]
  },
  series: [
    { type: 'bar', seriesLayoutBy: 'row', yAxisIndex: 0 },
    { type: 'line', seriesLayoutBy: 'row', yAxisIndex: 1 }
  ]
}

多坐标系

javascript
const option = {
  legend: {},
  tooltip: {},
  xAxis: [{
    type: 'category',
    gridIndex: 0
  }, {
    type: 'category',
    gridIndex: 1
  }],
  yAxis: [{
    gridIndex: 0
  }, {
    gridIndex: 1
  }],
  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
    ]
  },
  grid: [{
    bottom: '55%'
  }, {
    top: '55%'
  }],
  series: [
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
  ]
}

交互示例

动态定位控制

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      top: <input type="text" id="top">
      left: <input type="text" id="left">
      right: <input type="text" id="right">
      bottom: <input type="text" id="bottom">
    </div>
    <div id="chart"></div>
    <script>
      let _left = 0
      let _top = 0
      let _bottom = 0
      let _right = 0
      
      const topInput = document.getElementById('top')
      const leftInput = document.getElementById('left')
      const bottomInput = document.getElementById('bottom')
      const rightInput = document.getElementById('right')
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      
      function addInputEvent(dom, key) {
        dom.addEventListener('input', function(e) {
          const value = e.target.value
          switch(key) {
            case 'top': _top = value; break
            case 'left': _left = value; break
            case 'bottom': _bottom = value; break
            case 'right': _right = value; break
          }
          render()
        })
      }
      
      function render() {
        const option = {
          title: {
            text: '数据可视化',
            subtext: 'ECharts 示例'
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {},
          dataset: {
            source: [
              ['一季度', 79, 100],
              ['二季度', 81, 112],
              ['三季度', 88, 96],
              ['四季度', 72, 123]
            ]
          },
          grid: [{
            left: _left,
            top: _top,
            right: _right,
            bottom: _bottom
          }],
          series: [{
            name: '折线图',
            type: 'line',
            encode: { x: 0, y: 2 }
          }]
        }
        chart.setOption(option)
      }
      
      window.onload = function() {
        topInput.value = _top
        leftInput.value = _left
        bottomInput.value = _bottom
        rightInput.value = _right
        addInputEvent(topInput, 'top')
        addInputEvent(leftInput, 'left')
        addInputEvent(bottomInput, 'bottom')
        addInputEvent(rightInput, 'right')
        render()
      }
    </script>
  </body>
</html>

轮流高亮饼图

javascript
option = {
  title: {
    text: '饼图程序调用高亮示例',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

let currentIndex = -1

setInterval(function() {
  var dataLen = option.series[0].data.length
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex
  })
  currentIndex = (currentIndex + 1) % dataLen
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: currentIndex
  })
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currentIndex
  })
}, 1000)

实战示例

仪表盘组合

javascript
option = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 100,
      splitNumber: 10,
      itemStyle: {
        color: '#FFAB91'
      },
      progress: {
        show: true,
        width: 30
      },
      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          width: 30,
          color: [[1, 'rgba(255,255,255,0.15)']]
        }
      },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      title: {
        offsetCenter: [0, '30%'],
        fontSize: 14
      },
      detail: {
        fontSize: 30,
        offsetCenter: [0, '-10%'],
        valueAnimation: true,
        formatter: function(value) {
          return Math.round(value) + '%'
        },
        color: 'inherit'
      },
      data: [{ value: 75, name: '完成率' }]
    },
    {
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 100,
      itemStyle: {
        color: '#58D9F9'
      },
      progress: {
        show: true,
        width: 10
      },
      pointer: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      detail: { show: false },
      data: [{ value: 75 }]
    }
  ]
}

销售数据大屏

javascript
option = {
  backgroundColor: '#0f1c39',
  title: {
    text: '销售数据监控大屏',
    left: 'center',
    textStyle: {
      color: '#fff',
      fontSize: 24
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['销售额', '订单量'],
    textStyle: { color: '#fff' },
    top: 40
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: 80,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    axisLine: { lineStyle: { color: '#fff' } },
    axisLabel: { color: '#fff' }
  },
  yAxis: [
    {
      type: 'value',
      name: '销售额(万)',
      axisLine: { lineStyle: { color: '#fff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
    },
    {
      type: 'value',
      name: '订单量',
      axisLine: { lineStyle: { color: '#fff' } },
      axisLabel: { color: '#fff' },
      splitLine: { show: false }
    }
  ],
  series: [
    {
      name: '销售额',
      type: 'bar',
      barWidth: '40%',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: '#00d4ff' },
            { offset: 1, color: '#0066ff' }
          ]
        }
      },
      data: [320, 280, 450, 520, 380, 420]
    },
    {
      name: '订单量',
      type: 'line',
      yAxisIndex: 1,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: { color: '#ffcc00', width: 3 },
      itemStyle: { color: '#ffcc00' },
      data: [1200, 1100, 1800, 2100, 1500, 1700]
    }
  ]
}

实时数据更新

javascript
// 初始化图表
const chart = echarts.init(dom)
let data = []

// 初始数据
for (let i = 0; i < 50; i++) {
  data.push(Math.random() * 100)
}

// 配置
const option = {
  title: { text: '实时数据监控' },
  xAxis: {
    type: 'category',
    data: data.map((_, i) => i)
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: data,
    smooth: true,
    areaStyle: { color: 'rgba(84, 112, 198, 0.3)' }
  }]
}

chart.setOption(option)

// 每秒更新数据
setInterval(() => {
  // 移除第一个数据，添加新数据
  data.shift()
  data.push(Math.random() * 100)

  // 更新图表
  chart.setOption({
    xAxis: { data: data.map((_, i) => i) },
    series: [{ data }]
  })
}, 1000)

地图散点分布

javascript
// 需要先注册地图
// echarts.registerMap('china', chinaJson)

option = {
  backgroundColor: '#0a1a2e',
  title: {
    text: '全国门店分布',
    left: 'center',
    textStyle: { color: '#fff' }
  },
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      if (params.seriesType === 'scatter') {
        return params.name + '<br/>门店数: ' + params.value[2]
      }
      return params.name
    }
  },
  geo: {
    map: 'china',
    roam: true,
    zoom: 1.2,
    label: { show: false },
    itemStyle: {
      areaColor: '#142957',
      borderColor: '#1cccff'
    },
    emphasis: {
      itemStyle: {
        areaColor: '#1cccff',
        shadowBlur: 20,
        shadowColor: 'rgba(32, 128, 240, 0.5)'
      }
    }
  },
  series: [
    {
      name: '门店',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: [
        { name: '北京', value: [116.46, 39.92, 120] },
        { name: '上海', value: [121.48, 31.22, 180] },
        { name: '广州', value: [113.23, 23.16, 150] },
        { name: '深圳', value: [114.07, 22.62, 200] },
        { name: '杭州', value: [120.19, 30.26, 90] }
      ],
      symbolSize: function(val) {
        return Math.max(val[2] / 10, 5)
      },
      itemStyle: {
        color: '#ffcc00',
        shadowBlur: 10,
        shadowColor: '#ffcc00'
      }
    },
    {
      name: '热力',
      type: 'heatmap',
      coordinateSystem: 'geo',
      data: [
        [116.46, 39.92, 120],
        [121.48, 31.22, 180],
        [113.23, 23.16, 150]
      ]
    }
  ],
  visualMap: {
    min: 0,
    max: 200,
    calculable: true,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    },
    textStyle: { color: '#fff' }
  }
}

组合图表示例

javascript
option = {
  title: { text: '销售业绩分析' },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  legend: {
    data: ['销售额', '增长率', '目标完成率']
  },
  xAxis: {
    type: 'category',
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: [
    {
      type: 'value',
      name: '销售额(万)',
      position: 'left'
    },
    {
      type: 'value',
      name: '增长率(%)',
      position: 'right',
      axisLabel: {
        formatter: '{value}%'
      }
    }
  ],
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [320, 450, 380, 520],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: '#83bff6' },
            { offset: 1, color: '#188df0' }
          ]
        }
      }
    },
    {
      name: '增长率',
      type: 'line',
      yAxisIndex: 1,
      data: [15, 25, 18, 30],
      lineStyle: { width: 3 },
      itemStyle: { color: '#ee6666' }
    },
    {
      name: '目标完成率',
      type: 'line',
      yAxisIndex: 1,
      data: [85, 92, 88, 95],
      lineStyle: { type: 'dashed', width: 2 },
      itemStyle: { color: '#91cc75' }
    }
  ]
}

3D 散点图（需引入 echarts-gl）

javascript
option = {
  tooltip: {},
  visualMap: {
    show: true,
    dimension: 2,
    min: 0,
    max: 100,
    inRange: {
      color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8',
              '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    }
  },
  xAxis3D: { type: 'value' },
  yAxis3D: { type: 'value' },
  zAxis3D: { type: 'value' },
  grid3D: {
    viewControl: {
      autoRotate: true
    }
  },
  series: [{
    type: 'scatter3D',
    data: data,  // [[x, y, z], ...]
    symbolSize: 12
  }]
}

嵌套饼图

javascript
option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '30%'],
      label: { position: 'inner' },
      labelLine: { show: false },
      data: [
        { value: 335, name: '直达', selected: true },
        { value: 679, name: '营销广告' },
        { value: 1548, name: '搜索引擎' }
      ]
    },
    {
      name: '访问来源',
      type: 'pie',
      radius: ['40%', '55%'],
      label: {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
        backgroundColor: '#eee',
        borderColor: '#aaa',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: { color: '#999', lineHeight: 22, align: 'center' },
          hr: { borderColor: '#aaa', width: '100%', borderWidth: 0.5, height: 0 },
          b: { fontSize: 16, lineHeight: 33 },
          per: { color: '#eee', backgroundColor: '#334455', padding: [2, 4], borderRadius: 2 }
        }
      },
      data: [
        { value: 335, name: '直达' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1048, name: '百度' },
        { value: 251, name: '谷歌' },
        { value: 147, name: '必应' },
        { value: 102, name: '其他' }
      ]
    }
  ]
}

相关链接