美文网首页程序员
ajax+json实现echarts多个统计图显示

ajax+json实现echarts多个统计图显示

作者: 祈澈菇凉 | 来源:发表于2019-09-18 15:24 被阅读0次

    前端时常会遇到这样的问题,有一个单独的模块用作统计图,将多个折线或者柱状图,混合使用,下面的例子是用ajax+json模拟了调用接口实现echarts多个统计图显示。
    样式布局暂时就不放在上面了,以下是从项目里面复制过来的一个小的demo,代码仅供参考。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
            <!-- 引入 echarts.js -->
            <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        </head>
        <body>
            <div class="page-container">
                <!-- 统计图模块   -->
                <div class="row">
                    <div class="col-md-12  col-sm-12  col-xs-12">                 
                        <div class="col-md-2  col-sm-2  col-xs-2" style="width: 21%">
                            <div class="charts2">
                                <div id="main1" style="width: 300px;height: 180px;"></div>
                            </div>
                        </div>
      
                        <div class="col-md-5  col-sm-5  col-xs-5" style="width: 39%;">
                            <div class="charts4">
                                <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
                                <div id="main" style="width: 500px; height: 200px;"></div>
                            </div>
                            <div class="charts5">
                                <div id="main2" style="width: 500px; height: 200px;"></div>
                            </div>
                        </div>
                    </div>
    
                    <div class="row">
                        <div class="col-md-12  col-sm-12  col-xs-12 charts6">
                            <div id="main3" style="width: 500px;height: 200px;"></div>
                        </div>
                    </div>
                
                    <div class="col-md-12  col-sm-12  col-xs-12  bottom">
                        <div class="col-md-7  col-sm-7  col-xs-7  charts7">
                            <div id="main4" style=" height: 200px;"></div>
                        </div>
                        <div class="col-md-5  col-sm-5  col-xs-5  charts8">
                            <div id="main5" style="width: 600px; height: 200px;"></div>
                        </div>
                    </div>
                </div>
    
            </div>
    
            <script type="text/javascript">
                $.ajax({
                    url: "test.json",
                    data: {},
                    type: 'GET',
                    success: function(data) {
                        alert(JSON.stringify(data))
                        aFun(data.echatX, data.echatY);
                        bFun(data);
                        cFun(data.echatX, data.echatY);
                        dFun(data.echatX, data.echatY);
                        eFun(data.echatX, data.echatY);
                        fFun(data.echatX, data.echatY);
                    },
                });
    
                // 
                var aChart = echarts.init(document.getElementById('main'));
                function aFun(x_data, y_data) {
                    // 指定图表的配置项和数据
                    aChart.setOption({
                        title: {},
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: { 
                            splitLine: {     show: false   },
                            /* 改变x轴颜色 */
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
                            data: x_data,
                        },
                        yAxis: { 
                            splitLine: {     show: false   },
                            type: 'value',
                            scale: true,
                            name: '心率值',
                            max: 150,
                            min: 0,
                            splitNumber: 5,
                            // 改变y轴颜色
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
                        },
                        series: [{
                            name: '巡检达标率',
                            type: 'bar',
                            // 设置柱状图大小
                            barWidth: 20,
                            // 设置柱状图渐变颜色
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: "#1268f3" // 0% 处的颜色
                                    }, {
                                        offset: 0.6,
                                        color: "#08a4fa" // 60% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: "#01ccfe" // 100% 处的颜色
                                    }], false)
                                }
                            },
                            data: y_data,
                        }]
                    });
                }
                // 
                var bChart = echarts.init(document.getElementById('main1'));
                function bFun(param) {
                    // 指定图表的配置项和数据
                    bChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        series: [{
                            name: '统计人数',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    rich: {
                                        a: {
                                            color: '#999',
                                            lineHeight: 22,
                                            align: 'center'
                                        },
                                        b: {
                                            fontSize: 16,
                                            lineHeight: 33
                                        },
                                    }
                                }
                            },
                            data: [
                                /* { value: 12, name: '管理', itemStyle: { color: '#5f4b9c' } },
                                  { value: 3, name: '炼钢工', itemStyle: { color: '#2e73ba' } },
                                  { value: 4, name: '操作工', itemStyle: { color: '#7aa83a' } },*/
    
                                {
                                    value: param.peopleOutline,
                                    name: '在线',
                                    itemStyle: {
                                        color: '#005eff'
                                    }
                                },
                                { value: param.peopleOnline, name: '离线', itemStyle: { color: '#ff9194' } },
                            ]
                        }]
                    });
                }
    
                // 基于准备好的dom,初始化echarts实例
                var cChart = echarts.init(document.getElementById('main2'));
                function cFun(x_data, y_data) {
                    // 指定图表的配置项和数据
                    cChart.setOption({
                        title: {
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['近七日收益']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: { 
                            splitLine: {     show: false   },
                            // 改变x轴颜色
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
                            type: 'category',
                            boundaryGap: false,
                            data: x_data,
                        },
                        yAxis: { 
                            splitLine: {     show: false   },
                            type: 'value',
                            scale: true,
                            name: '心率值',
                            max: 150,
                            min: 0,
                            splitNumber: 5,
                            // 改变y轴颜色
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
                        },
                        series: [
                            {
                                name: '',
                                type: 'line',
                                symbol: 'circle', // 折线点设置为实心点
                                symbolSize: 6, // 折线点的大小
                                itemStyle: {
                                    normal: {
                                        color: "#1bdaf8", // 折线点的颜色
                                        lineStyle: {
                                            color: "#0d427e" // 折线的颜色
                                        }
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "#0e4b7a" // 0% 处的颜色
                                        }, {
                                            offset: 0.6,
                                            color: "#0d3f70" // 60% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: "#0c3367" // 100% 处的颜色
                                        }], false)
                                    }
                                },
                                stack: '总量',
                                data: y_data
                            }
                        ]
                    });
                }
                
                // 基于准备好的dom,初始化echarts实例
                var dChart = echarts.init(document.getElementById('main3'));
                // 指定图表的配置项和数据
                function dFun(x_data, y_data) {
                    dChart.setOption({
                        title: {
                            left: 'left',
                            text: '概率',
                            show: false
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{a}:{c}',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        grid: {
                            show: false,
                            top: '30',
                            bottom: '60',
                            right: '60',
                            left: '60'
                        },
                        legend: {
                            show: true,
                            selectedMode: 'single', // 设置显示单一图例的图形,点击可切换
                            bottom: 10,
                            left: 50,
                            textStyle: {
                                color: '#666',
                                fontSize: 12
                            },
                            itemGap: 20,
                            data: ['设备一', '设备二', '设备三'],
                            inactiveColor: '#ccc'
                        },
                        xAxis: {
                            splitLine: {     show: false   },
                            type: 'category',
                            data: x_data,
                            axisPointer: {
                                type: 'shadow'
                            },
                            // 改变x轴颜色
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
                            axisTick: {
                                show: true,
                                interval: 0
                            },
                        },
                        // 设置两个y轴,左边显示数量,右边显示概率
                        yAxis: [{
                                splitLine: {     show: false   },
                                type: 'value',
                                name: '数量',
                                max: 1000,
                                min: 0,
                                show: true,
                                interval: 500,
                                // 改变y轴颜色
                                axisLine: {
                                    lineStyle: {
                                        color: '#00a2e2',
                                        width: 1, // 这里是为了突出显示加上的
                                    }
                                },
                        },
                            // 右边显示概率
                            {
                                splitLine: {     show: false   },
                                type: 'value',
                                name: '概率',
                                min: 0,
                                max: 100,
                                interval: 10,
                                // 改变y轴颜色
                                axisLine: {
                                    lineStyle: {
                                        color: '#00a2e2',
                                        width: 1, // 这里是为了突出显示加上的
                                    }
                                },
                                axisLabel: {
                                    formatter: '{value} %'
                                }
                            }
    
                        ],
                        // 每个设备分数量、概率2个指标,只要让他们的name一致,即可通过,legeng进行统一的切换
                        series: [{
                                name: '设备一',
                                type: 'bar',
                                symbol: 'circle', // 折线点设置为实心点
                                symbolSize: 6, // 折线点的大小
                                itemStyle: {
                                    normal: {
                                        color: "#1bdaf8", // 折线点的颜色
                                        lineStyle: {
                                            color: "#0d427e" // 折线的颜色
                                        }
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "#0e4b7a" // 0% 处的颜色
                                        }, {
                                            offset: 0.6,
                                            color: "#0d3f70" // 60% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: "#0c3367" // 100% 处的颜色
                                        }], false)
                                    }
                                },
                                data: y_data,
                                barWidth: '50%',
                            },
                            {
                                name: '设备一',
                                type: 'line',
                                symbol: 'circle', // 折线点设置为实心点
                                symbolSize: 6, // 折线点的大小
                                itemStyle: {
                                    normal: {
                                        color: "#1bdaf8", // 折线点的颜色
                                        lineStyle: {
                                            color: "#0d427e" // 折线的颜色
                                        }
                                    }
                                },
                                yAxisIndex: 1, // 这里要设置哪个y轴,默认是最左边的是0,然后1,2顺序来。
                                data: y_data,
                                symbolSize: 10,
                                itemStyle: {
                                    normal: {
                                        color: "#DDA0DD"
                                    }
                                }
                            },
                        ]
                    });
                }
                // 基于准备好的dom,初始化echarts实例
                var eChart = echarts.init(document.getElementById('main4'));
                // 指定图表的配置项和数据
                function eFun(x_data, y_data) {
                    eChart.setOption({
                        title: {
                            text: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['近七日收益']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: { 
                            splitLine: {     show: false   },
                            // 改变x轴颜色
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
                            type: 'category',
                            boundaryGap: false,
                            data: x_data,
                        },
                        yAxis: { 
                            splitLine: {     show: false   },
                            type: 'value',
                            scale: true,
                            name: '心率值',
                            max: 150,
                            min: 0,
                            splitNumber: 10,
                            // 改变y轴颜色
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
                        },
                        series: [
                            {
                                name: '近七日收益',
                                type: 'line',
                                symbol: 'circle', // 折线点设置为实心点
                                symbolSize: 6, // 折线点的大小
                                itemStyle: {
                                    normal: {
                                        color: "#1bdaf8", // 折线点的颜色
                                        lineStyle: {
                                            color: "#0d427e" // 折线的颜色
                                        }
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "#0e4b7a" // 0% 处的颜色
                                        }, {
                                            offset: 0.6,
                                            color: "#0d3f70" // 60% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: "#0c3367" // 100% 处的颜色
                                        }], false)
                                    }
                                },
                                stack: '总量',
                                data: y_data,
                            }
                        ]
                    });
                }
    
                var fChart = echarts.init(document.getElementById('main5'));
                // 指定图表的配置项和数据
                function fFun(x_data, y_data) {
                    fChart.setOption({
                        title: {
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: { 
                            splitLine: {     show: false   },
                            // 改变x轴颜色
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
    
                            data: x_data,
                        },
                        yAxis: { 
                            splitLine: {     show: false   },
    
                            type: 'value',
                            scale: true,
                            name: '心率值',
                            max: 150,
                            min: 0,
                            splitNumber: 10,
                            // 改变y轴颜色
                            axisLine: {
                                lineStyle: {
                                    color: '#00a2e2',
                                    width: 1, // 这里是为了突出显示加上的
                                }
                            },
                        },
                        series: [{
                            name: '巡检达标率',
                            type: 'bar',
                            // 设置柱状图大小
                            barWidth: 20,
                            // 设置柱状图渐变颜色
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                        offset: 0,
                                        color: "#e12251" // 0% 处的颜色
                                    }, {
                                        offset: 0.6,
                                        color: "#df635a" // 60% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: "#e79363" // 100% 处的颜色
                                    }], false)
                                }
                            },
                            data: y_data,
                        }]
                    });
    
                }
            </script>
        </body>
    </html>
    
    

    test.json

    {
        "echatX": [
            "2019-07-02",
            "2019-07-03",
            "2019-07-04",
            "2019-07-05",
            "2019-07-06",
            "2019-07-07",
            "2019-07-08",
            "2019-07-09",
            "2019-07-10",
            "2019-07-11",
            "2019-07-12",
            "2019-07-13",
            "2019-07-14",
            "2019-07-15"
        ],
        "echatY": [
            501,210,123,333,445,157,151,369,101,101,350,435,153,100
        ],
        "echatY2": [
          80,40,13,36,57,77,41,39,61,31,60,73,33,50
        ],
        "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
    }
    
    

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
    欢迎关注【编程微刊】公众号,回复【领取资源】,500G编程学习资源干货免费送。

    相关文章

      网友评论

        本文标题:ajax+json实现echarts多个统计图显示

        本文链接:https://www.haomeiwen.com/subject/pttfuctx.html