需求背景

需要设计一个关于能耗分析的页面，且耗用标准需要根据室外温度判断，涉及到维度比较多。
一般画图都自然想到echart里面找实例，这次的需求稍微有点麻烦，所以分成两步走：

第一步：找到合适的实例

echarts官网地址：https://echarts.apache.org/zh/index.html

有一个比较适合的折柱混合图
地址：https://echarts.apache.org/examples/zh/editor.html?c=mix-line-bar

image.png
目前，还缺的是根据标准判断颜色，所以需要简单的调整一下，增加一下线段的颜色

image.png
最终的代码块如下，不一定符合标准只是为了画图

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['日均耗电', '耗电标准', '日均温度']
  },
  xAxis: [
    {
      type: 'category',
      data: ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07','09-08','09-10','09-11','09-12','09-13','09-14','09-15'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '耗电量',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} KW/h'
      }
    },
    {
      type: 'value',
      name: '日均温度',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
    visualMap: {
    show: false,
    dimension: 0,
    seriesIndex:0,
    pieces: [
      {
        lte: 6,
        color: 'green'
      },
      {
        gt: 6,
        lte: 8,
        color: 'red'
      },
      {
        gt: 8,
        lte: 20,
        color: 'green'
      },
      {
        gt: 14,
        lte: 15,
        color: 'red'
      },
      {
        gt: 17,
        color: 'green'
      }
    ]
  },
  series: [
    {
      name: '日均耗电',
      type: 'line',
      color: 'rgba(15, 15, 110, 0.6)',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' KW/h';
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 66.7, 120.6, 122.2, 39.6, 20.0, 6.4, 3.3
      ]
    },
    
    {
      name: '耗电标准',
      type: 'line',
      color: 'rgba(0, 255, 0, 0.6)',
      tooltip: {
        valueFormatter: function (value) {
          return value + 'KW/h';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 115.6, 102.2, 38.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: '日均温度',
      type: 'bar',
      color: 'rgba(255, 173, 177, 0.4)',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },
      data: [20, 22.2, 23.3, 24.5, 16.3, 19.2, 20.3, 23.4, 23.0, 16.5, 12.0, 16.2]
    }
  ]
};

第二步：将实例嵌入原型

0、将echarts左边的代码复制保存

从operation开始替换下方的代码

javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);
setTimeout(function(){
    var dom =$('[data-label=ddd]').get(0);
//注意”ddd™ 为元件框的名字
    var myChart = echarts.init(dom);
    
    var option = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      progress: {
        show: true
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}'
      },
      data: [
        {
          value: 50,
          name: '”√µÁ¡ø'
        }
      ]
    }
  ]
};
//从”options“开始替换

    if (option && typeof option === "object"){
       myChart.setOption(option, true);    
    }}, 800);