<!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>
<script src="./echarts.min1.js"></script>
<script src="./dayjs.min.js"></script>
</head>
<style>
#main {
width: 600px;
height: 400px;
border: 1px solid #aaa;
}
</style>
<body>
<div id="myChart" style="width: 100%;height: 500px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'));
var data1 = [
[5, 12],
[7, 5],
[9, null],
[11, 32],
[12, 14],
[15, null],
[16, 12],
[18, 47],
[20, 42],
[24, 44],
[26, 24],
[30, null]
];
var data2 = [
[8, 5],
[9, 15],
[11, 19],
[13, 62],
[15, 31],
[17, 48],
[18, null],
[19, null],
[20, 34],
[24, 54],
[26, 14],
[30, 52]
];
var data3 = [
[5, 5],
[9, 25],
[12, 9],
[13, 62],
[14, 36],
[16, 28],
[18, null],
[19, 15],
[23, 54],
[24, 14],
[29, 34],
[30, 22]
];
var option = {
color: ["blue", "red",'yellow'],
tooltip: {
trigger: 'axis'
},
legend: {
data: ['变压器', '断路器', '短路器'],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'value',
boundaryGap: false,
data: []
},
yAxis: {
nameTextStyle: {
fontSize: 16,
},
triggerEvent: true
},
markLine: {
label: {
show: true
}
},
series: [
{
name: '变压器',
type: 'line',
data: data1,
},
{
name: '断路器',
type: 'line',
data: data2,
},
{
name: '短路器',
type: 'line',
data: data3,
}
],
dataZoom: [
{
show: true,
type: 'inside',
xAxisIndex: [0],
filterMode: 'none',
},
{
type: 'inside',
show: true,
yAxisIndex: [0],
filterMode: 'none',
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.getZr().on('click', 'series.line', function (params) {
const pointInPixel = [params.offsetX, params.offsetY];
const { target, topTarget } = params;
if (target && topTarget && topTarget.z === 3) {
// 组件的索引
let index = topTarget.parent.parent.__ecComponentInfo.index;
var option = myChart.getOption();
console.log(index);
console.log(option.legend[0].data[index]);
}
});
</script>
</body>
</html>
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
