簡單的東西，直接上代碼，不多解釋，感覺碼字比碼代碼要累多了《@中國人叔叔-lt》
<!DOCTYPE>
/**
* (C) Copyright 2017-2027, by liting.
* Project Info: liting
*
* @author liting
* Time:2017/12/6 15:42
* @version 1.0
* @see
*/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>曲線圖</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>
<style>
/*圖例的樣式*/
.legend-class {
position: absolute;
left: 100px;
top: 0px;
max-width: 1040px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.legend-class ul {
text-align: center;
list-style-type: none;
margin-left: 10px;
padding: 0px;
display: inline-block;
}
.legend-class ul li {
display: block;
float: none;
margin: auto;
width: 30px;
height: 20px;
border: 1px solid #ff9fe6;
}
.legend-class ul li:hover {
border: 1px solid #f1d3d3;
}
.legend-class ul span {
margin-left: 0px;
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
//圖例線條顏色，按順序來，不夠需要添加
var gar_colors = ['#CC6666', '#FFA026', '#FF0200', '#666633', '#FF00CC', '#CC6633', '#9933FF', '#CC33CC', '#33CCFF', '#003399', '#9999FF', '#FFCC00', '#CC99FF', '#FF3300', '#3333FF', '#339900', '#FF9900'];
var gobj_chart;
//數據
var datas = '[{"name":"這是第一條線","aitds": "16408","datas": [[1,2],[2,3],[3,5],[4,15],[5,10]]},{"name":"這是第2條線","aitds": "16405","datas": [[1,3],[2,1],[3,4],[4,10],[5,15]]}]';
//頁面加載完成執行
$(function () {
var series = [];
var dataAr = JSON.parse(datas);
var legendStr = "";
for (var i = 0; i < dataAr.length; i++) {
var lineObj = {};
var dataObj = dataAr[i];
lineObj.name = dataObj.name;
lineObj.itemStyle = {normal: {color: gar_colors[i]}};
//用來作爲唯一識別的自定義屬性
lineObj.id = dataObj.aitds;
lineObj.type = "line";
lineObj.data = dataObj.datas;
lineObj.markPoint = {data: [{type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}]};
series.push(lineObj);
//組織自定義圖例
legendStr += "<ul title='" + lineObj.name + "' onmouseover='highLightData(\"" + lineObj.id + "\",\"#f1394e\");' onmouseout='highLightData(\"" + lineObj.id + "\",\"" + gar_colors[i] + "\");' onclick='refreshData(\"" + lineObj.id + "\")'>";
legendStr += "<li style='background: " + gar_colors[i] + ";' ></li>"
legendStr += "<span style='display: block'>" + lineObj.name + "</span>"
legendStr += "</ul>";
}
//自定義legend 圖例
$("#legend_div").html(legendStr);
//數據組織
var option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
calculable: true,
xAxis : [
{
type : '',
splitNumber:5
}
],
yAxis : [
{
type : 'value'
}
],
series: series
};
var charHtmlObj = document.getElementById('mainA');
//初始化echarts
gobj_chart = echarts.init(charHtmlObj);
gobj_chart.setOption(option);
});
//修改markPoint大小，從而做到顯示隱藏
function refreshData(paName) {
//alert(paName);
//更新數據
var option = gobj_chart.getOption();
for (var i = 0; i < option.series.length; i++) {
//alert(option.series[i].id);
if (option.series[i].id == paName) {
for (var j = 0; j < option.series[i].markPoint.data.length; j++) {
if (option.series[i].markPoint.data[j].symbolSize == 0) option.series[i].markPoint.data[j].symbolSize = 50;
else option.series[i].markPoint.data[j].symbolSize = 0;
}
}
}
gobj_chart.setOption(option);
}
//修改markPoint大小，從而做到顯示隱藏
function highLightData(paName, paColor) {
//更新數據
var option = gobj_chart.getOption();
for (var i = 0; i < option.series.length; i++) {
if (option.series[i].id == paName) {
option.series[i].itemStyle.normal.color = paColor;
}
}
gobj_chart.setOption(option);
}
</script>
</head>
<body>
<!--圖例-->
<div id="legend_div" class="legend-class" style="z-index: 10000">
</div>
<!--線圖-->
<div id="mainA" style="width: 1040px;height:400px;"></div>
</body>
</html>