echarts设置x轴字体不同颜色

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

echarts设置x轴字体不同颜色相关推荐

Echarts设置y轴值间隔
需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些. 其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的清清楚楚 ...
echarts 设置X轴Y轴字体大小不成功问题处理
在网上看到的error代码 axisLabel: {show: true,textStyle: {color: '#FFFFFF',fontSize: '38',//字体大小},}, 正确的代码 ax ...
解决echarts设置x轴、y轴刻度起始值、终止值以及步长
echarts的官方示例中,可以通过设置xAxis(x轴)和yAxis(y轴)min.max属性改变x.y轴刻度起始.终止值. 对于坐标轴步长,官方给出两种方式,第一种是利用splitNumber,第 ...
Echarts调整X轴字体大小
有一个课程作业要做数据可视化,用到了Echart,这个框架很好用,但是我发现有需求的修改,需要查阅官方文档,但是查阅不方便,给开发还是造成了一些困难.例如我要调整X轴上的字体大小,但是发现官方的dem ...
Echarts设置X轴文本换行
在做Echarts图表的时候通常会遇到一个名字较长的分类或者字段名称通常我们可以倾斜他让他全部显示但是这样的话X轴下方就会拉得比较长在项目中需求通常也是会要求换行: Echarts本身没有提 ...
Echarts 修改X轴字体大小
axisLabel: {textStyle: {color: '#000',fontSize:30,}}, axisLabel 哦!!!!!!!!!!他有几个属性长的很相似的
echarts柱状图x轴文字换行_深入 echarts 如何设置 Label / axisLabel 换行及自定义格式 / 自定义样式? 结合 canvas 如何实现文字换行来理解...
前言之前在一篇文章<深入 echarts 如何设置渐变色?echarts 如何设置圆角?echarts 如何设置自定义 Label?>已经初步介绍了如何通过 formatter 结合 r ...
echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标
本文已参与「新人创作礼」活动,一起开启掘金创作之路. 宝子们,今天又是开心的一天呢~ 上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始 ...
Echarts柱状纵向横向、圆角、渐变、x轴字体倾斜或垂直显示
1.柱状纵向变横向将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 //纵向xAxis: [{type: 'value'}],yAxis: [{ ...

echarts设置x轴字体不同颜色

echarts设置x轴字体不同颜色相关推荐

最新文章

热门文章