您的位置：首页 > 其它
echarts显示图表

2017-08-10 11:15 381 查看
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<select name="select" id="select_k1" class="xla_k">
</select>
<select name="select" id="select_k2" class="xla_k">
</select>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1900px;height:800px;"></div>
<script type="text/javascript">

function iniHeads() {
$.getJSON('statDataHeads.html', function (jsondata) {

var k1 = document.getElementById("select_k1");
k1.options.length = 0;
for (var i = 0; i < jsondata.length; i++) {
k1.options.add(new Option(jsondata[i], jsondata[i]));
}

k1.onchange = function(){

// 更改值后执行的代码
var index = k1.selectedIndex;
var head = k1.options[index].value;

iniIps(head);
}

var head = k1.options[0].value;
iniIps(head);
});
}
iniHeads();

function iniIps(headname) {
$.getJSON('statDataIps.html?head='+headname, function (jsondata) {

var k1 = document.getElementById("select_k1");
var k2 = document.getElementById("select_k2");

k2.options.length = 0;
for (var i = 0; i < jsondata.length; i++) {
k2.options.add(new Option(jsondata[i], jsondata[i]));
}

k2.onchange = function(){

// 更改值后执行的代码
var index = k1.selectedIndex;
var head = k1.options[index].value;

var index2 = k2.selectedIndex;
var ip = k2.options[index2].value;

showdata(head, ip);
}

var index = k1.selectedIndex;
var head = k1.options[index].value;
var ip = k2.options[0].value;
showdata(head, ip);
});
}

// 基于准备好的dom，初始化echarts实例
function showdata(headname, ip) {
$.getJSON('statData.html?head='+headname+'&ip='+ip, function (jsondata) {
var date = [];
for (var i = jsondata.length - 1; i >= 0; i = i - 1) {
date.push(jsondata[i].time);
}

var first = jsondata[0];

var series = [];
for (var key in first.data) {

var name = key;
var data = [];

for (var i = jsondata.length - 1; i >= 1; i = i - 1) {
var value = jsondata[i].data[key];
data.push(value);
}

ser = {
name: name,
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
};

series.push(ser);
}

option = {
title: {
text: '数据'
},
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
dataZoom: [{
type: 'inside',
start: 0,
end: 100
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: series
};

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption(option);

});
};

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航