欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

echarts折线图上下颜色渐变样式

程序员文章站 2022-04-15 14:44:21
// 折线图let lineChart = echarts.init(document.getElementById('lineChart'));let lineOption = { title: { text: '数据接入增量趋势', textStyle: { color: '#cccccc', ... ......
// 折线图
let linechart = echarts.init(document.getelementbyid('linechart'));
let lineoption = {
title: {
text: '数据接入增量趋势',
textstyle: {
color: '#cccccc',
fontsize: 14
}
},
tooltip : { // 悬浮提示
trigger: 'axis',
axispointer: {
type: 'cross',
label: {
backgroundcolor: '#6a7985'
}
}
},
grid: {
left: 5,
right: 20,
top: 50,
bottom: 5,
containlabel: true
},
xaxis : [
{
type : 'category',
boundarygap : false, // 是否紧贴y轴
axisline: { // x轴
linestyle: {
color: '#606970'
}
},
axistick: { // x轴刻度
linestyle: {
color: '#606970'
}
},
axislabel: { // x轴文字
color: '#ffffff',
fontsize: 10
},
data : ['4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日']
}
],
yaxis : [
{
name: '单位:万条',
type: 'value',
nametextstyle: {
color: '#ffffff',
fontsize: 10,
padding: [0, 0, 0, 0]
},
axisline: { // y轴
show: false
},
axistick: { // y轴刻度
show: false
},
axislabel: { // y轴文字
color: '#ffffff',
fontsize: 10
},
splitline: { // y轴分割线
linestyle: {
color: '#606970'
}
},
splitnumber: 5, // 总分隔线条数
interval: 25 // 强制分隔单位
}
],
series : [
{
name:'数据接入增量',
type:'line',
stack: '总量',
itemstyle: {
color: '#5dd9da'
},
linestyle: {
color: '#5dd9da',
width: 0.5
},
areastyle: { // 颜色自上而下渐变
color: new echarts.graphic.lineargradient(0, 0, 0, 1, [{ // 1代表上面
offset: 0,
color: '#3399fb'
}, {
offset: 1,
color: '#3399cd'
}]),
opacity: 1 // 填充区域透明度
},
data:[0, 25, 50, 75, 100, 0, 25, 50, 75, 100, 0, 25]
}
]
};
linechart.setoption(lineoption);

echarts折线图上下颜色渐变样式