Echarts在线免费图表

 
            const data=[
   {dateStr:'2024-01-03',totalVolume:1423,supplyVolume:235,permitVolume:847},
   {dateStr:'2024-02-03',totalVolume:1023,supplyVolume:335,permitVolume:547},
   {dateStr:'2024-03-03',totalVolume:1123,supplyVolume:535,permitVolume:647},
   {dateStr:'2024-04-03',totalVolume:1823,supplyVolume:235,permitVolume:847},
   {dateStr:'2024-05-03',totalVolume:1223,supplyVolume:835,permitVolume:247},
   {dateStr:'2024-06-03',totalVolume:1023,supplyVolume:235,permitVolume:847},
]
var xAxisData = [], yAxisTotalData = [], yAxisWaterWorks = [], yAxisOwned = [];
    for (var i = 0; i < data.length; i++) {
      xAxisData.push(data[i].dateStr);
      yAxisTotalData.push((data[i].totalVolume).toFixed(2));
      yAxisWaterWorks.push((data[i].supplyVolume).toFixed(2));
      yAxisOwned.push((data[i].permitVolume).toFixed(2));
    }
    option = {
       backgroundColor:"#000000",
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '10%',
        right: '3%',
        left: '10%',
        bottom: '10%'
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff"
        },
        data: ['供水总量', '水厂供水量', '工业自备'],
      },
      xAxis: [{
        type: 'category',
        data: xAxisData,
        boundaryGap: false, //x轴顶头显示
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)'
          }
        },
        axisLabel: {
          margin: 10,
          color: '#e2e9ff',
        },
      }],
      yAxis: [{
        name: '万m³',
        boundaryGap: ['0%', '12%'],
        nameTextStyle: {    
          verticalAlign: 'middle',
          align: "right"
        },
        axisLabel: {
          formatter: '{value}',
          color: '#e2e9ff',
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: 'rgba(255,255,255,1)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)'
          }
        }
      }],
      series: [
        {
          name: "供水总量",
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          color: 'rgba(0, 255, 0, 1)',
          data: yAxisTotalData,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "rgba(0, 255, 0, 1)"
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)"
            }
            ])
          },
        },
        {
          name: "水厂供水量",
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          color: 'rgba(255, 255, 0, 1)',
          data: yAxisWaterWorks,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "rgba(255, 255, 0, 1)"
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)"
            }
            ])
          },
        },
        {
          name: "工业自备",
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          color: 'rgba(0, 160, 233, 1)',
          data: yAxisOwned,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "rgba(0, 160, 233, 1)"
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)"
            }
            ])
          },
        }
      ]
    };