Echarts在线免费图表

 
            // prettier-ignore
const data = [["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 = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
option = {
  tooltip: {
    trigger: 'axis'
  },
  axisPointer: {
    link: {
      xAxisIndex: "all",
    },
  },
  title: [
    {
      top: '66%',
      text: '污水处理厂1',
      textStyle: {
        fontSize: 12,
        color: '#a9a9a9'
      }
    },
    {
      top: '45%',
      text: '污水处理厂2',
      textStyle: {
        fontSize: 12,
        color: '#a9a9a9'
      }
    },
    {
      top: '25%',
      text: '污水处理厂3',
      textStyle: {
        fontSize: 12,
        color: '#a9a9a9'
      }
    }
  ],
  xAxis: [
    {
      data: dateList,

      splitLine: {
        show: true,
        lineStyle: {
          color: '#cdd3dc'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#e6ebf4'
        }
      },
      axisLabel: {
        show: true
      },
      axisTick: {
        show: true
      }
    },
    {
      data: dateList,
      gridIndex: 1,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#cdd3dc'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#e5e5e5'
        }
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    {
      data: dateList,
      gridIndex: 2,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#cdd3dc'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#e5e5e5'
        }
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      axisLine: {
        show: false
      },
      splitLine: { show: false },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    {
      axisLine: {
        show: false
      },
      splitLine: { show: false },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      gridIndex: 1
    },
    {
      axisLine: {
        show: false
      },
      splitLine: { show: false },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      gridIndex: 2
    }
  ],
  grid: [
    {
      top: '60%',
      height: '20%'
    },
    {
      top: '40%',
      height: '20%'
    },
    {
      top: '20%',
      height: '20%'
    }
  ],
  series: [
    {
      type: 'line',
      showSymbol: false,
      data: valueList
    },
    {
      type: 'line',
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1
    },
    {
      type: 'line',
      showSymbol: false,
      data: valueList,
      xAxisIndex: 2,
      yAxisIndex: 2
    }
  ]
};