Echarts常用示例

最新推荐文章于 2024-03-21 19:25:25 发布

@下雨下雨#

最新推荐文章于 2024-03-21 19:25:25 发布

阅读量116

点赞数

分类专栏： Echarts 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_40685414/article/details/133134112

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

chart1() {
      let chart = document.getElementById('chart1');
      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轴-反平衡热效率
      let dataY1 = [86, 74, 82, 74, 69, 75, 80];
      //Y轴-加热炉负荷率
      let dataY2 = [96, 86, 75, 85, 72, 88, 71];

      let option;
      option = {
        color: ['#5087EC', '#EDA2AE'],
        title: {
          left: 'center',
          text: '加热炉热效率及负荷率情况'
        },
        legend: {
          data: ['反平衡热效率', '加热炉负荷率'],
          top: "8%",
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '20%',
          bottom: 40,
          //containLabel: true
        },
        xAxis: {
          type: 'category',
          //boundaryGap: false,
          data: dataX
        },
        yAxis: {
          type: 'value',
          name: '%'
        },
        series: [
          {
            name: '反平衡热效率',
            data: dataY1,
            type: 'line',
            areaStyle: {
              color: "rgba(80,135,236, 0.4)"
            }
          },
          {
            name: '加热炉负荷率',
            data: dataY2,
            type: 'line',
            areaStyle: {
              color: "rgba(222,134,143, 0.4)"
            }
          },
        ]
      };
      myChar.clear();//清除图表
      myChar.setOption(option);//set数据
      myChar.resize();//重绘
      window.addEventListener("resize", () => {
        myChar.resize();
      });
    }