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();
      });
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值