echarts 图表改变Y轴样式及背景样式

数据可视化中使用率最高的就是echarts.js;

在官方文档中也很详细的将各个属性标注的很清楚。今天给大家分享一下echarts 图表改变Y轴样式及背景样式。

原样式:

echarts 图表改变Y轴样式及背景样式_第1张图片

修改后样式:

echarts 图表改变Y轴样式及背景样式_第2张图片

立即奉上代码:

js:::

yAxis: [
                        {
                            type: 'value',
                            axisLine: {
                                show: false,
                                minInterval:1,
                                lineStyle: {
                                    type: 'solid',
                                    color: '#CCCCCC',//左边线的颜色
                                    width: '1'//坐标线的宽度
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#5A5A5A',//坐标值得具体的颜色

                                }
                            },
                            axisTick:false,
                            splitLine: {  //坐标轴在grid区域中的分隔线(网格中的横线)
                                show: true,
                                lineStyle: {
                                    color: ['#CCCCCC'],
                                    width: 1,
                                    type: 'dashed',
                                }
                            },
                            splitArea: {//坐标轴在grid区域中的分隔区域(间隔显示网格区域)
                                interval: 1, //显示间隔的规律
                                show: true,
                                areaStyle: {//分隔区域的样式
                                    color: ['rgba(255,255,255,0.03)', 'rgba(255,255,255,0)']
                                }
                            }
                        }
                    ],

谢谢阅读,欢迎再来!

你可能感兴趣的:(echarts数据可视化,数据可视化,前端)