ECharts 多线图表中共享 X 轴的简便方法

2023-11-04 13:15:53

在 ECharts 中创建多线图表

var chart = echarts.init(document.getElementById('myChart'));

var option = {
  title: {
    text: '多线图表'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销售额',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210, 182, 90, 123, 221, 133]
    },
    {
      name: '利润',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310, 252, 220, 188, 281, 293]
    },
    {
      name: '成本',
      type: 'line',
      data: [150, 232, 201, 154, 190, 330, 410, 312, 230, 291, 331, 363]
    }
  ]
};

chart.setOption(option);

使用 dataset 功能共享 X 轴

var chart = echarts.init(document.getElementById('myChart'));

var dataset = {
  source: [
    ['product', '2015', '2016', '2017'],
    ['手机', 43.3, 85.8, 93.7],
    ['电脑', 83.1, 73.4, 55.1],
    ['电视', 86.4, 65.2, 82.5]
  ]
};

var option = {
  title: {
    text: '产品销量'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '手机',
      type: 'line',
      datasetIndex: 0
    },
    {
      name: '电脑',
      type: 'line',
      datasetIndex: 1
    },
    {
      name: '电视',
      type: 'line',
      datasetIndex: 2
    }
  ],
  dataset: dataset
};

chart.setOption(option);