ECharts 常见图表 #

const option = {
  title: {
    text: '基础柱状图'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110, 130]
  }]
};

const option = {
  title: {
    text: '水平柱状图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['苹果', '香蕉', '橙子', '葡萄', '西瓜']
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [200, 150, 100, 80, 50]
  }]
};

const option = {
  title: {
    text: '分组柱状图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['2022年', '2023年']
  },
  xAxis: {
    type: 'category',
    data: ['一季度', '二季度', '三季度', '四季度']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '2022年',
      type: 'bar',
      data: [200, 250, 300, 280]
    },
    {
      name: '2023年',
      type: 'bar',
      data: [220, 280, 350, 320]
    }
  ]
};

const option = {
  title: {
    text: '堆叠柱状图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['直接访问', '搜索引擎', '邮件营销']
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '直接访问',
      type: 'bar',
      stack: 'total',
      data: [320, 302, 301, 334, 390]
    },
    {
      name: '搜索引擎',
      type: 'bar',
      stack: 'total',
      data: [120, 132, 101, 134, 90]
    },
    {
      name: '邮件营销',
      type: 'bar',
      stack: 'total',
      data: [220, 182, 191, 234, 290]
    }
  ]
};

const option = {
  title: {
    text: '渐变柱状图'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [100, 150, 200, 180, 220],
    itemStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#83bff6' },
          { offset: 1, color: '#188df0' }
        ]
      }
    },
    emphasis: {
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#2378f7' },
            { offset: 1, color: '#2378f7' }
          ]
        }
      }
    }
  }]
};

const option = {
  title: {
    text: '基础折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    type: 'line',
    data: [150, 230, 224, 218, 135, 147]
  }]
};

const option = {
  title: {
    text: '多系列折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['邮件营销', '联盟广告', '视频广告']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '邮件营销',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      data: [150, 232, 201, 154, 190, 330, 410]
    }
  ]
};

const option = {
  title: {
    text: '堆叠折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['邮件营销', '联盟广告']
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '邮件营销',
      type: 'line',
      stack: 'total',
      areaStyle: {},
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      stack: 'total',
      areaStyle: {},
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
};

const option = {
  title: {
    text: '平滑折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    type: 'line',
    smooth: true,
    data: [150, 230, 224, 218, 135, 147]
  }]
};

const option = {
  title: {
    text: '带标记的折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    type: 'line',
    data: [150, 230, 224, 218, 135, 147],
    markPoint: {
      data: [
        { type: 'max', name: '最大值' },
        { type: 'min', name: '最小值' }
      ]
    },
    markLine: {
      data: [
        { type: 'average', name: '平均值' }
      ]
    }
  }]
};

const option = {
  title: {
    text: '基础饼图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' },
      { value: 484, name: '联盟广告' },
      { value: 300, name: '视频广告' }
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

const option = {
  title: {
    text: '环形图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      show: false,
      position: 'center'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 20,
        fontWeight: 'bold'
      }
    },
    labelLine: {
      show: false
    },
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' },
      { value: 484, name: '联盟广告' },
      { value: 300, name: '视频广告' }
    ]
  }]
};

const option = {
  title: {
    text: '嵌套饼图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '外环',
      type: 'pie',
      radius: ['50%', '70%'],
      label: { show: false },
      data: [
        { value: 500, name: 'A' },
        { value: 300, name: 'B' },
        { value: 200, name: 'C' }
      ]
    },
    {
      name: '内环',
      type: 'pie',
      radius: ['20%', '40%'],
      label: { show: false },
      data: [
        { value: 400, name: 'X' },
        { value: 350, name: 'Y' },
        { value: 250, name: 'Z' }
      ]
    }
  ]
};

const option = {
  title: {
    text: '玫瑰图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom: 10
  },
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['20%', '60%'],
    center: ['50%', '50%'],
    roseType: 'area',
    itemStyle: {
      borderRadius: 5
    },
    data: [
      { value: 30, name: 'rose 1' },
      { value: 28, name: 'rose 2' },
      { value: 26, name: 'rose 3' },
      { value: 24, name: 'rose 4' },
      { value: 22, name: 'rose 5' },
      { value: 20, name: 'rose 6' }
    ]
  }]
};

const option = {
  title: {
    text: '基础散点图'
  },
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '数据点',
    type: 'scatter',
    data: [
      [10.0, 8.04],
      [8.07, 6.95],
      [13.0, 7.58],
      [9.05, 8.81],
      [11.0, 8.33],
      [14.0, 7.66],
      [13.4, 6.81],
      [10.0, 6.33],
      [14.0, 8.96],
      [12.5, 6.82]
    ]
  }]
};

const option = {
  title: {
    text: '气泡图'
  },
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '气泡',
    type: 'scatter',
    symbolSize: function(data) {
      return data[2] / 5;
    },
    data: [
      [10.0, 8.04, 50],
      [8.07, 6.95, 30],
      [13.0, 7.58, 80],
      [9.05, 8.81, 40],
      [11.0, 8.33, 60]
    ]
  }]
};

const option = {
  title: {
    text: '多系列散点图'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    data: ['系列A', '系列B']
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '系列A',
      type: 'scatter',
      data: [[10, 20], [15, 25], [20, 30]],
      itemStyle: { color: '#5470c6' }
    },
    {
      name: '系列B',
      type: 'scatter',
      data: [[12, 18], [18, 22], [25, 28]],
      itemStyle: { color: '#91cc75' }
    }
  ]
};

const option = {
  title: {
    text: '基础雷达图'
  },
  tooltip: {},
  legend: {
    data: ['预算分配', '实际开销']
  },
  radar: {
    indicator: [
      { name: '销售', max: 6500 },
      { name: '管理', max: 16000 },
      { name: '信息技术', max: 30000 },
      { name: '客服', max: 38000 },
      { name: '研发', max: 52000 },
      { name: '市场', max: 25000 }
    ]
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: [4200, 3000, 20000, 35000, 50000, 18000],
        name: '预算分配'
      },
      {
        value: [5000, 14000, 28000, 26000, 42000, 21000],
        name: '实际开销'
      }
    ]
  }]
};

const option = {
  series: [{
    type: 'gauge',
    detail: {
      formatter: '{value}%'
    },
    data: [{
      value: 50,
      name: '完成率'
    }]
  }]
};

const option = {
  series: [{
    type: 'gauge',
    detail: {
      formatter: '{value}%'
    },
    data: [
      { value: 20, name: '低' },
      { value: 40, name: '中' },
      { value: 60, name: '高' }
    ]
  }]
};

const option = {
  title: {
    text: '漏斗图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [{
    name: '漏斗图',
    type: 'funnel',
    left: '10%',
    top: 60,
    bottom: 60,
    width: '80%',
    min: 0,
    max: 100,
    minSize: '0%',
    maxSize: '100%',
    sort: 'descending',
    gap: 2,
    label: {
      show: true,
      position: 'inside'
    },
    data: [
      { value: 100, name: '展现' },
      { value: 80, name: '点击' },
      { value: 60, name: '访问' },
      { value: 40, name: '咨询' },
      { value: 20, name: '订单' }
    ]
  }]
};

const option = {
  title: {
    text: '热力图'
  },
  tooltip: {
    position: 'top'
  },
  grid: {
    top: 50,
    bottom: 50
  },
  xAxis: {
    type: 'category',
    data: ['12a', '1a', '2a', '3a', '4a', '5a', '6a'],
    splitArea: { show: true }
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    splitArea: { show: true }
  },
  visualMap: {
    min: 0,
    max: 10,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: 0
  },
  series: [{
    name: '热力图',
    type: 'heatmap',
    data: [
      [0, 0, 5], [1, 0, 1], [2, 0, 3],
      [0, 1, 7], [1, 1, 2], [2, 1, 8],
      [0, 2, 1], [1, 2, 5], [2, 2, 4]
    ],
    label: {
      show: true
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

const option = {
  title: {
    text: '折线柱状组合图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  legend: {
    data: ['销量', '增长率']
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月']
  },
  yAxis: [
    {
      type: 'value',
      name: '销量',
      position: 'left'
    },
    {
      type: 'value',
      name: '增长率',
      position: 'right'
    }
  ],
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [200, 250, 300, 280, 320, 350]
    },
    {
      name: '增长率',
      type: 'line',
      yAxisIndex: 1,
      data: [5, 8, 12, 10, 15, 18]
    }
  ]
};

// 柱状图数据排序
const data = [120, 200, 150, 80, 70].sort((a, b) => b - a);

// 使用调色板
const option = {
  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
  series: [{...}]
};

series: [{
  type: 'bar',
  label: {
    show: true,
    position: 'top',
    formatter: '{c}'
  }
}]

series: [{
  type: 'bar',
  animationDuration: 1000,
  animationEasing: 'cubicOut'
}]