首页 > 代码库 > echarts 动态生成多条折线图和动态获得x轴并于数字相对应
echarts 动态生成多条折线图和动态获得x轴并于数字相对应
function drawZXT(id, data) {
myChart = echarts.init(document.getElementById(id));
option = {
title: {
text: ‘流量计折线图‘,
//subtext: ‘纯属虚构‘
},
tooltip: {
trigger: ‘axis‘,
axisPointer: {
show: true,
type: ‘cross‘,
lineStyle: {
type: ‘dashed‘,
width: 1
}
},
formatter: function(params) {
var value=http://www.mamicode.com/formatDate(params.value[0])
return params.seriesName + ‘ : [ ‘ +
value + ‘, ‘ +
params.value[1] + ‘ ]‘;
}
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataZoom: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: [‘line‘, ‘bar‘]
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: ‘time‘,//定义x轴的显示形式有1、categor(类目) 2、time(时间) 3、value(数值)
//
// }
}],
yAxis: [{
type: ‘value‘,
axisLine: {
lineStyle: {
color: ‘#dc143c‘
}
}
}],
series: functionNodname(data)//引入方法创建折线
};
myChart.setOption(option);
}
//动态创建折线对象
function functionNodname(data) {
var series = []
for(var p = 0; p < data.length; p++) {
var xyData = http://www.mamicode.com/[];
var arr = data[p].data;
var nameArr = [];
arr.sort(function(a, b) {
if(a.num === b.num) {
return new Date(b.createTime) - new Date(a.createTime)
} else {
return b.num - a.num;
}
});
for(var o = 0; arr.length > o; o++) {
var coordinate = [];
nameArr.push(arr[o].flowmetername)
coordinate.push(arr[o].createTime);
coordinate.push(arr[o].value);
xyData.push(coordinate)
xyData.push(coordinate)
}
var item = {
name: data[p].name,
type: ‘line‘,
data: xyData
}
series.push(item)
}
return series;
}
本文出自 “12933278” 博客,谢绝转载!
echarts 动态生成多条折线图和动态获得x轴并于数字相对应