Echarts

  <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'
          }
        },        
         // 图例部分
         legend: {
          left: 'left', // 图例位置 'left'左侧 'center'居中 'right'右侧
          orient: 'vertical',// 图例排序方式 默认横向布局'horizontal'，纵向布局值为'vertical'
          data: ['xx','xx']
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          // X轴 文本颜色更换
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['PM浓度(mg/Nm³)', 'NOx浓度(mg/Nm³)', 'SO₂浓度(mg/Nm³)'],
          // Y轴 文本颜色更换
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        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>

Echarts x轴字体倾斜

axisLabel: {  
   interval:0,        // interval坐标轴刻度标签的显示间隔 可以设置为0强制显示所有标签，设置为1，隔一个标签显示一个标签
   rotate:40        ///标签倾斜的角度，旋转的角度是-90到90度  
}  

折线图变成 圆润的折线

    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]

雷达图 设置雷达图周边的字体大小 颜色

  radar: [
          {
            indicator: [
              { text: 'XXXX', max:xx },
              { text: 'XXXX', max:xx },
              { text: 'XXXX', max:xx },
            ],
            radius: 120,
            center: ['50%', '50%'],
            // 调整雷达图字体颜色,字体大小
            name: {
              textStyle: {
                color: '#fff',
                fontSize: 15
              }
            }
          }
        ],

XY轴颜色变化

   yAxis: {
          type: 'value',
          // Y轴颜色变化
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 1 // 这里是为了突出显示加上的
            }
          }
        },