用echarts实现多条柱状图加上多条折线图

首先，我们需要准备数据。假设我们有以下数据：

var data = {
  // 柱状图数据
  barData: [
    { name: 'A', value: [120, 132, 101, 134, 90, 230, 210] },
    { name: 'B', value: [220, 182, 191, 234, 290, 330, 310] },
    { name: 'C', value: [150, 232, 201, 154, 190, 330, 410] },
    { name: 'D', value: [320, 332, 301, 334, 390, 330, 320] }
  ],
  // 折线图数据
  lineData: [
    { name: 'A', value: [220, 182, 191, 234, 290, 330, 310] },
    { name: 'B', value: [120, 132, 101, 134, 90, 230, 210] },
    { name: 'C', value: [320, 332, 301, 334, 390, 330, 320] },
    { name: 'D', value: [150, 232, 201, 154, 190, 330, 410] }
  ]
};

接下来，我们可以使用 ECharts 来画出多条柱状图和多条折线图。

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myChart'));

// 配置项
var option = {
  // 图例
  legend: {
    data: ['柱状图1', '柱状图2', '柱状图3', '柱状图4', '折线图1', '折线图2', '折线图3', '折线图4']
  },
  // x轴数据
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  // y轴数据
  yAxis: {
    type: 'value'
  },
  // 柱状图数据
  series: [
    { name: '柱状图1', type: 'bar', data: data.barData[0].value },
    { name: '柱状图2', type: 'bar', data: data.barData[1].value },
    { name: '柱状图3', type: 'bar', data: data.barData[2].value },
    { name: '柱状图4', type: 'bar', data: data.barData[3].value },
    // 折线图数据
    { name: '折线图1', type: 'line', data: data.lineData[0].value },
    { name: '折线图2', type: 'line', data: data.lineData[1].value },
    { name: '折线图3', type: 'line', data: data.lineData[2].value },
    { name: '折线图4', type: 'line', data: data.lineData[3].value }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

这段代码会生成一个图例，其中包括了 4 条柱状图和 4 条折线图。x 轴的数据是固定的，为一周的天数，y 轴为数值轴。series 中分别配置了柱状图和折线图的数据。