一个使用echarts制作折线图的简单案例，常用修改都写在注释里了。如果不需要区域颜色，将其删掉即可。
option = {
title: {
text: ‘堆叠区域图’ // 标题栏
},
tooltip: { // 提示框
trigger: ‘axis’, // 触发类型
axisPointer: { // 坐标轴指示器配置项
type: ‘cross’,
label: {
backgroundColor: ‘#6a7985’
}
}
},
legend: { // 图例组件
orient: ‘horizontal’, // 图例列表的布局朝向
right: 1, // 图例组件离容器右侧的距离
textStyle: {
color: ‘#6e6e6e’, // 字体颜色
fontWeight: ‘normal’,
fontSize: 12
},
data: [‘邮件营销’] // 和series 中的name对应
},
grid: { // 直角坐标系内绘图网格
left: ‘3%’,
top: ‘15%’,
containLabel: true
},
xAxis: [{
type: ‘category’,
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: ‘#8a94a3’ // 坐标字体颜色
},
rotate: 20 // 坐标倾斜角度
},
axisLine: {
lineStyle: {
color: ‘#bdc7da’, // x坐标轴颜色
}
},
data: [’06-22′, ’06-22′, ’06-22′, ’06-22′, ’06-22′, ’06-22′, ’06-22′]
}],
yAxis: {
type: ‘value’,
axisLine: { //坐标轴线条相关设置(颜色等)
lineStyle: {
color: ‘#babced’ // y轴颜色
}
},
axisLabel: {
formatter: ‘{value}’,
textStyle: {
color: ‘#babced’
}
},
splitLine: {
lineStyle: {
color: ‘#57617B’ //分隔线颜色设置
}
}
},
series: [{
name: ‘邮件营销’,
type: ‘line’,
symbol: ‘circle’, //标记的图形
symbolSize: 10, // 拐点的大小
label: {
normal: {
show: true,
color: ‘#4a9eff’, // 数字颜色
position: ‘top’
}
},
itemStyle: {
normal: {
borderColor: ‘red’, // 边框颜色
color: ‘#fafafa’, // 折线上标记点的颜色 和 图例的颜色
lineStyle: {
width: 4, // 折线图的粗细
color: ‘#4a9eff’ // 折线的颜色
}
}
},
areaStyle: {
normal: {
type: ‘default’,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘#4a9eff’ // 区域颜色
}, {
offset: 1,
color: ‘#4a9eff’ // 区域颜色
}], false)
}
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}]
};
效果图如下：
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/219933.html原文链接：https://javaforall.net
