echarts 画折线图

2018-07-03 本文已影响45人爱熬夜的疯子

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>

小伙伴们，直接粘贴复制。是不是很爽

echarts 画折线图

猜你喜欢

热点阅读