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>
小伙伴們，直接粘貼復制。是不是很爽
