echarts 常用配置项

每次写echarts 修改样式时,要么就是翻以前代码,要么找官方api,太浪费时间了,就把常用到的一些记录下来做个笔记,方便下次查看。

1.修改柱条颜色

1.1修改柱条颜色为纯色

series: [
    {
        name: '个数',
        type: 'bar',
        label: {
            normal: {
                show: true,
                position: 'inside'
            }
        },
        data: [],
        itemStyle:{ //修改柱条颜色
             color: '#f00'
        },
        barMaxWidth:40
    },
]

1.2 修改柱条颜色为渐变色

series: [
    {
        name: '个数',
        type: 'bar',
        label: {
            normal: {
                show: true,
                position: 'inside'
            }
        },
        data: [],
        itemStyle:{ //修改柱条颜色
             color: new echarts.graphic.LinearGradient(
                 0, 0, 1, 0,
                 [
                     {offset: 1, color: '#00adff'},
                     {offset: 0.5, color: '#007dfe'},
                     {offset: 0, color: '#0054fd'},                   //柱图渐变色
                 ]
             )
        },
        barMaxWidth:40
    },
]

修改后的渐变柱条如下:

2.调整图表周围的空白区域

坐标轴文字区域太窄,显示效果不好,如果能把图表左边的区域留大一点就好了,而 grid 组件能帮助我们实现。

grid: {
    x: '25%', //grid 组件距离左侧的距离
    y: 50
},

由于显示的字数有点多,距离太远了影响也不好,所以再加上了换行。最终效果如下:

(换行具体操作参考之前的文章:echarts坐标轴上文本太长的解决办法

3. 图表去除网格线、坐标轴颜色修改

xAxis:  {
    type: 'value',
    splitLine:{show: false},//去除网格线
    position:'top',//坐标轴位置
    axisLine:{
        lineStyle:{
            color:'#fff',
            width:1,//这里是为了突出显示加上的
        }
    }
},

 

想到再更新,未完待续...

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 黑客帝国 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读