业务需求:根据x轴是用户和有用户的文件夹来展示两种颜色
在这里插入图片描述
在获取数据的方法中

 initData() {
      totalAnaysis().then(res => {
        let xData = [],
          yData = [],
          xFontcolor = []
        res.data.user.forEach(item => {
          item.xFontcolor = '#9B9B9B'
          xFontcolor.push(item.xFontcolor)
        })
        res.data.group.forEach(item => {
          item.xFontcolor = '#6FAAE0'
          xFontcolor.push(item.xFontcolor)
        this.initEaharts(xData, yData, xFontcolor)
      })
    },

在初始echarts的方法中,xAxis–>axisLabel—>textStyle–>color 中设置

initEaharts(xData = [], yData = [], xFontcolor = []) {
      // 绘制图表
      this.echart = echarts.init(document.getElementById('anaysisEcharts'))
      let options = {
        xAxis: {
          axisTick: { show: true },
          axisLine: { show: true },
          axisLabel: {
            textStyle: {
              color: function(value, index) {
                return xFontcolor[index]
              },
              fontSize: 14
            },
            rotate: 40,
            clickable: true
          },
          silent: false,
          triggerEvent: true,
          data: xData
        },
      this.echart.setOption(options)
      this.echart.on('magictypechanged', params => {
        this.echart.setOption({ xAxis: { boundaryGap: true } })
      })
    },
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐