Echarts常用示例

chart3() {
      let chart = document.getElementById('chart3');
      let myChar = echarts.init(chart);

      //X轴
      let dataX = ['2023-09-14', '2023-09-15', '2023-09-16', '2023-09-17', '2023-09-18', '2023-09-19', '2023-09-20']
      //Y轴-不完全燃烧热损失(q2)
      let dataY1 = [2.38, 2.28, 2.20, 2.91, 2.67, 2.10, 2.88];
      //Y轴-排烟热损失(q3)
      let dataY2 = [4.25, 4.12, 5.06, 5.20, 5.88, 5.93, 5.80];
      //Y轴-散热损失(q5)
      let dataY3 = [3.63, 3.67, 3.67, 3.62, 3.47, 4.10, 4.52];

      let option;
      option = {
        color: ['#5087EC', '#FCCA00', '#EC3E3F'],
        title: {
          left: 'center',
          text: '加热炉热损运行趋势'
        },
        legend: {
          data: ['不完全燃烧热损失(q2)', '排烟热损失(q3)', '散热损失(q5)'],
          top: "8%",
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '20%',
          bottom: 40,
          //containLabel: true
        },
        xAxis: {
          type: 'category',
          data: dataX
        },
        yAxis: {
          type: 'value',
          name: '%'
        },
        series: [
          {
            name: '不完全燃烧热损失(q2)',
            data: dataY1,
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
          },
          {
            name: '排烟热损失(q3)',
            data: dataY2,
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
          },
          {
            name: '散热损失(q5)',
            data: dataY3,
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
          },
        ]
      };
      myChar.clear();//清除图表
      myChar.setOption(option);//set数据
      myChar.resize();//重绘
      window.addEventListener("resize", () => {
        myChar.resize();
      });
    },