组合图

描述:当前是关于Echarts图表中的 示例。
 
            option = {

   "color": [
      {
         type: 'linear',
         x: 0,
         y: 0,
         x2: 0,
         y2: 1,
         colorStops: [
            {
               offset: 0,
               color: 'rgba(250, 109, 62, 1)'
            },
            {
               offset: 1,
               color: 'rgba(250, 109, 62, 0.35)'
            }
         ]
      },
      "rgba(251, 210, 65, 1)  ",
      "rgba(240, 244, 255, 1)",

   ],
   "backgroundColor": "#1B232E",
   tooltip: {
      trigger: "axis",
      axisPointer: {
      type: "shadow"
      },
      textStyle: {
            color: "rgba(255, 255, 255, 1)"
      },
      backgroundColor: "rgba(0, 0, 0, 0.8)",
      borderColor: "rgba(219, 230, 255, 0.8)",
      
   },
   "legend": {
      "data": [
         "用电量",
         "生产量",
         "电单耗"
      ],
      "x": "center",
      "textStyle": {
         "color": "white",
         "fontSize": 14
      },
      "top": 15,
      "itemWidth": 20,
      "itemHeight": 10,
      "itemGap": 40
   },
   "grid": {
      "left": "20px",
      "right": "70px",
      "bottom": "55px",
      "top": "80px",
      "containLabel": true
   },
   "dataZoom": [
      {
         "type": "inside",
         "show": true,
         "realtime": true,
         "start": 0,
         "end": 100
      },
      {
         "type": "slider",
         "realtime": true,
         "start": 0,
         "end": 100,
         "textStyle": {
            "color": "white"
         },
         "bottom": 20,
         "borderColor": "#43485E",
         "dataBackground": {
            "areaStyle": {
               "color": "white"
            }
         }
      }
   ],
   "xAxis": [
      {
         "type": "category",
         "data": [
            "11-28",
            "11-29",
            "11-30",
            "12-01",
            "12-02",
            "12-03",
            "12-04",
            "12-05",
            "12-06",
            "12-07",
            "12-08",
            "12-09",
            "12-10",
            "12-11",
            "12-12",
            "12-13",
            "12-14",
            "12-15",
            "12-16",
            "12-17"
         ],
         "axisLabel": {
            "color": "#A9AEB2",
            "fontSize": 12
         },
         "axisTick": {
            "show": false
         },
         "axisLine": {
            "lineStyle": {
               "color": "#43485E"
            }
         }
      }
   ],
   "yAxis": [
      {
         "type": "value",
         "name": "kW·h",
         "axisLabel": {
            "color": "#A9AEB2",
            "fontSize": 12
         },
         "axisTick": {
            "show": false
         },
         "axisLine": {
            "show": false,
            "lineStyle": {
               "color": "white"
            }
         },
         "nameTextStyle": {
            "color": "#A9AEB2",
            "fontSize": "12"
         },
         "splitLine": {
            "show": true,
            "lineStyle": {
               "color": [
                  "#43485E"
               ],
               "width": 1,
               "type": "solid"
            }
         }
      },
      {
         "type": "value",
         "name": "kW·h/t",
         "axisLabel": {
            "color": "#A9AEB2",
            "fontSize": 12
         },
         "axisTick": {
            "show": false
         },
         "axisLine": {
            "show": false,
            "lineStyle": {
               "color": "white"
            }
         },
         "nameTextStyle": {
            "color": "#A9AEB2",
            "fontSize": "12"
         },
         "splitLine": {
            "show": false,
            "lineStyle": {
               "color": [
                  "#43485E"
               ],
               "width": 1,
               "type": "solid"
            }
         }
      },
      {
         "type": "value",
         "name": "t",
         offset: 50,
         "axisLabel": {
            "color": "#A9AEB2",
            "fontSize": 12
         },
         "axisTick": {
            "show": false
         },
         "axisLine": {
            "show": false,
            "lineStyle": {
               "color": "white"
            }
         },
         "nameTextStyle": {
            "color": "#A9AEB2",
            "fontSize": "12"
         },
         "splitLine": {
            "show": true,
            "lineStyle": {
               "color": [
                  "#43485E"
               ],
               "width": 1,
               "type": "solid"
            }
         }
      }
   ],
   "barWidth": 14,
   "series": [
      {
         "name": "用电量",
         "type": "bar",
         "yAxisIndex": 0,
         "label": {
            "show": false,
            "color": "#fff"
         },
         "data": [
            80, 90, 70, 60, 50, 40, 30, 50, 60, 80, 80, 90, 70, 60, 50, 40, 30, 50, 60, 80
         ]
      },
      {
         "name": "生产量",
         "type": "line",
         "yAxisIndex": 2,
         "lineStyle": {
            "width": 2.5
         },
         "label": {
            "show": true,
            "color": "#fff"
         },
         "symbolSize": 9,
         "symbol": "circle",
         "data": [
            80, 90, 70, 60, 50, 40, 30, 50, 60, 80, 80, 90, 70, 60, 50, 40, 30, 50, 60, 80
         ]
      },
      {
         "name": "电单耗",
         "type": "line",
         "yAxisIndex": 1,
         "lineStyle": {
            "width": 2.5
         },
         "label": {
            "show": true,
            "color": "#fff"
         },
         "symbolSize": 9,
         "symbol": "circle",
         "data": [
            70, 77, 57, 50, 34, 26, 15, 37, 48, 62, 65, 79, 58, 42, 38, 21, 18, 38, 38, 65
         ]
      }
   ]
};