<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echart.js绘制可缩放折线图
</title>
<script src="../js/esl.js"></script>
<script>
var json = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60], ["2000-07-25", 44], ["2000-07-26", 127], ["2000-07-27", 114], ["2000-07-28", 86], ["2000-07-29", 73], ["2000-07-30", 52]];
</script>
</head>
<body>
<div id="picturePlace" style="height: 400px;"></div>
<script type="text/javascript">
require.config({
paths: {
'echarts': '../js/echarts.min',
}
});
require(
[
'echarts',
],
function (ec) {
var myChart = ec.init(document.getElementById('picturePlace'));
myChart.setOption(option = {
title: {
text: '车流量'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: json.map(function (item) {
return item[0];
})
},
yAxis: {
splitLine: {
show: false
}
},
toolbox: {
left: 'center',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [{
startValue: '2014-06-01'
}, {
type: 'inside'
}],
visualMap: {
top: 10,
right: 10,
pieces: [{
gt: 0,
lte: 50,
color: '#096'
}, {
gt: 50,
lte: 150,
color: '#ffde33'
}, {
gt: 100,
lte: 250,
color: '#ff9933'
}, {
gt: 150,
lte: 350,
color: '#cc0033'
}, {
gt: 200,
lte: 450,
color: '#660099'
}, {
gt: 300,
color: '#7e0023'
}],
outOfRange: {
color: '#999'
}
},
series: {
name: '车流量',
type: 'line',
data: json.map(function (item) {
return item[1];
}),
markLine: {
silent: true,
data: [{
yAxis: 50
}, {
yAxis: 150
}, {
yAxis: 250
}, {
yAxis: 350
}, {
yAxis: 450
}]
}
}
});
}
);
</script>
</body>
</html>
效果图如下：
代码下载地址：https://github.com/Jinx009/WebTestFils 自行找注释找到相应的代码文件 下载地址：http://download.csdn.net/detail/wow4464/9775067
转载请注明原文地址: https://ju.6miu.com/read-9357.html
