Echarts

2020-11-12 12:03:32 阅读：236 来源： 互联网

  <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>

标签：mg,Nm,var,柱状图,5%,type,Echarts
来源： https://www.cnblogs.com/zxg-code/p/13963176.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Echarts