Echarts折线图渐变色的属性设置解决方案

简介: Echarts折线图渐变色的属性设置解决方案

20200330122944767.png


这些设置itemStyle的图形属性即可:

itemStyle: {
                    "color": {
                        "type": "linear",
                        "x": 0,
                        "y": 0,
                        "x2": 0,
                        "y2": 1,
                        "colorStops": [
                            {
                                "offset": 0,
                                "color": "#00fff2"
                            },
                            {
                                "offset": 1,
                                "color": "#194874"
                            }
                        ],
                        "globalCoord": false
                    }
                }


Done!

相关文章
|
8天前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
20 0
echarts设置单位的偏移
echarts设置单位的偏移
|
8天前
|
JavaScript 应用服务中间件 nginx
【报错】nginx部署项目后Echarts折线图无法展示
在Vue3+TS+Arco项目中,打包后使用Nginx部署的Echarts折线图显示异常,报`Cannot read properties of undefined(reading 'setOption')`错误。问题源于在定义div时使用了Vue2的`$refs`语法,导致DOM元素无法正确初始化Echarts。解决方法有两种:1) 不推荐使用`document.getElementById`获取DOM并初始化Echarts;2) 推荐在Vue3中通过`ref`获取DOM,在`onMounted`中使用`echarts.init`并借助`nextTick`异步绘制数据。
|
8天前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
25 0
|
8天前
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
Echarts图表设置x轴y轴均随滚轮滚动缩+放 区域缩放
|
8天前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
8天前
|
JavaScript 数据可视化 前端开发
ECharts 的配置语法:配置选项、数据格式、样式设置
ECharts 的配置语法:配置选项、数据格式、样式设置
172 1
echarts设置多条折线不是你想的那样简单
echarts设置多条折线不是你想的那样简单
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色