echarts特别容易上手：直接官网download例子，改一改，基本上就能实现我们想要的功能。
可是为什么要求我计算总值呢？
-
目标：
使用echarts画一个折线图，
折线图包括：前几个月的销售情况，每个月的销售情况不同分类的总和(不包括特殊部门) -
遇到的问题：
总和需要实时计算，百度出来全是计时器，真的很耗性能
2条一模一样的数据，后面的数据居然比前面的数据多了一倍
1.jpg
-
解决方案：
先看我写的代码：我发誓我是直接在官网当下来，修改了一下数据而已。
但是官网的例子里面没有写出：stack是数据堆叠的意思。直接去掉stack就好
2.jpg
最后给出完整的代码：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var totalArr = []; //总和
option = null;
option = {
title: {
text: '销售案件统计'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['销售一部', '销售二部', '销售三部', '特殊部门', '总和']
},
grid: {
left: '3%',
right: '4%',
bottom: '8%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2018.01', '2018.02', '2018.03', '2018.04', '2018.05', '2018.06']
},
yAxis: {
type: 'value'
},
dataZoom: {
show: true,
realtime: true,
start: 70,
end: 100
},
series: [
{
name: '销售一部',
type: 'line',
data: [100,300,200,100,500,300,2,32,2,323,23,23,32,12,21]
},
{
name: '销售二部',
type: 'line',
data: [121, 205, 160, 145, 375, 375,2,32,2,323,23,23,32,12,21]
},
{
name: '销售三部',
type: 'line',
data: [29, 22, 30, 273, 426, 494,2,32,2,323,23,23,32,12,21]
},
{
name: '特殊部门',
type: 'line',
data: [109, 78, 107, 84, 90, 19,2,32,2,323,23,23,32,12,21]
}
,
{
name: '总和',
type: 'line',
stack: '总量',
data: totalArr
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
;
//计算总和 不包括特殊部门
for (var j = 0; j < option.series[0].data.length; j++) {
var smNum = 0;
for (var i = 0; i < option.series.length - 2; i++) {
if (!option.series[i].data[j]) {
option.series[i].data[j] = 0
}
smNum = smNum + option.series[i].data[j]
}
totalArr.push(smNum)
}
;
myChart.on('legendselectchanged', function (params) {
console.log(params)
totalArr = [];
for (var j = 0; j < option.series[0].data.length; j++) {
var smNum = 0;
var status = 0;
for (var i = 0; i < option.series.length - 2; i++) {
//判断如果 销售一部或者 任何一项不是selected，那么就不能加上他
if (params.selected[option.series[i].name]) {
status ++;
smNum = smNum + option.series[i].data[j]
}
smNum = smNum + option.series[i].data[j]
}
totalArr.push(smNum)
}
myChart.setOption({
series: [{
// 根据名字对应到相应的系列
name: '总和',
type: 'line',
data: totalArr
}]
});
})
;
</script>
</body>
</html>
小伙伴们，直接粘贴复制。是不是很爽
网友评论