echarts 折线统计图

页面html代码

    <!--道路及沿线设备病害统计-->
    <div class="layui-col-md12 layui-col-lg6">
      <div echarts id="roadDevice" class="demo-chart demo-color"
           style="margin-top: 20px;width: 100%;height: 400px;"></div>
    </div>
    <!--巡查、病害、养护数量统计-->
    <div class="layui-col-md12 layui-col-lg6">
      <div echarts id="inspectDiseaseCuring" class="demo-chart demo-color demo-float"
           style="margin-top: 20px;width: 100%;height: 400px;"></div>
    </div>

css

.demo-float{
  float: right;
}
.demo-color{
  background-color: #fff;
  max-width: 97%;
  font-family: sans-sarif;
  font-size: 9px;
  font-weight: 300;
  margin:10px ;

}

js代码
图一代码

  //道路及沿线设备病害统计图表
  getRoadDeviceEcharts() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('roadDevice'));

    var roadData = [];
    var deviceData = [];

    for (var i = 0; i < 10; i++) {
      roadData.push((Math.random() * 2).toFixed(2));
      deviceData.push((Math.random() * 5).toFixed(2));
    }
    // 指定图表的配置项和数据
    const option = {
      title: {
        top: '5%',
        text: '道路及沿线设备病害统计'
      },
      legend: {
        data: ['道路', '设备'],
        left: '60%',
        top: '20',
      },
      tooltip: {
        trigger: 'axis',
      },
      // brush: {
      //   toolbox: [],
      //   xAxisIndex: 0
      // },
      toolbox: {
        feature: {
          magicType: {
            type: ['stack', 'tiled']
          },
          dataView: {}
        }
      },

      xAxis: {
        type: 'category',
        data: this.timeList
      },

      yAxis: {
        type: 'value'
      },
      grid: {
        // bottom: 100
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },

      series: [
        {
          name: '道路',
          type: 'bar',
          stack: 'one',
          color: '#0babff',
          lineStyle: {  //线的颜色
            color: '#0babff'
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: { //数值样式
                color: '#0babff',
                fontSize: 9
              }
            }
          },
          data: roadData
        },
        {
          name: '设备',
          type: 'bar',
          stack: 'one',
          color: '#8CE24F',
          lineStyle: {  //线的颜色
            color: '#8CE24F'
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: { //数值样式
                color: '#8CE24F',
                fontSize: 9
              }
            }
          },
          data: deviceData
        },
      ]
    };
    myChart.on('brushSelected', renderBrushed);

    function renderBrushed(params) {
      var brushed = [];
      var brushComponent = params.batch[0];

      for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
        var rawIndices = brushComponent.selected[sIdx].dataIndex;
        brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
      }

      myChart.setOption({
        title: {
          backgroundColor: '#333',
          text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
          bottom: 0,
          right:'10%',
          width: 100,
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        }
      });
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

  }

图二代码

  //巡查、病害、养护数量统计图表
  getInspectDiseaseCuringEcharts() {
    // let myChart = echarts.init(document.getElementById('paishui2'+ pumpId));
    let myChart = null;
    // this.ngZone.runOutsideAngular(() => {
    myChart = echarts.init(document.getElementById('inspectDiseaseCuring'));
    // });

    const ps2option = {
      title: {
        top: '5%',
        // text: '巡查、病害、养护数量统计'
        text: '病害、养护数量统计'
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        left: '60%',
        top: '20',
        data: ['病害数量', '养护数量'],

      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        // data: timeList.map(function (str) {
        //   return str.replace(' ', '\n');
        // }),
        data: this.timeList
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '病害数量',
          type: 'line',
          stack: '总量',
          color: '#0babff',
          lineStyle: {  //线的颜色
            color: '#0babff'
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: { //数值样式
                color: '#0babff',
                fontSize: 9
              }
            }
          },
          areaStyle: {
            color: 'rgba(11,171,255,0.5)'
          },
          emphasis: {
            focus: 'series'
          },
          // data: avgDrainageSpeedList,
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: '养护数量',
          type: 'line',
          stack: '总量',
          color: '#5ADC5B',
          lineStyle: {  //线的颜色
            color: '#5ADC5B'
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: { //数值样式
                color: '#5ADC5B',
                fontSize: 9,
              }
            }
          },
          areaStyle: {
            color: 'rgba(90,220,91,0.5)'
          },
          emphasis: {
            focus: 'series'
          },
          // data: drainageList,
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        }
      ]
    };
    // 绘制图表
    myChart.clear(); //清楚之前echarts 缓存 重新画折线图
    myChart.setOption(ps2option);

  }