Echart常用示例

最新推荐文章于 2023-11-21 16:33:51 发布

@下雨下雨#

最新推荐文章于 2023-11-21 16:33:51 发布

阅读量104

点赞数

分类专栏： Echarts 文章标签： echarts

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

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

	  let chart = document.getElementById('chart6');
      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 = [2.38, 2.28, 2.20, 2.91, 2.67, 2.10, 2.88];
      //Y轴-炉体表面温度
      let dataY2 = [3.63, 3.67, 3.67, 3.62, 3.47, 4.10, 4.52];
      //Y轴-散热损失(q5)
      let dataY3 = [4.25, 4.12, 5.06, 5.20, 5.88, 5.93, 5.80];
      //legend
      let datalegend = ['排烟温度O2含量', '排烟温度', '环境温度', '排烟热损失(q3)']
      //title
      let datatitle = "排烟热损失运行趋势"
      //yAxis
      let datayAxis = ['温度，℃', '热损失，%']

      let option;
      option = {
        color: ['#5087EC', '#FCCA00', '#EC3E3F', '#81B337'],
        //标题居中
        title: {
          left: 'center',
          text: datatitle
        },
        //提示框展示
        tooltip: {
          trigger: 'axis'
        },
        //工具栏展示
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        //图例展示及图例距离标题距离
        legend: {
          data: datalegend,
          top: '8%'
        },
        //图形位置设置
        grid: {
          left: '3%',
          right: '4%',
          top: '20%',
          bottom: 40
          //containLabel: true
        },
        //X轴
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: dataX
          }
        ],
        //Y轴 两个
        yAxis: [
          {
            type: 'value',
            name: datayAxis[0],
            position: 'left',
            alignTicks: true
          },
          {
            type: 'value',
            name: datayAxis[1],
            position: 'right',
            alignTicks: true
          }
        ],
        series: [
          {
            name: datalegend[0],
            type: 'bar',
            yAxisIndex: 0,
            data: dataY1,
            label: {
              show: true,
              position: 'top'
            }
          },
          {
            name: datalegend[1],
            type: 'bar',
            yAxisIndex: 0,
            data: dataY2,
            label: {
              show: true,
              position: 'top'
            }
          },
          {
            name: datalegend[2],
            type: 'bar',
            yAxisIndex: 0,
            data: dataY2,
            label: {
              show: true,
              position: 'top'
            }
          },
          {
            name: datalegend[3],
            type: 'line',
            yAxisIndex: 1,
            data: dataY3,
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      };
      myChar.clear();//清除图表
      myChar.setOption(option);//set数据
      myChar.resize();//重绘
      window.addEventListener("resize", () => {
        myChar.resize();
      });