设置Echarts折线图⾃定义属性
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,
},
{
rotate属性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']

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。