Echarts折线图设置线条颜色及线条以下代码示例
更新时间：2024年02月17日 09:48:38 作者：小任同学`
最近项目需要,一直在使用Echarts视图,现在遇到一个要修改echarts折线图颜色的需求,下面这篇文章主要给大家介绍了关于Echarts折线图设置线条颜色及线条以下区域渐变颜色的相关资料,需要的朋友可以参考下
一、展示效果
二、设置折线颜色
在series中，设置lineStyle属性。
lineStyle: {
color: '#556FFD'
},三、设置折线拐点大小
在series中使用symbol属性、symbolSize属性
symbol: 'circle', // 拐点的形状 symbolSize: 6, // 拐点大小
三、设置折线拐点颜色（hover折现点颜色）
在series中，使用itemStyle属性、emphasis属性。
itemStyle: {
// 设置线条上点的颜色（和图例的颜色）
normal: {
color: '#556FFD',
},
},
emphasis: {
// 鼠标hover上去的时候，拐点的颜色和样式
itemStyle: {
color: '#556FFD', // 颜色
borderColor: '#556FFD', // 图形的描边颜色
borderWidth: 1 // 描边的线宽
}
},四、设置折线渐变颜色
在series中，使用areaStyle属性。
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [ // 渐变颜色
{
offset: 0,
color: 'rgba(85,111,253,0.50)',
},
{
offset: 1,
color: 'rgba(85,111,253,0.00)',
},
],
global: false,
},
},总结
到此这篇关于Echarts折线图设置线条颜色及线条以下区域渐变颜色的文章就介绍到这了,更多相关Echarts折线图设置线条颜色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
return false;和e.preventDefault();的区别
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple2010-07-07
这篇文章主要是对Javascript中匿名函数的多种调用方式进行了详细的总结介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
这篇文章主要介绍了JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法的相关资料,需要的朋友可以参考下2016-02-02
下面小编就为大家带来一篇遍历json 对象的属性并且动态添加属性的实现。小编觉的挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现，感兴趣的朋友可不要错过2013-10-10
Bootstrap每天必学之媒体对象，对BootBootstrap每天必学之媒体对象小编也了解的很少，希望通过这篇文章和大家更多的去学习Bootstrap每天必学之媒体对象，从中得到收获。2015-11-11
本文主要介绍了Webpack中的文件指纹的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了6种JavaScript继承方式及优缺点(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了Redux中进行异步操作(网络请求)的方案,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了js实现简单页面全屏的功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最新评论