echarts折线图美化
最近做的可视化图表有这样的需求：曲线区域颜色渐变，
option = { tooltip : { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' }, } }, legend: { data:['邮件营销','搜索引擎'], x: 'left' }, color: ["#0080ff","#4cd5ce"], toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'邮件营销', type:'line', stack: '总量', itemStyle: { normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#d7f4f8' // 0% 处的颜色 }, { offset: 0.5, color: '#eefcfd' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 }] ), //背景渐变色 lineStyle: { // 系列级个性化折线样式 width: 3, type: 'solid', color: "#4fd6d2" } }, emphasis: { color: '#4fd6d2', lineStyle: { // 系列级个性化折线样式 width:2, type: 'dotted', color: "#4fd6d2" //折线的颜色 } } },//线条样式 symbolSize:5, //折线点的大小 areaStyle: {normal: {}}, data:[320, 332, 601, 134, 120, 230, 210] }, { name:'搜索引擎', type:'line', stack: '总量', itemStyle: { normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#81befd' // 0% 处的颜色 }, { offset: 0.4, color: '#e4f2ff' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 }] ), //背景渐变色 lineStyle: { // 系列级个性化折线样式 width: 3, type: 'solid', color: "#0180ff" //折线的颜色 } }, emphasis: { color: '#0180ff', lineStyle: { // 系列级个性化折线样式 width: 2, type: 'dotted', color: "0180ff" } } },//线条样式 symbolSize:5, //折线点的大小 label: { normal: { show: true, position: 'top' } }, areaStyle: {normal: {}}, data:[820, 932, 901, 934, 1290, 1330, 1320] } ] };
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116要想要实现曲线区域颜色渐变
//折线图区域颜色渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: '#81befd' // 0% 处的颜色 }, { offset: 0.4, color: '#e4f2ff' // 100% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 }] ), //背景渐变色 123456789
效果如下
相关知识
基于Echarts的鸢尾花数据可视化
基于Python的全国主要城市天气数据可视化大屏系统
visualmap折线图
常用大数据可视化分析工具介绍
如何将商显示为百分比
项目问题
2023版完整版web前端学习路线图（超详细自学路线）
花店数据分析图怎么做
L7
屏幕适配方案——详细完整版
网址: echarts折线图美化 https://m.huajiangbk.com/newsview1356927.html
| 上一篇: Python解析xml文件： E |
下一篇: Bootstrap Switch |
