Echarts：在一个画布内画出多个图表

以前做多个图表的效果是把不同的图表画在不同的画布里面，如果你要画三个图表需要用到三个div标签，下面是将三个图表画在一个div标签里面的效果。

效果图

option参数内容

const datas = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];

const dateList = datas.map(function (item) {
  return item[0];
});
const valueList = datas.map(function (item) {
  return item[1];
});
const valueList1 = valueList.map(x => x * 2);
const valueList2 = valueList.map(x => x * 3);
const valueList3 = valueList.map(x => x * 3.5);

const titleNameY = ['收入金额', '支出金额', '消费金额'];
const titleName = ['收入', '支出', '打车', '早餐', '午餐', '晚餐'];
const colors = ['#EE6666', '#91CC75', '#5470C6', '#80FFA5', '#00DDFF', '#37A2FF', '#FFBF00'];

option = {
  dataZoom: [
    {
      type: 'slider',
      xAxisIndex: [0, 1, 2],
      filterMode: 'none'
    },
    {
      type: 'inside',
      xAxisIndex: [0, 1, 2],
      filterMode: 'none'
    },
    {
      type: 'slider',
      yAxisIndex: 0,
      filterMode: 'none'
    },
    {
      type: 'inside',
      yAxisIndex: 0,
      filterMode: 'none'
    },
    {
      type: 'slider',
      yAxisIndex: 1,
      filterMode: 'none'
    },
    {
      type: 'inside',
      yAxisIndex: 1,
      filterMode: 'none'
    },
    {
      type: 'slider',
      yAxisIndex: 2,
      filterMode: 'none'
    },
    {
      type: 'inside',
      yAxisIndex: 2,
      filterMode: 'none'
    }
  ],
  legend: {
    type: 'scroll', // ：可滚动翻页的图例。当图例数量较多时可以使用。
    data: titleName
  },
  title: [{ // 图表标题
    top: '3%',
    left: 'center',
    text: '收入统计'
  }, {
    top: '35%',
    left: 'center',
    text: '支出统计'
  }, {
    top: '65%',
    left: 'center',
    text: '具体消费的类型'
  }],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  axisPointer: { // 同时出现提示竖线
    link: { xAxisIndex: 'all' }
  },
  xAxis: [{
    data: dateList,
    name: '时间',
    axisLine: {
      show: true,
      symbol: ['none', 'arrow'], // 显示箭头的位置
      symbolOffset: [0, 12], // 箭头位置的偏移量
      lineStyle: {
        color: colors[0]
      }
    }
  }, {
    data: dateList,
    name: '时间',
    gridIndex: 1
  }, {
    data: dateList,
    name: '时间',
    gridIndex: 2
  }],
  yAxis: [
    {
      name: titleNameY[0],
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        lineStyle: {
          color: colors[0]
        }
      },
      axisLabel: {
        formatter: '{value} ￥'
      }
    }, {
      name: titleNameY[1],
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[1]
        }
      },
      axisLabel: {
        formatter: '{value} ￥'
      },
      gridIndex: 1
    }, {
      name: titleNameY[2],
      axisLine: {
        show: true,
      },
      axisLabel: {
        formatter: '{value} ￥'
      },
      gridIndex: 2
    }],
  grid: [{ // 调整每个图表的位置
    top: '3%',
    bottom: '70%',
  }, {
    top: '40%',
    bottom: '40%',
  },
  {
    top: '70%',
    bottom: '3%'
  }],
  graphic: [ // 设置水印
    {
      type: 'group',
      rotation: Math.PI / 4,
      bounding: 'raw',
      right: 110,
      bottom: 110,
      z: 100,
      children: [
        {
          type: 'rect',
          left: 'center',
          top: -300,
          z: 100,
          shape: {
            width: 4000,
            height: 140
          },
          style: {
            fill: 'rgba(0,0,0,0.3)'
          }
        },
        {
          type: 'text',
          left: 'center',
          top: -260,
          z: 100,
          style: {
            fill: '#fff',
            text: 'https://blog.youkuaiyun.com/qq_43399210',
            font: 'bold 30px sans-serif'
          }
        }
      ]
    }
  ],
  series: [
    {
      name: titleName[0],
      type: 'line',
      areaStyle: {},
      itemStyle: {
        color: colors[0]
      },
      lineStyle: {
        color: colors[0],
        width: 3
      },
      showSymbol: false,
      data: valueList,
    }, {
      name: titleName[1],
      type: 'line',
      showSymbol: false,
      data: valueList1,
      itemStyle: {
        color: colors[1]
      },
      lineStyle: {
        color: colors[1],
        width: 3
      },
      xAxisIndex: 1,
      yAxisIndex: 1
    }, {
      name: titleName[1],
      type: 'bar',
      showSymbol: false,
      data: valueList,
      itemStyle: {
        color: colors[1]
      },
      lineStyle: {
        color: colors[1],
        width: 3
      },
      xAxisIndex: 1,
      yAxisIndex: 1
    }, {
      name: titleName[2],
      type: 'line',
      showSymbol: false,
      data: valueList,
      itemStyle: {
        color: colors[3]
      },
      lineStyle: {
        color: colors[3],
        width: 3
      },
      xAxisIndex: 2,
      yAxisIndex: 2
    }, {
      name: titleName[3],
      type: 'line',
      showSymbol: false,
      data: valueList1,
      itemStyle: {
        color: colors[4]
      },
      lineStyle: {
        color: colors[4],
        width: 3
      },
      xAxisIndex: 2,
      yAxisIndex: 2
    }, {
      name: titleName[4],
      type: 'line',
      showSymbol: false,
      data: valueList2,
      itemStyle: {
        color: colors[5]
      },
      lineStyle: {
        color: colors[5],
        width: 3
      },
      xAxisIndex: 2,
      yAxisIndex: 2
    }, {
      name: titleName[5],
      type: 'line',
      showSymbol: false,
      data: valueList3,
      itemStyle: {
        color: colors[6]
      },
      lineStyle: {
        color: colors[6],
        width: 3
      },
      xAxisIndex: 2,
      yAxisIndex: 2
    }]
};