1. 引入js
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/echarts.min.js"></script>
2. 准备容器
<body>
<div class="ech_line"></div>
</body>
3. 设置容器style
<style>
.ech_line {
width: 700px;
height: 500px;
margin: 20px auto;
background-color: gainsboro;
}
</style>
4. 画图
注意:data的格式为json,例如data=[['2022-04', 2358], ['2022-03', 2340]]
<script>
function ech_line() {
var ech = echarts.init(document.querySelector(".ech_line"))
data = [['2022-04', 2358], ['2022-03', 2340], ['2022-02', 1685], ['2022-01', 750], ['2021-12', 1033], ['2021-11', 1002], ['2021-10', 1103], ['2021-09', 1107], ['2021-08', 823], ['2021-07', 715]]
data = data.reverse()
ech.setOption(option = {
title: {
text: '折线图不同颜色显示不同分段',
top: '2%',
left: '3%',
textStyle: {
fontSize: 20,
fontWeight: 400,
color: '#00B0FF'
}
},
tooltip: {
trigger: 'axis',
extraCssText: 'width:150px;height:auto;background-color:rgba(0,0,0,0.3);color:#fff',
formatter: function (params) {
let str = params[0].name + '<br/>'
for (let item of params) {
str += "<span style='display:inline-block;width:10px;height:10px;border-radius:10px;background-color:" + item.color + ";'></span>" + "\t" + item.seriesName + " : " + item.value
}
return str
},
},
xAxis: {
data: data.map(function (item) {
return item[0];
})
},
yAxis: {
show: true,
axisLine: {
show: true,
symbol: [