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);