首页 前端知识 echarts折线图拐点样式设置

echarts折线图拐点样式设置

2024-04-01 10:04:27 前端知识 前端哥 981 143 我要收藏

echarts折线图拐点样式设置

代码详情:

      series: [
          {
            name: '发文篇数',
            type: 'line',
            // smooth: true,
            showSymbol: true,
            symbol: 'circle',
            symbolSize: (value, param) => {
              return param.dataIndex !== this.clickIndex ? 10 : 18
            },
            itemStyle: {
              color: (param) => {
                return param.dataIndex !== this.clickIndex ? '#FFF' : '#227bff'
              },
              borderColor: '#227bff',
              borderWidth: 2,
              borderType: 'solid',
              shadowColor: 'rgba(77, 161, 255, 1)',
              shadowBlur: 10
            },
            lineStyle: {
              width: 2,
              color: '#227bff'
            },
            data: this.y
          }
        ]

color 设置图形的颜色。支持使用回调函数 (params: Object) => Color
borderColor 设置图形的描边颜色
borderWidth 设置描边线宽。为 0 时无描边
borderType 设置描边类型。可选:‘solid’ ,‘dashed’,‘dotted’
shadowColor 设置阴影颜色。支持的格式同color
shadowBlur 设置图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

详细可见 echarts官方文档

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4382.html
标签
评论
发布的文章

前端vue实现甘特图

2024-04-19 21:04:35

HTML入门(详细)

2024-04-19 21:04:24

HTML 入门手册(一)

2024-04-19 21:04:58

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