业务需求:根据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 } })
})
},