ECharts 常用统计图

Michelle20180227

ECharts 常用统计图

一、地图

1、代码实现

//地图调用
getDetailsMap("echartsMap", map_qu_name, map_qu_num, "人数", sName);

//地图JS
function getDetailsMap(v_id, map_name, map_num, dw, v_name, ratio) {
    var myChart = echarts.init(document.getElementById(v_id));
    myChart.clear();

    var mapName = [];  //地区名字
    for (var i = 0; i < map_name.length; i++) {
        mapName.push({
            name: map_name[i],
            value: map_num[i],
            label: {
                normal: {
                    show: true,
                    formatter: function (params) {
                        return ratio ? params.name+"\n"+ params.value + "%" : params.name+"\n"+ params.value; //地图上展示文字 + 数值
                    },
                }
            },
            itemStyle: {
                normal: {
                    areaColor: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: \'#073684\' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: \'#061E3D\' // 100% 处的颜色
                        }],
                    },
                    borderColor: \'#4ce2ff\',
                    borderWidth: 1,
                },
                emphasis: {
                    areaColor: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: \'#073684\' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: \'#061E3D\' // 100% 处的颜色
                        }],
                    },
                }
            }
        })
    }

    //若涉及市州下区县展示，需下载相应JSON文件
    var url;
    if(v_name == \'吉林省\'){
        url = \'../../workspace/jy/leaderviewjl/json/jilinnew.json\';
    } else if (v_name == \'2201\') {
        url = \'../../workspace/jy/leaderviewjl/json/changchun.json\';
    } else if (v_name == \'2202\') {
        url = \'../../workspace/jy/leaderviewjl/json/jilinshi.json\';
    } else if (v_name == \'2203\') {
        url = \'../../workspace/jy/leaderviewjl/json/siping.json\';
    } else if (v_name == \'2204\') {
        url = \'../../workspace/jy/leaderviewjl/json/liaoyuan.json\';
    } else if (v_name == \'2205\') {
        url = \'../../workspace/jy/leaderviewjl/json/tonghua.json\';
    } else if (v_name == \'2206\') {
        url = \'../../workspace/jy/leaderviewjl/json/baishan.json\';
    } else if (v_name == \'2207\') {
        url = \'../../workspace/jy/leaderviewjl/json/songyuan.json\';
    } else if (v_name == \'2208\') {
        url = \'../../workspace/jy/leaderviewjl/json/baicheng.json\';
    } else if (v_name == \'2224\') {
        url = \'../../workspace/jy/leaderviewjl/json/yanbian.json\';
    }

    $.get(url, function (geoJson) {
        // myChart.hideLoading();
        echarts.registerMap(\'jilin\', geoJson);

        myChart.setOption(option = {
            tooltip: {
                trigger: \'item\',
                formatter: ratio ? \'{b}<br/>\' + dw + \'：{c}%\' : \'{b}<br/>\' + dw + \'：{c}人\'
            },
            geo: {
                map: \'jilin\',
                zoom: 1.1,
                roam: false,
                itemStyle: {
                    normal: {
                        areaColor: \'#013C62\',
                        shadowColor: \'#182f68\',
                        shadowOffsetX: 0,
                        shadowOffsetY: 25
                    },
                    emphasis: {
                        areaColor: \'#2AB8FF\',
                        borderWidth: 0,
                        color: \'green\',
                        label: {
                            show: false
                        }
                    }
                }
            },
            series: [
                {
                    type: \'map\',
                    roam: false,
                    mapType: \'jilin\',
                    geoIndex: 1,
                    aspectScale: 0.75, //长宽比
                    zoom: 1.1,
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 16,
                                color: \'#fff\',
                                fontFamily: \'cursive\'
                            }
                        },
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle: {
                                fontSize: 22,
                                color: "#fff",
                                fontFamily: \'cursive\'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: \'#2ab8ff\',
                            borderWidth: 1,
                            areaColor: \'#12235c\'
                        },
                        emphasis: {
                            areaColor: \'#2AB8FF\',
                            borderWidth: 2,
                            color: \'green\'
                        }
                    },
                    data: mapName
                }
            ]
        });
    });

    //地图点击事件
    myChart.on(\'click\', function (param) {
        var selected = param.name;
        if (selected) {
            switch (selected) {
                case \'长春市\':
                    break;
                case \'吉林市\':
                    break;
                case \'四平市\':
                    break;
                case \'辽源市\':
                    break;
                case \'通化市\':
                    break;
                case \'白山市\':
                    break;
                case \'松原市\':
                    break;
                case \'白城市\':
                    break;
                case \'延边朝鲜族自治州\':
                    break;
                case selected:
                    break;
            }
        }
    });
}

 

2、地图效果图

　　

 

二、折线图（也可当柱状图-单条）

1、代码实现

//折线图调用
getBarY("chartsLine", "", line_name, line_num, \'line\', \'8%\', \'2.5%\', \'4%\', \'20%\', colorList, false);

//柱状图-单条调用
getBarY("chartsBar", "", line_name, line_num, \'bar\', \'8%\', \'2.5%\', \'4%\', \'20%\', colorList, false);
//折线图JS
function getBarY(v_id, v_title, v_data_name, v_data_cnt, v_type, v_x, v_x2, v_y, v_y2, colorList, isShowZoom) {
    var myChart = echarts.init(document.getElementById(v_id));
    myChart.clear();

    option = {
        title: {
            text: \'\',
            subtext: \'\'
        },
        tooltip: {
            trigger: \'axis\',
            axisPointer: {
                type: \'shadow\'
            }
        },
        color: colorList,
        legend: {
            data: []
        },
        grid: {
            top: v_x,
            left: v_x2,
            right: v_y,
            bottom: v_y2,
            containLabel: true
        },
        xAxis: {
            type: \'category\',
            data: v_data_name,
            splitLine : {
                show : false
            },
            axisLabel : {
                textStyle : {
                    color : \'#3678ff\'
                },
                interval: 0,
                rotate: 25 //文字倾斜度
            },
            axisTick : {
                show : false
            },
            axisLine : {
                lineStyle : {
                    color : \'#234DB4\',
                    width : 2
                }
            }
        },
        yAxis: {
            type: \'value\',
            nameTextStyle : {
                color : \'#3678ff\'
            },
            splitLine : {
                show : false
            },
            axisLabel : {
                textStyle : {
                    color : \'#3678ff\'
                }
            },
            axisTick : {
                show : false
            },
            axisLine : {
                lineStyle : {
                    color : \'#234DB4\',
                    width : 2
                }
            }
        },
        series: [{
            name: [],
            type: v_type,
            showAllSymbol: true,
            symbol: \'circle\',
            symbolSize: 15,
            barWidth: \'15\',
            data: v_data_cnt,
            label: {
                normal: {
                    show: true,
                    position: \'top\',
                    textStyle: {
                        color: \'#fff\'
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: function(params) {
                                var color_list = colorList;
                                return color_list[params.dataIndex]
                            },
                    borderColor: "#fff",
                    borderWidth: 2,
                    shadowColor: \'rgba(0, 0, 0, .3)\',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                        [{
                            offset: 0,
                            color: \'rgba(108,80,243,0.5)\'
                        },
                        {
                            offset: 1,
                            color: \'rgba(108,80,243,0.1)\'
                        }],
                        false
                    )
                }
            }
        }],
        dataZoom: [{
            start: 0,        // 滚动条开始范围
            end: v_data_name.length > 25 ? 40 : 100,   // 滚动条结束范围
            show: isShowZoom ? true : false,  // 是否显示滚动条
            xAxisIndex: [0],
            textStyle: {
                color: \'#b1d4ff\'    // 显示字的颜色
            },
            bottom: 20,
            backgroundColor: \'rgba(53,142,255,0.1)\',  // 背景颜色
            height: 20,           // 滚动条高度
            handleSize: 20,                          // 手柄高度
            showDataShadow: true, // 显示数据阴影
            // 数据走势部分的颜色
            dataBackground: {
                areaStyle: {
                    opacity: 0.5, // 走势区域的透明度
                    color: \'#7662ee\' // 走势区域的颜色
                },
                lineStyle: {
                    opacity: 1,   // 走势线条的透明度
                    color: \'#7662ee\' // 走势区域的颜色
                }
            },
            handleStyle: {
                color: \'#b1d4ff\', // 手柄颜色
                shadowBlur: 8,    // 阴影长度
                shadowColor: \'rgba(0, 0, 0, 0)\',// 阴影颜色
                shadowOffsetX: 2, // 手柄本身的阴影 X 偏移。
                shadowOffsetY: 2  // 手柄本身的阴影 Y 偏移。
            }},
            {
                type: \'inside\'// 鼠标滚动效果
            }]
    };
    myChart.setOption(option);
}

 

注：shadowColor、shadowBlur这俩属性IE加上会报错（IE11、10、9、8都试过）

areaStyle: {
    normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
            [{
                offset: 0,
                color: \'rgba(108,80,243,0.3)\'
            },
            {
                offset: 1,
                color: \'rgba(108,80,243,0)\'
            }],
            false
        ),
        shadowColor: \'rgba(108,80,243, 0.9)\',  //IE加上这个属性就会报错
        shadowBlur: 20  //IE加上这个属性就会报错
    }
}

 

2、折线图效果

 

3、柱状图效果-单条

 

三、柱状图-多条

1、代码实现

//柱状图-多条调用
getDoubleBarY(\'bar_echarts\', bar_name, [bar_jhNum, bar_sjNum], [\'计划完成：\' + jhwc_count, \'实际完成：\' + zxjy_count], \'地区\', \'人数(人)\', \'2%\', \'8%\', \'20%\', \'13%\');
                
//柱状图多条JS
function getDoubleBarY(b_id, data_name, data_num, legend_name, x_util, y_util, v_x, v_x1, v_y, v_y1) {
    var myChart = echarts.init(document.getElementById(b_id));
    myChart.clear();

    var data = [];
    var dataList;
    var series = [];
    var seriesList;
    var color = ["#02c3f1", "#53e568", "#a154e9"];
    for(var i = 0; i < legend_name.length; i++){
        dataList = {
            name: legend_name[i],
            textStyle: {
                color: color[i]
            }
        };
        data.push(dataList);

        seriesList = {
            name: legend_name[i],
            type: \'bar\',
            data: data_num[i],
            barWidth: \'10\',
            label: {
                show: true,
                formatter: "{a|}",
                color: "#fff",
                position: "top",
                distance: -10,
                backgroundColor: color[i],
                padding: 4,
                borderRadius: 15,
                rich: {
                    a: {
                        width: 6,
                        height: 6,
                        borderRadius: 6,
                        lineHeight: 6,
                        backgroundColor: "#fff"
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: color[i] // 0% 处的颜色
                        },
                            {
                                offset: 1,
                                color: "#1F4869" // 100% 处的颜色
                            }
                        ]
                    }
                }
            }
        };
        series.push(seriesList);
    }

    option = {
        color: [\'#3678ff\'],
        tooltip: {
            trigger: \'axis\',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: \'shadow\' // 默认为直线，可选为：\'line\' | \'shadow\'
            }
        },
        legend: {
            itemWidth: 0,
            data: data,
            formatter: function (name) {
                return "█ " + name;
            }
        },
        grid: {
            left: v_x,
            right: v_x1,
            top: v_y,
            bottom: v_y1,
            containLabel: true
        },
        xAxis: [{
            name: x_util,
            nameTextStyle: {
                color: \'#3678ff\'
            },
            type: \'category\',
            data: data_name,
            splitLine: {
                show: false
            },
            axisLabel: {
                textStyle : {
                    color : \'#3678ff\'
                },
                interval: 0,
                rotate: 45 //文字倾斜度

            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: \'#234DB4\',
                    width: 2
                }
            }
        }],
        yAxis: [{
            name: y_util,
            nameTextStyle: {
                color: \'#3678ff\'
            },
            type: \'value\',
            splitLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: \'#3678ff\'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: \'#234DB4\',
                    width: 2
                }
            },
        }],
        series: series
    };
    myChart.setOption(option);
}

 

2、柱状图效果-多条

 

四、迁徙地图

1、代码实现

//迁徙地图调
var qyData  = [];
qyData.push([{name: \'吉林\'}, {name: area_name[i], value: area_num[i] / 1000}]);
getZGMap("echartsQXMap", qyData);
//迁徙地图JS
function getZGMap(p_id, qyData) {
    var myChart = echarts.init(document.getElementById(p_id));
    myChart.clear();

    var geoCoordMap = {
        \'吉林\': [125.8154, 44.2584],
        \'黑龙江省\': [127.9688, 45.368],
        \'辽宁省\': [123.1238, 42.1216],
        \'山东省\': [117.1582, 36.8701],
        \'河北省\': [114.4995, 38.1006],
        \'北京市\': [116.23, 39.54],
        \'天津市\': [117.2, 39.12],
        \'江苏省\': [118.7846, 32.08513],
        \'广东省\': [113.15, 23.08],
        \'内蒙古自治区\': [111.73, 40.83],
        \'浙江省\': [120.15, 30.28]
    };

    var planePath = \'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z\';

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord
                }, {
                    coord: toCoord
                }]);
            }
        }
        return res;
    };

    var color = [\'#a6c84c\', \'#ffa022\', \'#46bee9\'];
    var series = [];
    [[\'吉林\', qyData]].forEach(function (item, i) {
        series.push({
                name: item[0],
                type: \'lines\',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: \'#fff\',
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        // color: function (value) { //随机颜色
                        //     return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
                        // },
                        width: 0,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: item[0],
                type: \'lines\',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath, //飞机图标
                    symbolSize: 10 //飞机大小
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: item[0],
                type: \'effectScatter\',
                coordinateSystem: \'geo\',
                zlevel: 2,
                rippleEffect: {
                    brushType: \'stroke\'
                },
                label: {
                    normal: {
                        show: true,
                        position: \'right\',
                        formatter: \'{b}\'
                    }
                },
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
    });

    option = {
        title : {
        },
        tooltip : {
            trigger: \'item\'
        },
        geo: {
            map: \'china\',
            label: {
                normal:{
                    show: false,
                },
                emphasis: {
                    show: false,
                }
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: \'#004981\',
                    borderColor: \'#46d9ff\'
                },
                emphasis: {
                    areaColor: \'#004999\'
                }
            }
        },
        series: series
    };

    var url = \'../../workspace/jy/leaderviewjl/json/china.json\';
    $.get(url, function (geoJson) {
        myChart.hideLoading();
        echarts.registerMap(\'china\', geoJson);
        myChart.setOption(option);
    })
}

 

2、迁徙效果图

 

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode