分享几个用Echarts做的图表2

原创 2016年08月29日 15:43:43

2.地图

var ip="http://"+window.location.host+"/xz/xz/tongji/huibao/yanshiAction!";
var mapdata;
$(function () {
    init_chartfig_pzh();
});
//初始化图表路径
function init_chartfig_pzh() {
    require.config({
        paths: {
            echarts: "js/echarts"
        }
    });
    require(
        [
            "echarts",
            "echarts/chart/map",
            "echarts/chart/pie",
            "echarts/chart/bar",
            "echarts/chart/line"
        ],
        function (ec) {
            echarts = ec;
            require("echarts/util/mapData/params").params.CHENGDU = {
                getGeoJson: function (callback) {
                    $.getJSON("js/echarts/CD_geo_copy.json", callback);
                }
            }
            ecConfig = require("echarts/config");
        }
    );
}

//获得图表基本信息
function get_option(axis, geo) {
    var _option = {
//            title: {
//                text: "text",
//                x: 'center',
//                textStyle: {
//                    fontSize: 12,
//                    color: "#428bca"
//                }
//            },
        tooltip: {
            trigger: "axis"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: []
        },

        series: []
    };
    if (1 == axis) {
        _option.grid = {
            x: 80,
            y2: 30,
            x2: 60,
            borderWidth: 0
        };
        _option.xAxis = [
            {
                name: "name",
                axisLabel: {
                    interval: 0,
                    rotage: 60
                },
                type: "category",
                splitLine: {show: false},
                data: []
            }];
        _option.yAxis = [
            {
                name: "name",
                type: "value",
                splitLine: {
                    lineStyle: {
                        color: ["#F0F8FF", "#E0EEEE"]
                    }
                },
                axisLabel: {
                    formatter: function (val) {
                        if (val < 10000) {
                            return val;
                        } else if (val >= 10000 && val < 10000000) {
                            return (val / 10000) + "万";
                        } else {
                            return (val / 10000000) + "千万";
                        }
                    }
                }
            }];
    }
    if (1 == geo) {
        _option.dataRange = {};
        _option.dataRange.show = true;
        _option.dataRange.x = "89%";
        _option.dataRange.y = "top";
        _option.dataRange.precision = 0;
        _option.dataRange.calculable = true;
        _option.dataRange.color = ["#4dc1ea","#bae969","#f7fe24"];
        _option.dataRange.textStyle={color: '#fff'};

    }
    return _option;
}

$(window).load(function () {
    showMap_pzh();
});

function showMap_pzh() {
    $.ajax({
        type: 'post',
        dataType: "json",
        async: false,
        url: ip + "getHjAndWl.do",
        success: function (data) {
            mapdata = data;
            huademo_pzh("成都市", "demo1");
        }
    });

}


function huademo_pzh(area, div_id) {

    var datalist = mapdata.qxrk;
    var series0Array = new Array();
    var series1Array = new Array();
    var qxdata = {};
    for (var i = 0; i < datalist.length; i++) {
        var series1obj = new Object();
        series1obj.name = datalist[i].qx;
        series1obj.value = datalist[i].hjrk;
        series0Array.push(series1obj);
        var series2obj = new Object();
        series2obj.name = datalist[i].qx;
        series2obj.value = datalist[i].wlrk;
        series1Array.push(series2obj);
        qxdata[datalist[i].qx]=[datalist[i].hjrk,datalist[i].wlrk];
    }
    var option = get_option(0, 1);

    option.tooltip.trigger = "item";
    option.tooltip.padding=0;
    option.tooltip.position= function(p){return [p[0]-75,p[1]-60]};
    option.tooltip.formatter = function(params){
        var qx = params.name;
        var wlrk=0;
        var hjrk =0;
        if(undefined !=qxdata[qx]){
            wlrk = eval(qxdata[qx])[1];
            hjrk = eval(qxdata[qx])[0];
        }
        var html = "<div style='width: 149px;height: 60px; min-height: 80px' class='cd'>" +
            "<div style='width: 74px;height: 60px;float: left; text-align: center'><span style='color: black;'>"+wlrk+"</span>万人<br><span style='font-size: 12px;color: black;'>流动人口数</span></div>" +
            "<div style='border-right: 1px solid #ccc;height:40px;margin-top:10px;float:left;'></div>"+
            "<div style='width: 74px;height: 60px;float: left;text-align: center'><span style='color: black;'>"+hjrk+"</span>万人<br><span style='font-size: 12px;color: black;'>户籍人口数</span></div>" +
             "<div class='label-arrow'> </div>"
            "</div>";
        return html;
    };

    option.dataRange.min = 0;
    option.dataRange.max = 100;
    option.legend = {
        show: false,
        orient: 'vertical',
        x: 'left',
        data: ['户籍人口', '流动人口']
    };
    option.series[0] = {};
    option.series[0].type = "map";
    option.series[0].name = "户籍人口";
    option.series[0].mapType = "CHENGDU";
    option.series[0].itemStyle = {
        normal:{
            borderWidth:2,
            borderColor:"#fff",
            label:{show:true,
                textStyle:{
                    color:'#000',
                },
            },
            emphasis:{label:{show:true}}
        }
    };

    option.series[0].data = series0Array;

    option.series[1] = {};
    option.series[1].type = "map";
    option.series[1].name = "流动人口";
    option.series[1].mapType = "CHENGDU";
    option.series[1].itemStyle = {
        normal:{
            borderWidth:2,
            borderColor:"#fff",
            label:{show:true,
                textStyle:{
                    color:'#000',
                },
            },
            emphasis:{label:{show:true}}
        }
    };

    option.series[1].data = series1Array;
    var myChart = echarts.init(document.getElementById(div_id));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

}

版权声明:本文为博主原创文章,未经博主允许不得转载。

2个好用的网页图表制作插件echarts和hightcharts

网页图标的制作较为困难,首先前端的各种特效了就不说了。对各种元素的操作、样式的设计就累够呛。所以推荐2个实用的好用的网页图表插件echarts和highcharts。 官网链接: echarts ...
  • SchopenhauerZhang
  • SchopenhauerZhang
  • 2017年03月11日 17:39
  • 792

echarts2 的引入方式

echarts2 的引入方式
  • john1337
  • john1337
  • 2017年02月14日 13:51
  • 2896

echarts2的使用案例

-echarts的官网下载,将整个文件放置到自己的工程中 -进入echarts官网的案例,选择自己需要的案例类型,本文以扇形图为例 -先引用jquery.js,后引用echarts2.8/echa...
  • forever_ss
  • forever_ss
  • 2016年06月02日 14:37
  • 3090

Echarts2绘制动态曲线图并给出完整代码

参考教程 http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2 标签式单文件引入
  • oxuzhenyi
  • oxuzhenyi
  • 2017年02月13日 23:37
  • 2377

【报表神器】——ECharts

继上一篇文章中介绍了Highcharts这一制作报表的工具之后,自己有发现了同类的报表汇总工具——ECharts。简单介绍一下ECharts这一报表制作工具,ECharts是由百度商业数据可视化团队开...
  • u010508826
  • u010508826
  • 2016年02月13日 16:03
  • 746

图表制作工具之ECharts

简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/1...
  • Bennett2251
  • Bennett2251
  • 2016年11月19日 20:44
  • 973

分享几个用Echarts做的图表

1.双饼图 /** * @author huangteng * @describe 实现良有教育页面Echarts图 * @type {string} */ var IP = "http:...
  • javaexploreroooo
  • javaexploreroooo
  • 2016年08月29日 15:42
  • 233

分享几个用Echarts做的图表3

3.类迁徙图 公民系统——公民大数据 数据采集 ...
  • javaexploreroooo
  • javaexploreroooo
  • 2016年08月29日 15:44
  • 1478

使用Echarts生成图表

Echarts首页:http://echarts.baidu.com/index.html Echarts是一款非常好用的图表生成工具,这里以常用的饼图和柱状图为例讲一下Echarts的简单使用 ...
  • Sky786905664
  • Sky786905664
  • 2016年10月23日 09:49
  • 585

ECharts 简明教程,用js输出图表

Echarts 简介这个非常有趣,有用,来自:ZZP.LOLECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11...
  • u010287117
  • u010287117
  • 2016年04月07日 22:47
  • 4752
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:分享几个用Echarts做的图表2
举报原因:
原因补充:

(最多只允许输入30个字)