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

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

前端时常会遇到这样的问题,有一个单独的模块用作统计图,将多个折线或者柱状图,混合使用,下面的例子是用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":[]
}
相关文章
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
36 0
|
1月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
52 1
|
26天前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
18 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
1月前
|
XML JSON 前端开发
教你怎么用ajax传数组(也可以是转为json)
教你怎么用ajax传数组(也可以是转为json)
18 0
|
3月前
|
JSON 数据格式
Echarts统计图x轴实现拉伸滑动
Echarts统计图x轴实现拉伸滑动
28 1
|
3月前
|
JSON 前端开发 数据格式
ztree+ajax+json请求,实现加载一棵ztree树
ztree+ajax+json请求,实现加载一棵ztree树
28 0
ztree+ajax+json请求,实现加载一棵ztree树
|
3月前
|
JSON 数据格式
Echarts+ajax实现一个简单折线图
Echarts+ajax实现一个简单折线图
27 0
|
3月前
|
JSON 前端开发 数据格式
Echarts+ajax实现多条折线图
Echarts+ajax实现多条折线图
30 0
|
3月前
|
JSON 数据格式
Echarts统计图标题居中显示
Echarts统计图标题居中显示
18 0
|
3月前
|
JSON 数据格式
Echarts+ajax实现叠堆柱状图
Echarts+ajax实现叠堆柱状图
24 0

相关产品

  • 云迁移中心