Echarts去掉叠堆折线区域图的区域颜色

简介: Echarts去掉叠堆折线区域图的区域颜色

一开始是这样的,折线图设置了区域阴影的颜色,现在不想要echarts折线区域图的区域颜色,需要去掉。



只需要修改series里面的一系列相关的参数,属性即可。

series : [
{
name:'订单流入总数',
type:'line',
stack: '总量',
areaStyle: {
normal: {
color: '#8cd5c2' //改变区域颜色
}
},
itemStyle : {
normal : {
color:'#8cd5c2', //改变折线点的颜色
lineStyle:{
color:'#8cd5c2' //改变折线颜色
}
}
},
data:[10, 12, 11, 34, 90, 20, 21]
}
]

我们的demo里面,也是只需要在series里面设置就行了

series : [ {
            name : '进厂',
            type : 'line',
            itemStyle : {
                normal : {
                    color : '#ff8762',//改变折线点的颜色
                        lineStyle:{
                            color:'#ff8762' //改变折线颜色
                            }
                }
            },
            areaStyle : {
                normal : {color : '#ffffff',}//改变区域颜色
            },
            data : y
        }, {
            name : '服务',
            type : 'line',
            /*stack : '总量',*/
            itemStyle : {
                normal : {
                    color : '#b198dc',//改变折线点的颜色
                        lineStyle:{
                            color:'#b198dc' //改变折线颜色
                            }
                }
            },
            areaStyle : {
                normal : {color : '#ffffff',}//改变区域颜色
            },
            data : y3
        },
        {
            name : '离厂',
            type : 'line',
        /*  stack : '总量',*/
            itemStyle : {
                normal : {
                    color : '#8cd5c2',//改变折线点的颜色
                    lineStyle:{
                        color:'#8cd5c2' //改变折线颜色
                        }
                }
            },
        /*  label : {
                normal : {
                    show : true,
                    position : 'top'
                }
            },*/
            areaStyle : {
                normal : {color : '#ffffff',}//改变区域颜色
            },
            data : y2
        } ]

好了,如图

相关文章
|
6月前
echarts 横纵分割线颜色透明度
echarts 横纵分割线颜色透明度
|
30天前
|
JSON JavaScript 定位技术
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
Vue结合ECharts绘制省市地图:数据驱动区域颜色展示,支持省市下钻与经纬度打点功能
78 0
|
2月前
echarts中使用散点scatter更改颜色却不生效的问题
本文讨论了在ECharts中使用散点图(scatter)时更改颜色不生效的问题。原因是项目中使用了`visualMap`组件,它具有最高的优先级,导致自定义的颜色设置被覆盖。解决方法是在`visualMap`组件中增加`seriesIndex`属性,指定它只对特定的系列(series)生效,从而避免影响散点图的颜色设置。文章提供了详细的代码示例和解决办法。
62 2
|
6月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
111 0
echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个
|
5月前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
203 0
 ECharts 雷达图案例001-自定义节点动画
|
5月前
|
数据可视化 黑灰产治理
📊 ECharts 雷达图案例002 - 诈骗性质分析
**ECharts 案例展示了诈骗性质的雷达图分析,以创新可视化揭示诈骗模式。定制化雷达图配色鲜明,多维度剖析不同诈骗手段,如网络刷单、冒充公检法。交互式设计允许用户深入探究细节。[点击这里](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454384)查看完整案例。#ECharts #数据可视化 #雷达图 #诈骗分析**
55 0
📊 ECharts 雷达图案例002 - 诈骗性质分析
|
4月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
366 0
|
6月前
eCharts实现漏斗图
eCharts实现漏斗图
204 0
eCharts实现漏斗图
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色
echarts去掉y轴线、设置x轴线的颜色、x轴文字颜色

热门文章

最新文章