EChart案例-折线面积渐变色

先看效果

图中的范围是个渐变色，option关键配置

 itemStyle: {normal: {areaStyle: {type: 'default'},color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#56ad66'},{offset: 0.5, color: 'rgba(98, 199, 98, 0.3)'},{offset: 1, color: 'rgba(98, 199, 98, 0.1)'}]),borderColor:'#71df6f',//拐点边框颜色borderWidth:2//拐点边框大小}},

new echarts.graphic.LinearGradient生成渐变色对象，具体参数配置查阅官方API。

完整代码：

let data=[];for(var i=0;i<12;i++){data.push(Math.floor(Math.random()*1000+20))}let option = {title : {text: '',},tooltip : {trigger: 'axis',backgroundColor:' rgba(23, 99, 143, 0.75)' ,padding:[5,10],formatter(params){let point=params[0];return '2019年'+point.name+'月 : '+point.value}},legend: {data:['2019'],textStyle: {color: '#7aaab8',fontSize:14},},calculable : true,xAxis : [{name : '(月)',nameLocation: 'end',nameTextStyle:{color: '#a0d7de',fontSize:16,padding:[50, 0, 0, 10]},type : 'category',boundaryGap : false,data : ['1','2','3','4','5','6','7','8','9','10','11','12'],axisLine: {show: false},axisTick: {show: false},offset:10,axisLabel: {show:true,textStyle: {color: '#a0d7de',fontSize:16}},axisPointer:{ //基准线lineStyle:{color:'#52cdef'}}}],yAxis : [{axisLabel: {show:true,textStyle: {color: '#a0d7de',fontSize:16}},axisTick: {show: false},axisLine: {show: false},offset:10,splitLine: {show: true,lineStyle:{type:'dashed',color: ['#00f0ff']}}}],series : [{name:'2019',type:'line',smooth:true,symbolSize: 10,   //设定实心点的大小lineStyle:{color:'#71df6f' //改变折线颜色},lineWidth:2,itemStyle: {normal: {areaStyle: {type: 'default'},color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#56ad66'},{offset: 0.5, color: 'rgba(98, 199, 98, 0.3)'},{offset: 1, color: 'rgba(98, 199, 98, 0.1)'}]),borderColor:'#71df6f',//拐点边框颜色borderWidth:2//拐点边框大小}},data:data},]};let myChart = echarts.init(document.getElementById('run-rain-line-chart'));myChart.setOption(option);

EChart案例-折线面积渐变色相关推荐

vue移动端中使用echart折线面积图（设置渐变色）解决ios6/11渐变色不显示bug
前言: 1.折线本身渐变色 2.折线阴影面积渐变色效果如图所示: 1.全局引入echart main.js // 如果全局引入就在此加上这两行代码 // 如果就一个页面直接页面引入完事儿 impor ...
用Python pyecharts v1.x 绘制图形（二）:折线图、折线面积图、散点图、雷达图、箱线图、词云图
文章目录关于pyecharts 折线图折线面积图散点图雷达图箱线图词云图其他关于pyecharts pyecharts是一个用于生成echart(百度开源的数据可视化javascrip ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
Pyecharts：pyecharts(图文+代码)实战(柱状图/条形图/散点图、漏斗图、仪表盘、折线/面积图、水球图、地图、平行坐标系、饼图、极坐标系、雷达图、词云图)之绘制各种吊炸天的图表
Pyecharts:pyecharts(图文+代码)实战(柱状图/条形图/散点图.漏斗图.仪表盘.折线/面积图.水球图.地图.平行坐标系.饼图.极坐标系.雷达图.词云图)之绘制各种吊炸天的图表目录 ...
echart案例双刻度的坐标轴
<div class="shichang-bar" id="shichangBar"></div> echart案例 export de ...
echarts折线面积图
前言近段时间又做了些相关图表,更熟悉了对echarts学习,针对折线图进行一个书写需求图实现技术 vue3.0+ts+echarts 代码 <template><divsty ...
Echart实现折线图
前言之前参加数学建模的时候需要将数据展示成图表形式,当时知道主流是MATLAB,pathon也可以,但是却不知道JS也可以绘制图表,甚至可以做出像地图.雷达图等更高级的东西. Echart ECha ...
echarts柱状图、折线图渐变色，填充渐变色，鼠标移入样式，双y轴
基础代码都一样,根据配置的seriesDta的type不同,展现出的效果不同,每一个echarts都对应单独的series 版本不同可能实现效果不同,具体查看官网哦. 安装: npm install ...
Echarts 折线图渐变色不堆叠
好记性不如烂笔头,记录下方便后续使用~~~ 效果图: 注意点: (1)hover 时,背景阴影.自定义提示内容 tooltip: {trigger: 'axis',axisPointer: {type ...
复现Nature图表 ggplot做面积图（折线面积图）
今天我们学做一下nature文章(Deciphering human macrophage development at single-cell resolution)的图表,本意是展示细胞比例的变化 ...

EChart案例-折线面积渐变色

EChart案例-折线面积渐变色相关推荐

最新文章

热门文章