图1 图2
let option = { // 配置项
title: {
text: '如厕检测(次)',
textStyle: {
color: '#fff' // 标题字体颜色,类似还有fontSize: 10等等(采用驼峰式)
}
},
// tooltip: {
// trigger: 'item',
// formatter: "{a} <br/>{b} : {c} 次"
// },
tooltip: { // 鼠标放上去出现相对应的数据
trigger: 'axis' // item单独一个显示,axis全部显示(多个折线)
},
grid: { // 图和上下左右之间的距离
left: '4%',
right: '8%',
top: '30%',
bottom: '16%',
containLabel: true // 防止显示不全面
},
legend: { // 声明那一块是那一部分
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data: this.legendArrO // 表头数据
},
xAxis: { // x轴坐标设置
type: 'category',
// data: ['2019-0-6', '2019-07-21', '2019-07-22', '2019-07-23', '2019-07-24', '2019-07-25', '2019-07-26'],
data: this.xAxisArrO, // x轴数据
// boundaryGap: false, // 曲线,false从0开始,true非0开始,默认true
axisLine: {
lineStyle: {
color: '#162346' // x轴坐标横线颜色
}
},
axisLabel: {
color: '#4F648C', // x轴坐标文字颜色
interval: 0, //该属性设置成0则表示强制显示所有标签,设置为1的话,隔一个标签显示一个标签,以此类推。
rotate: 45 //rotate表示倾斜显示,-是顺时针旋转多少度,+或不写表示逆时针旋转多少度,默认值为90
}
},
yAxis: { // y轴坐标设置(自动生成不用设置y轴值,要设置得定义一个data)
type: 'value',
splitNumber: 2, //横线数轴多少条
axisLine: {
lineStyle: {
color: '#162346' // y轴坐标横线颜色
}
},
axisLabel: {
color: '#4F648C' // y轴坐标文字颜色
}
},
series: [{
data: this.seriesArrO, // x轴数据
// data: ['20', '32', '1', '23', '1', '10', '10'],
type: 'line',
smooth: true, // 折线点是否圆形
symbolSize: 7, // 折线点圆形的大小
label: { // 折线图上曲线的值
normal: {
show: true,
position: 'top', // 显示的值标在上面
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: '#218FFE'
}
},
markPoint: { // 显示最大值和最小值
data: [{
name: '最大值',
type: 'max'
},{
name: '最小值',
type: 'min'
}]
},
areaStyle: { // 折线下面颜色区域(渐变效果)
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 折线往下渐变
offset: 0, // 设置为1如图二(下面一个可去掉)
color: '#1E75D5'
}, {
offset: 1,
color: 'rgba(0, 0, 0, 0)'
}], false), // false 显示,true不显示。默认显示
opacity: 0.8
}
}
}]
}
echarts.init(document.getElementById('lifeOne')).setOption(option) // 初始化
参数data一般都是图表的数据部分