echarts柱状图渐变,柱状图半透明背景

原创 loya8023 随笔 ECharts 2186阅读 2017-05-08 14:34:08 举报

功能介绍:

1.echarts柱状图渐变
2.柱状图半透明背景
3.折线图拐点加大,数据显示格式化
4.最大值计算自适应

####渐变实现核心代码:
html 代码


####柱状图半透明背景核心代码:
在显示数据的series中,加入一个数据对象做为第一个,数据数组中每一项显示最大值,位置为-100%,设置透明度,作为柱状图各项数据的背景。
bgMax是纵坐标数据的最大值,看源代码就明白了
html 代码


####折线图拐点加大核心代码:
html 代码


####折线图数据显示格式化核心代码:
html 代码

看看效果,重要的是####渐变哦!####
html 代码

评论 ( 6 )
最新评论
源源不断 5F 2017-05-18 09:39:05 6F

找到了!

源源不断 4F 2017-05-18 09:33:49 5F

楼主知道折线图的拐点的背景颜色怎么修改吗 看配置选项只有大小和形状可修改 是不是跟legend的颜色有关?

loya8023 2017-05-08 16:53:49 4F

柱形边框圆角:series[i]-bar.itemStyle.normal.barBorderRadius

柱形边框圆角半径,单位px,支持传入数组分别指定柱形4个圆角半径。 如:
barBorderRadius: 5, // 统一设置四个角的圆角大小
barBorderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)

loya8023 1F 2017-05-08 15:23:01 3F

刚开始学习vue,向你学习

loya8023 1F 2017-05-08 15:20:38 2F

哈哈,谢谢,你也可以的

大大大大糖糖 2017-05-08 15:18:00 1F

不明觉厉