# 效果
# css
* {
margin: 0;
padding: 0;
}
.content {
width: 500px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
}
#main {
width: 100%;
height: 100%;
}
# html
<div class="content"> <div id="main"> </div> </div>
# js
<script src="js/echarts.min.js"></script>
let data = [];
let myChart = null
myChart = echarts.init(document.getElementById('main'));
// 创建数据
createData();
let series = data.map(item => {
let yAxis = item.yAxis.map(item => {
return item;
})
return {
name: item.seriesName,
data: yAxis,
type: 'line',
legendHoverLink: false,
symbolSize: 0,
// itemStyle: {
// color: 'green'
// },
// lineStyle:{
// color:'green'
// },
markLine: {
slient: true,
data: [
{
yAxis: 700
}
]
}
}
})
let pieces = [{
lt: 700,
color: '#ccc'
}, {
gte: 700,
lt: 1500,
color: 'red'
}];
let option = {};
option = {
legend: {
data: data[0]['legendData'],
},
xAxis: {
name: '时间',
data: data[0]['xAxis']
},
yAxis: {
name: '误差'
},
visualMap: {
top: 10,
right: 10,
pieces: pieces,
show: false
},
series: series
}
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize()
})
function createData() {
let xData = [];
let legendData = [];
for (let i = 0; i < 50; i++) {
xData.push('aaa' + i);
}
for (var i = 0; i < 5; i++) {
let yData = [];
for (let j = 0; j < 50; j++) {
let num = Math.floor(Math.random() * (1500 - 100 + 1) + 100) // 向下取整
yData.push(num)
}
legendData.push('aa' + i);
data.push({
xAxis: xData,
yAxis: yData,
legendData: legendData,
seriesName: 'aa' + i
})
}
}
# 核心代码说明
