<div class="charts rightTopEcharts">


<script>
mounted () {
    this.rightTopFun()
},
methods: {
// 右上
rightTopFun () {
      // 基於準備好的dom，初始化echarts例項
      var myChart = this.$echarts.init(document.querySelector('.rightTopEcharts'))
      // 配置項
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['PM濃度(mg/Nm³)', 'NOx濃度(mg/Nm³)', 'SO₂濃度(mg/Nm³)']
        },
        series: [
          {
            name: '實時排放濃度',
            type: 'bar',
            // 設定不同的柱狀圖的顏色
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['orange', 'skyblue', 'green']
                  return colorList[params.dataIndex]
                }
              }
            },
            // 顯示柱狀圖上面的數字位置 insideRight 內部右側
            label: {
              show: true,
              position: 'insideRight'
            },
            // 設定 柱狀圖的柱狀寬度
            barWidth: 25,
            data: [6.5, 9, 10.85]
          }
        ]
      }
      myChart.setOption(option)
    },

</script>