Echarts坐标轴刻度线宽度

平时Echarts的y轴刻度线是一条细直线，现在有一个需求是美工设计的刻度线是有宽度的，即粗刻度线还有粗线条设置了颜色，效果比较好，所以这个是必须要实现的：

- echarts刻度线的宽度是可以设置的，利用yAxis的splitLine下的lineStyle里面的width可以设置宽度，之后刻度线是变宽了，但是0刻度的线也变粗了

- 翻阅Echarts的配置项，发现color的颜色配置可以是数组形式的，echarts会根据数组来循环使用数组的颜色给刻度线使用，于是我想到了，如果数组大于刻度线的数量的话，数组就不会循环使用，相当于按顺序给每条刻度线上色，那第一条刻度线设置成透明色就可以了

配置代码奉上

代码块语法遵循标准Echarts代码，可直接放到Echarts官网示例中运行：

var names = ['山东省','天桥区','寿光市','昌邑市','微山县','嘉祥县','梁山县','罗庄区','河东区','宁津县','庆云县','齐河县','夏津县','武城县','乐陵市','东昌府区','阳谷县','茌平县','冠县','临清市'];
var value = [50, 90, 90, 86, 81, 78, 74, 70, 64, 46, 41, 36, 34, 30, 28, 26, 23, 17, 12, 7];
var avgStart = [0,50];
var avgEnd = [19, 50];
var avg = 50;
var colorList = [['#47D6E6','#2FBEE0'],['#FFD64F','#FFAC41']];option = {tooltip : {trigger: 'axis',formatter: function (params) {let res = params[0].axisValue  + "<br/>";for (let i = 0; i < 1; i++) {var series = params[i]; if (series.data != 0) {res += series.marker + series.seriesName + " : " + series.data + "%<br/>";} }return res;}},dataZoom: [{type: 'inside'}],backgroundColor: '#ffffff',grid:{top:"20px",left:"40px",right:"20px",bottom:"50px"},calculable : true,xAxis : [{type : 'category',data : names,axisLabel: {rotate:40},axisTick: {//设置地名分割线颜色lineStyle: {color: '#A9A9A9'}},axisLine: {//设置地名及x轴线条颜色show: true,lineStyle: {color: '    #A9A9A9'}}}],yAxis : [{type : 'value',scale:true,axisLine: {show: false},axisTick: {show: false},splitLine: {show: true, lineStyle: {//设置刻度线粗度(粗的宽度)width:20,//颜色数组，数组数量要比刻度线数量大才能不循环使用color: ['rgba(0, 0, 0, 0)','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9']}}}],series : [{name:'',type:'bar',barWidth: 26,itemStyle: {normal: {barBorderRadius:[6, 6, 0, 0],color:function (params){var colorIndex = 0;if(params.dataIndex == 0){colorIndex = 1;}return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: colorList[colorIndex][0]},{offset: 1, color: colorList[colorIndex][1]}]);}}},markLine : {data : [[{name:avg,coord:avgStart,itemStyle:{color: '#DC143C'}},{coord:avgEnd}]]},data:value}]};

正在为项目研究中，还有很多不足，望大神指点

Echarts坐标轴刻度线宽度美化相关推荐

R语言axis函数自定义可视化的坐标轴刻度线（axis ticks）
R语言axis函数自定义可视化的坐标轴刻度线(axis ticks) 目录 R语言axis函数自定义可视化的坐标轴刻度线(axis ticks) # 自定义轴刻度
R语言使用plot函数可视化数据散点图，自定义设置tck参数创建内部刻度、坐标轴刻度线在可视化图像内部
R语言使用plot函数可视化数据散点图,自定义设置tck参数创建内部刻度.坐标轴刻度线在可视化图像内部目录
vue echarts柱状图隐藏坐标轴刻度线等横向显示百分比
隐藏坐标线 axisLine: {show: false }, 隐藏刻度线 axisTick: {show: false }, label展示formatter百分比已经封装好的组件,可以直接复制代 ...
Matplotlib中修改坐标轴刻度线的属性
在matplotlib中,刻度线叫tick,刻度值叫tick_label 注意这幅图片中就包含了关于刻度线的一些信息.比方,不仅有主刻度线(Major tick),还有次刻度线(Minor tick) ...
Echarts仪表盘刻度线和标签配置
该案例只做参考步骤: 1.首先设置好盒子的宽高 demo页面 css页面 2. 该方法在进入页面时加载 3. methods方法: // 待处理阈值实时监听 handleRefGauge1() {c ...
echarts 仪表盘刻度线随进度条改变颜色
示例图 option = {series: [// 最小{type: 'gauge',radius: '15%', // 位置center: ['50%', '60%'],min: 0,max: 10 ...
matlab隐藏坐标轴刻度线和数字
隐藏x轴的数字 set(gca,'xticklabel',[]) 隐藏x轴的刻度 set(gca,'xtick',[]) 也可以合并起来写 set(gca,'xtick',[],'xticklabel ...
Echarts 坐标轴刻度间隔/全部显示
在xAxis 或 yAxis 中加入 axisLabel:{interval: 0, // 调整数值即可调整坐标显示间隔rotate:'6', // 显示内容脚本textStyle: { // 文字样 ...
echarts 柱状图隐藏x、y轴坐标轴、刻度线、隐藏x、y轴坐标轴的数值
echarts 柱状图隐藏x.y轴的内容,隐藏x,y轴坐标轴.刻度线.隐藏x.y轴坐标轴的数值 1.隐藏x轴坐标轴,在xAxis下使用axisLine属性为false,相反显示则是true axisL ...

Echarts坐标轴刻度线宽度美化

Echarts坐标轴刻度线宽度

配置代码奉上

正在为项目研究中，还有很多不足，望大神指点

Echarts坐标轴刻度线宽度美化相关推荐

最新文章

热门文章