首页 前端知识 Echarts-折线图-设置线条颜色及线条以下区域渐变颜色

Echarts-折线图-设置线条颜色及线条以下区域渐变颜色

2024-02-13 10:02:19 前端知识 前端哥 771 915 我要收藏

一、展示效果

 二、设置折线颜色

   在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,
},
},
复制

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1942.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

jQuery 下载与安装教程

2024-02-28 11:02:44

若依中jquey相关问题

2024-02-28 11:02:41

【JavaWeb】1.JQuery

2024-02-28 11:02:21

jQuery日历签到插件下载

2024-02-28 11:02:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!