var option = {
backgroundColor: '#FFF0F5',
title: {
text: '折线图',
subtext: '模拟数据',
x: 'center'
},
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'horizontal',
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'left',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'top',
data: ['expected', 'actual']
},
// 图表距边框的距离，可选值：'百分比' || 数值（单位px）
grid: {
top: 10,
left: 10,
right: 10,
bottom: 20,
top: 30,
containLabel: true,
},
// 提示框，悬浮点
tooltip: {
trigger: 'axis',
//当鼠标移动到数值时候，在X轴Y轴显示数值
axisPointer: {
type: 'cross'
},
},
//工具框，可以选择
toolbox: {
feature: {
saveAsImage: {} //下载工具
}
},
xAxis: {
//网格样式
splitLine: {
show: true,
lineStyle:{
color: ['#fff'],
width: 1,
type: 'solid'
}
},
//x轴颜色
axisLine:{
lineStyle:{
color: ['#fff'],
width: 1,
type: 'solid'
}
},
// 设置X轴数据旋转倾斜
axisLabel: {
rotate: 30, // 旋转角度
interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
color: "#ff0" //刻度线标签颜色
},
// boundaryGap值为false的时候，折线第一个点在y轴上
boundaryGap: false,
data: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
},
yAxis: {
name: '数值',
type: 'value',
min:0, // 设置y轴刻度的最小值
max:1800, // 设置y轴刻度的最大值
splitNumber:9, // 设置y轴刻度间隔个数
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#fff'
}
},
},
series: [
{
name: 'expected', itemStyle: {
normal: {
color: '#FF005A',
lineStyle: {
color: '#fff',//线条颜色
width: 2
}
}
},
data: [820, 932, 301, 1434, 1290, 1330, 1320],
itemStyle : {//每个坐标点圆点颜色
normal : {
color:'red',//圆点外圈颜色
lineStyle:{
color:'#fff'
}
}
},
type: 'line',
// 设置小圆点消失
// 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
symbol: 'none',
// 设置折线弧度，取值：0-1之间
smooth: 0.5,
},
{
name: 'actual',
data: [620, 732, 941, 834, 1690, 1030, 920],
type: 'line',
// 设置折线上圆点大小
symbolSize:8,
itemStyle:{
normal:{
// 拐点上显示数值
label : {
show: true
},
borderColor:'red', // 拐点边框颜色
lineStyle:{
width:5, // 设置线宽
type:'dotted' //'dotted'虚线 'solid'实线
}
}
}
},
],
color: ['#00EE00', '#FF9F7F']
