文章目录
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. 画图
<script>
function ech_line() {
//echarts 初始化实例
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()
// setOption
ech.setOption(option = {
title: {
text: '折线图不同颜色显示不同分段',
top: '2%',
left: '3%',
textStyle: {
fontSize: 20,
fontWeight: 400,
color: '#00B0FF'
}
},
tooltip: {
trigger: 'axis',
// 设置浮层的 css 样式
extraCssText: 'width:150px;height:auto;background-color:rgba(0,0,0,0.3);color:#fff',
formatter: function (params) {
// x轴数据
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: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#6E7079', // 坐标轴线线的颜色
width: '1', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
splitLine: {
show: false
}
},
toolbox: {
//距离x轴的距离
x: '75%',
y: '2%',
itemSize: 15,
itemGap: 5,
show: true,
iconStyle: {
borderColor: '#757575'
},
feature: {
// 数据视图
dataView: {
show: true,
readOnly: false
},
// 转换为折线图
magicType: {
show: true,
type: ['line', 'bar']
},
// 刷新
restore: {
show: true
},
// 保存图片
saveAsImage: {
show: true
},
}
},
dataZoom: [{
startValue: '2020-04'
}, {
type: 'inside'
}],
visualMap: {
top: '10%',
left: 'center',
// right: '2%',
orient: 'horizontal',
itemWidth: 10,
itemHeight: 20,
// right: 'right',
textStyle: {
color: '#000'
},
pieces: [{
gt: 500,
lte: 1000,
color: '#096'
}, {
gt: 1000,
lte: 1500,
color: '#f8e357'
}, {
gt: 1500,
lte: 2000,
color: '#ff9933'
}, {
gt: 2000,
lte: 2500,
color: '#cc0033'
}, {
gt: 2500,
lte: 3000,
color: '#660099'
}],
outOfRange: {
color: '#999'
}
},
grid: {
top: "20%",
left: '2%',
right: '10%',
bottom: '10%',
containLabel: true
},
series: {
name: '数量',
type: 'line',
smooth: true,
data: data.map(function (item) {
return item[1];
}),
markLine: {
silent: true,
data: [{
yAxis: 500
}, {
yAxis: 1000
}, {
yAxis: 1500
}, {
yAxis: 2000
}, {
yAxis: 2500
}, {
yAxis: 3000
}]
}
}
});
}
ech_line()
</script>
结果如下图所示：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.ech_line {
width: 700px;
height: 500px;
margin: 20px auto;
background-color: gainsboro;
}
</style>
<body>
<div class="ech_line"></div>
</body>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/echarts.min.js"></script>
<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()
// console.log(data)
ech.setOption(option = {
title: {
text: '折线图不同颜色显示不同分段',
top: '2%',
left: '3%',
textStyle: {
fontSize: 20,
fontWeight: 400,
color: '#00B0FF'
}
},
tooltip: {
trigger: 'axis',
// 设置浮层的 css 样式
extraCssText: 'width:150px;height:auto;background-color:rgba(0,0,0,0.3);color:#fff',
formatter: function (params) {
// x轴数据
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: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 15], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#6E7079', // 坐标轴线线的颜色
width: '1', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
},
},
splitLine: {
show: false
}
},
toolbox: {
//距离x轴的距离
x: '75%',
y: '2%',
itemSize: 15,
itemGap: 5,
show: true,
iconStyle: {
borderColor: '#757575'
},
feature: {
// 数据视图
dataView: {
show: true,
readOnly: false
},
// 转换为折线图
magicType: {
show: true,
type: ['line', 'bar']
},
// 刷新
restore: {
show: true
},
// 保存图片
saveAsImage: {
show: true
},
}
},
dataZoom: [{
startValue: '2020-04'
}, {
type: 'inside'
}],
visualMap: {
top: '10%',
left: 'center',
// right: '2%',
orient: 'horizontal',
itemWidth: 10,
itemHeight: 20,
// right: 'right',
textStyle: {
color: '#000'
},
pieces: [{
gt: 500,
lte: 1000,
color: '#096'
}, {
gt: 1000,
lte: 1500,
color: '#f8e357'
}, {
gt: 1500,
lte: 2000,
color: '#ff9933'
}, {
gt: 2000,
lte: 2500,
color: '#cc0033'
}, {
gt: 2500,
lte: 3000,
color: '#660099'
}],
outOfRange: {
color: '#999'
}
},
grid: {
top: "20%",
left: '2%',
right: '10%',
bottom: '10%',
containLabel: true
},
series: {
name: '数量',
type: 'line',
smooth: true,
data: data.map(function (item) {
return item[1];
}),
markLine: {
silent: true,
data: [{
yAxis: 500
}, {
yAxis: 1000
}, {
yAxis: 1500
}, {
yAxis: 2000
}, {
yAxis: 2500
}, {
yAxis: 3000
}]
}
}
});
}
ech_line()
</script>
</html>
感谢观看，希望对你有所帮助！