图表插件使用汇总（echarts，highchairts）

1、echarts之饼图显示数字

option={
    title: {
        text: \'某站点用户访问来源\',
        subtext: \'纯属虚构\',
        x: \'center\'
    },
    tooltip: {
        trigger: \'item\',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: \'vertical\',
        x: \'left\',
        data: [
            \'直接访问\',
            \'邮件营销\',
            \'联盟广告\',
            \'视频广告\',
            \'搜索引擎\'
        ]
    },
    calculable: true,
    series: [
        {
            name: \'访问来源\',
            type: \'pie\',
            radius: \'55%\',
            center: [
                \'50%\',
                \'60%\'
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        textStyle: {
                            fontFamily: \'MicrosoftYaHei\',
                            fontSize: \'12\',
                            fontWeight: \'bold\'
                        },
                        formatter: \'{b}: {c}亿元\n{d}%\'
                    },
                    labelLine: {
                        show: true
                    }
                }
            },
            data: [
                {
                    value: 335,
                    name: \'直接访问\'
                },
                {
                    value: 310,
                    name: \'邮件营销\'
                },
                {
                    value: 234,
                    name: \'联盟广告\'
                },
                {
                    value: 135,
                    name: \'视频广告\'
                },
                {
                    value: 1548,
                    name: \'搜索引擎\'
                }
            ]
        }
    ]
}

View Code

主要是itemStyle：属性设置

2、绑定事件

1) 模块化引入（echarts.js）

var ecConfig = require(\'echarts/config\');

myChart.on(ecConfig.EVENT.CLICK, function(param){

　　// to-do

});

2) 单一文件引入（echarts-all.js）

myChart.on(\'click\', function(param){ // ecConfig.EVENT.CLICK无非就是个常量而已

　　// to-do

});

3、地图-echarts显示地图

1.echarts官网上下载：http://echarts.baidu.com/doc/example.html

怎么在jsp里面使用：

模块化单文件引入：这是百度推荐使用的（不过这里我们用另外一种方式）。

标签式单文件引入：这个跟我们引入普通的js是一样的，下面的讲解主要是以这个方式为主。

自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入。

需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require(\'echarts/config\')， zrender.tool.color = require(\'zrender/tool/color\')

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="example/www2/js/dist/echarts-all.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById(\'main\'));
        var option = {
            ...
        }
        myChart.setOption(option);
    </script>
</body>
可以直接引入的单文件如下：

dist/echarts-all.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
source/echarts-all.js : 未压缩，全图表，包含world，china以及34个省市级地图数据，可用于调试

View Code

下面这个例子是显示iPhone在中国的销量：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>1.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
  
  <body>
    <!--定义页面图表容器-->
<!-- 必须制定容器的大小（height、width） -->
<div id="main" style="width: 98%; height: 500px;border: 1px solid #ccc; padding: 10px;"></div>
<script type="text/javascript" src="../echarts-all.js"></script>  这个就是echarts全部js，直接引入即可。
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById(\'main\'));
    option = {
       title : {
           text: \'iphone销量\',
           subtext: \'纯属虚构\',
           x:\'center\'
       },
       tooltip : {
           trigger: \'item\'
       },
       legend: {
           orient: \'vertical\',
           x:\'left\',
           data:[\'iphone3\',\'iphone4\',\'iphone5\']
       },
       dataRange: {
           min: 0,
           max: 2500,
           x: \'left\',
           y: \'bottom\',
           text:[\'高\',\'低\'],           // 文本，默认为数值文本
           calculable : true
       },
       toolbox: {
           show: true,
           orient : \'vertical\',
           x: \'right\',
           y: \'center\',
           feature : {
               mark : {show: true},
               dataView : {show: true, readOnly: false},
               restore : {show: true},
               saveAsImage : {show: true}
           }
       },
       roamController: {
           show: true,
           x: \'right\',
           mapTypeControl: {
               \'china\': true
           }
       },
       series : [
           {
               name: \'iphone3\',
               type: \'map\',
               mapType: \'china\',
               roam: false,
               itemStyle:{
                   normal:{label:{show:true}},
                   emphasis:{label:{show:true}}
               },
               data:[
                   {name: \'北京\',value: Math.round(Math.random()*1000)},
                   {name: \'天津\',value: Math.round(Math.random()*1000)},
                   {name: \'上海\',value: Math.round(Math.random()*1000)},
                   {name: \'重庆\',value: Math.round(Math.random()*1000)},
                   {name: \'河北\',value: Math.round(Math.random()*1000)},
                   {name: \'河南\',value: Math.round(Math.random()*1000)},
                   {name: \'云南\',value: Math.round(Math.random()*1000)},
                   {name: \'辽宁\',value: Math.round(Math.random()*1000)},
                   {name: \'黑龙江\',value: Math.round(Math.random()*1000)},
                   {name: \'湖南\',value: Math.round(Math.random()*1000)},
                   {name: \'安徽\',value: Math.round(Math.random()*1000)},
                   {name: \'山东\',value: Math.round(Math.random()*1000)},
                   {name: \'新疆\',value: Math.round(Math.random()*1000)},
                   {name: \'江苏\',value: Math.round(Math.random()*1000)},
                   {name: \'浙江\',value: Math.round(Math.random()*1000)},
                   {name: \'江西\',value: Math.round(Math.random()*1000)},
                   {name: \'湖北\',value: Math.round(Math.random()*1000)},
                   {name: \'广西\',value: Math.round(Math.random()*1000)},
                   {name: \'甘肃\',value: Math.round(Math.random()*1000)},
                   {name: \'山西\',value: Math.round(Math.random()*1000)},
                   {name: \'内蒙古\',value: Math.round(Math.random()*1000)},
                   {name: \'陕西\',value: Math.round(Math.random()*1000)},
                   {name: \'吉林\',value: Math.round(Math.random()*1000)},
                   {name: \'福建\',value: Math.round(Math.random()*1000)},
                   {name: \'贵州\',value: Math.round(Math.random()*1000)},
                   {name: \'广东\',value: Math.round(Math.random()*1000)},
                   {name: \'青海\',value: Math.round(Math.random()*1000)},
                   {name: \'西藏\',value: Math.round(Math.random()*1000)},
                   {name: \'四川\',value: Math.round(Math.random()*1000)},
                   {name: \'宁夏\',value: Math.round(Math.random()*1000)},
                   {name: \'海南\',value: Math.round(Math.random()*1000)},
                   {name: \'台湾\',value: Math.round(Math.random()*1000)},
                   {name: \'香港\',value: Math.round(Math.random()*1000)},
                   {name: \'澳门\',value: Math.round(Math.random()*1000)}
               ]
           },
           {
               name: \'iphone4\',
               type: \'map\',
               mapType: \'china\',
               itemStyle:{
                   normal:{label:{show:true}},
                   emphasis:{label:{show:true}}
               },
               data:[
                   {name: \'北京\',value: Math.round(Math.random()*1000)},
                   {name: \'天津\',value: Math.round(Math.random()*1000)},
                   {name: \'上海\',value: Math.round(Math.random()*1000)},
                   {name: \'重庆\',value: Math.round(Math.random()*1000)},
                   {name: \'河北\',value: Math.round(Math.random()*1000)},
                   {name: \'安徽\',value: Math.round(Math.random()*1000)},
                   {name: \'新疆\',value: Math.round(Math.random()*1000)},
                   {name: \'浙江\',value: Math.round(Math.random()*1000)},
                   {name: \'江西\',value: Math.round(Math.random()*1000)},
                   {name: \'山西\',value: Math.round(Math.random()*1000)},
                   {name: \'内蒙古\',value: Math.round(Math.random()*1000)},
                   {name: \'吉林\',value: Math.round(Math.random()*1000)},
                   {name: \'福建\',value: Math.round(Math.random()*1000)},
                   {name: \'广东\',value: Math.round(Math.random()*1000)},
                   {name: \'西藏\',value: Math.round(Math.random()*1000)},
                   {name: \'四川\',value: Math.round(Math.random()*1000)},
                   {name: \'宁夏\',value: Math.round(Math.random()*1000)},
                   {name: \'香港\',value: Math.round(Math.random()*1000)},
                   {name: \'澳门\',value: Math.round(Math.random()*1000)}
               ]
           },
           {
               name: \'iphone5\',
               type: \'map\',
               mapType: \'china\',
               itemStyle:{
                   normal:{label:{show:true}},
                   emphasis:{label:{show:true}}
               },
               data:[
                   {name: \'北京\',value: Math.round(Math.random()*1000)},
                   {name: \'天津\',value: Math.round(Math.random()*1000)},
                   {name: \'上海\',value: Math.round(Math.random()*1000)},
                   {name: \'广东\',value: Math.round(Math.random()*1000)},
                   {name: \'台湾\',value: Math.round(Math.random()*1000)},
                   {name: \'香港\',value: Math.round(Math.random()*1000)},
                   {name: \'澳门\',value: Math.round(Math.random()*1000)}
               ]
           }
       ]
    };
    myChart.setOption(option);
    </script>
  </body>
</html>

View Code

效果：

全国地图找子级地市：

（钻取列子http://echarts.baidu.com/echarts2/doc/example/map20.html）

<!DOCTYPE html>
<html>
  <head>
    <title>2.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
  </head>
  
  <body>
    <!--定义页面图表容器-->
<!-- 必须制定容器的大小（height、width） -->
<div id="main" style="width: 98%; height: 500px; border: 1px solid #ccc; padding: 10px;"></div>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../echarts-all.js"></script>
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById(\'main\'));
    
    option = {
    tooltip : {
        trigger: \'item\'
    },
    toolbox: {
        show : true,
        orient: \'vertical\',
        x:\'right\',
        y:\'center\',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false}
        }
    },
    series : [
        {
            tooltip: {
                trigger: \'item\',
                formatter: \'{b}\'
            },
            name: \'全国\',
            type: \'map\',
            mapType: \'china\',
            mapLocation: {//显示主地图的位置及其大小
                x: \'left\',
                y: \'top\',
                width: \'50%\'
            },
            roam: false,//地图不允许拖动
            selectedMode : \'single\',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
                {name: \'北京\', selected:false},
                {name: \'天津\', selected:false},
                {name: \'上海\', selected:false},
                {name: \'重庆\', selected:false},
                {name: \'河北\', selected:false},
                {name: \'河南\', selected:false},
                {name: \'云南\', selected:false},
                {name: \'辽宁\', selected:false},
                {name: \'黑龙江\', selected:false},
                {name: \'湖南\', selected:false},
                {name: \'安徽\', selected:false},
                {name: \'山东\', selected:false},
                {name: \'新疆\', selected:false},
                {name: \'江苏\', selected:false},
                {name: \'浙江\', selected:false},
                {name: \'江西\', selected:false},
                {name: \'湖北\', selected:false},
                {name: \'广西\', selected:false},
                {name: \'甘肃\', selected:false},
                {name: \'山西\', selected:true},//默认选中
                {name: \'内蒙古\',selected:true},//默认选中
                {name: \'陕西\', selected:false},
                {name: \'吉林\', selected:false},
                {name: \'福建\', selected:false},
                {name: \'贵州\', selected:false},
                {name: \'广东\', selected:false},
                {name: \'青海\', selected:false},
                {name: \'西藏\', selected:false},
                {name: \'四川\', selected:false},
                {name: \'宁夏\', selected:false},
                {name: \'海南\', selected:false},
                {name: \'台湾\', selected:false},
                {name: \'香港\', selected:false},
                {name: \'澳门\', selected:false}
            ]
        }
    ],
    animation: false
};
myChart.setOption(option, true); //显示国家地图
 
//var ecConfig = require(\'echarts/config\');
//myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){//由于是标签式单文件引入所以这个模块化单文件引入的事件要改变,不能使用require
myChart.on(echarts.config.EVENT.MAP_SELECTED, function (param){//单击省份事件
    var selected = param.selected;
    var selectedProvince;
    var name;
    for (var i = 0, l = option.series[0].data.length; i < l; i++) {
        name = option.series[0].data[i].name;
        option.series[0].data[i].selected = selected[name];
        if (selected[name]) {
            selectedProvince = name;
        }
    }
    alert(selectedProvince);//所选择省的名字
    if (typeof selectedProvince == \'undefined\') {
        option.series.splice(1);
        option.legend = null;
        option.dataRange = null;
        myChart.setOption(option, true);//如果选择省份不存在则显示国家
        return;
    }
    option.series[1] = {
        name: \'居民建档数\',
        type: \'map\',
        mapType: selectedProvince,
        itemStyle:{
            normal:{label:{show:true}},//没选择时候省份是否显示
            emphasis:{label:{show:true}}//选择之后省份是否显示
        },
        mapLocation: {//显示子地图的位置及其大小
            x: \'right\',
            y: \'top\',
            width: \'50%\'
        },
        roam: false,//地图不允许拖动
        data:[
            {name: \'重庆市\',value: Math.round(Math.random()*1000)},
            {name: \'北京市\',value: Math.round(Math.random()*1000)},
            {name: \'海淀区\',value: Math.round(Math.random()*1000)},//可以补填四个直辖市所管辖的区，否则直辖市所在的区没数据
            {name: \'天津市\',value: Math.round(Math.random()*1000)},
            {name: \'上海市\',value: Math.round(Math.random()*1000)},
            {name: \'香港\',value: Math.round(Math.random()*1000)},
            {name: \'澳门\',value: Math.round(Math.random()*1000)},
            {name: \'巴音郭楞蒙古自治州\',value: Math.round(Math.random()*1000)},
            {name: \'和田地区\',value: Math.round(Math.random()*1000)},
            {name: \'哈密地区\',value: Math.round(Math.random()*1000)},
            {name: \'阿克苏地区\',value: Math.round(Math.random()*1000)},
            {name: \'阿勒泰地区\',value: Math.round(Math.random()*1000)},
            {name: \'喀什地区\',value: Math.round(Math.random()*1000)},
            {name: \'塔城地区\',value: Math.round(Math.random()*1000)},
            {name: \'昌吉回族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'克孜勒苏柯尔克孜自治州\',value: Math.round(Math.random()*1000)},
            {name: \'吐鲁番地区\',value: Math.round(Math.random()*1000)},
            {name: \'伊犁哈萨克自治州\',value: Math.round(Math.random()*1000)},
            {name: \'博尔塔拉蒙古自治州\',value: Math.round(Math.random()*1000)},
            {name: \'乌鲁木齐市\',value: Math.round(Math.random()*1000)},
            {name: \'克拉玛依市\',value: Math.round(Math.random()*1000)},
            {name: \'阿拉尔市\',value: Math.round(Math.random()*1000)},
            {name: \'图木舒克市\',value: Math.round(Math.random()*1000)},
            {name: \'五家渠市\',value: Math.round(Math.random()*1000)},
            {name: \'石河子市\',value: Math.round(Math.random()*1000)},
            {name: \'那曲地区\',value: Math.round(Math.random()*1000)},
            {name: \'阿里地区\',value: Math.round(Math.random()*1000)},
            {name: \'日喀则地区\',value: Math.round(Math.random()*1000)},
            {name: \'林芝地区\',value: Math.round(Math.random()*1000)},
            {name: \'昌都地区\',value: Math.round(Math.random()*1000)},
            {name: \'山南地区\',value: Math.round(Math.random()*1000)},
            {name: \'拉萨市\',value: Math.round(Math.random()*1000)},
            {name: \'呼伦贝尔市\',value: Math.round(Math.random()*1000)},
            {name: \'阿拉善盟\',value: Math.round(Math.random()*1000)},
            {name: \'锡林郭勒盟\',value: Math.round(Math.random()*1000)},
            {name: \'鄂尔多斯市\',value: Math.round(Math.random()*1000)},
            {name: \'赤峰市\',value: Math.round(Math.random()*1000)},
            {name: \'巴彦淖尔市\',value: Math.round(Math.random()*1000)},
            {name: \'通辽市\',value: Math.round(Math.random()*1000)},
            {name: \'乌兰察布市\',value: Math.round(Math.random()*1000)},
            {name: \'兴安盟\',value: Math.round(Math.random()*1000)},
            {name: \'包头市\',value: Math.round(Math.random()*1000)},
            {name: \'呼和浩特市\',value: Math.round(Math.random()*1000)},
            {name: \'乌海市\',value: Math.round(Math.random()*1000)},
            {name: \'海西蒙古族藏族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'玉树藏族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'果洛藏族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'海南藏族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'海北藏族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'黄南藏族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'海东地区\',value: Math.round(Math.random()*1000)},
            {name: \'西宁市\',value: Math.round(Math.random()*1000)},
            {name: \'甘孜藏族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'阿坝藏族羌族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'凉山彝族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'绵阳市\',value: Math.round(Math.random()*1000)},
            {name: \'达州市\',value: Math.round(Math.random()*1000)},
            {name: \'广元市\',value: Math.round(Math.random()*1000)},
            {name: \'雅安市\',value: Math.round(Math.random()*1000)},
            {name: \'宜宾市\',value: Math.round(Math.random()*1000)},
            {name: \'乐山市\',value: Math.round(Math.random()*1000)},
            {name: \'南充市\',value: Math.round(Math.random()*1000)},
            {name: \'巴中市\',value: Math.round(Math.random()*1000)},
            {name: \'泸州市\',value: Math.round(Math.random()*1000)},
            {name: \'成都市\',value: Math.round(Math.random()*1000)},
            {name: \'资阳市\',value: Math.round(Math.random()*1000)},
            {name: \'攀枝花市\',value: Math.round(Math.random()*1000)},
            {name: \'眉山市\',value: Math.round(Math.random()*1000)},
            {name: \'广安市\',value: Math.round(Math.random()*1000)},
            {name: \'德阳市\',value: Math.round(Math.random()*1000)},
            {name: \'内江市\',value: Math.round(Math.random()*1000)},
            {name: \'遂宁市\',value: Math.round(Math.random()*1000)},
            {name: \'自贡市\',value: Math.round(Math.random()*1000)},
            {name: \'黑河市\',value: Math.round(Math.random()*1000)},
            {name: \'大兴安岭地区\',value: Math.round(Math.random()*1000)},
            {name: \'哈尔滨市\',value: Math.round(Math.random()*1000)},
            {name: \'齐齐哈尔市\',value: Math.round(Math.random()*1000)},
            {name: \'牡丹江市\',value: Math.round(Math.random()*1000)},
            {name: \'绥化市\',value: Math.round(Math.random()*1000)},
            {name: \'伊春市\',value: Math.round(Math.random()*1000)},
            {name: \'佳木斯市\',value: Math.round(Math.random()*1000)},
            {name: \'鸡西市\',value: Math.round(Math.random()*1000)},
            {name: \'双鸭山市\',value: Math.round(Math.random()*1000)},
            {name: \'大庆市\',value: Math.round(Math.random()*1000)},
            {name: \'鹤岗市\',value: Math.round(Math.random()*1000)},
            {name: \'七台河市\',value: Math.round(Math.random()*1000)},
            {name: \'酒泉市\',value: Math.round(Math.random()*1000)},
            {name: \'张掖市\',value: Math.round(Math.random()*1000)},
            {name: \'甘南藏族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'武威市\',value: Math.round(Math.random()*1000)},
            {name: \'陇南市\',value: Math.round(Math.random()*1000)},
            {name: \'庆阳市\',value: Math.round(Math.random()*1000)},
            {name: \'白银市\',value: Math.round(Math.random()*1000)},
            {name: \'定西市\',value: Math.round(Math.random()*1000)},
            {name: \'天水市\',value: Math.round(Math.random()*1000)},
            {name: \'兰州市\',value: Math.round(Math.random()*1000)},
            {name: \'平凉市\',value: Math.round(Math.random()*1000)},
            {name: \'临夏回族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'金昌市\',value: Math.round(Math.random()*1000)},
            {name: \'嘉峪关市\',value: Math.round(Math.random()*1000)},
            {name: \'普洱市\',value: Math.round(Math.random()*1000)},
            {name: \'红河哈尼族彝族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'文山壮族苗族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'曲靖市\',value: Math.round(Math.random()*1000)},
            {name: \'楚雄彝族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'大理白族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'临沧市\',value: Math.round(Math.random()*1000)},
            {name: \'迪庆藏族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'昭通市\',value: Math.round(Math.random()*1000)},
            {name: \'昆明市\',value: Math.round(Math.random()*1000)},
            {name: \'丽江市\',value: Math.round(Math.random()*1000)},
            {name: \'西双版纳傣族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'保山市\',value: Math.round(Math.random()*1000)},
            {name: \'玉溪市\',value: Math.round(Math.random()*1000)},
            {name: \'怒江傈僳族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'德宏傣族景颇族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'百色市\',value: Math.round(Math.random()*1000)},
            {name: \'河池市\',value: Math.round(Math.random()*1000)},
            {name: \'桂林市\',value: Math.round(Math.random()*1000)},
            {name: \'南宁市\',value: Math.round(Math.random()*1000)},
            {name: \'柳州市\',value: Math.round(Math.random()*1000)},
            {name: \'崇左市\',value: Math.round(Math.random()*1000)},
            {name: \'来宾市\',value: Math.round(Math.random()*1000)},
            {name: \'玉林市\',value: Math.round(Math.random()*1000)},
            {name: \'梧州市\',value: Math.round(Math.random()*1000)},
            {name: \'贺州市\',value: Math.round(Math.random()*1000)},
            {name: \'钦州市\',value: Math.round(Math.random()*1000)},
            {name: \'贵港市\',value: Math.round(Math.random()*1000)},
            {name: \'防城港市\',value: Math.round(Math.random()*1000)},
            {name: \'北海市\',value: Math.round(Math.random()*1000)},
            {name: \'怀化市\',value: Math.round(Math.random()*1000)},
            {name: \'永州市\',value: Math.round(Math.random()*1000)},
            {name: \'邵阳市\',value: Math.round(Math.random()*1000)},
            {name: \'郴州市\',value: Math.round(Math.random()*1000)},
            {name: \'常德市\',value: Math.round(Math.random()*1000)},
            {name: \'湘西土家族苗族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'衡阳市\',value: Math.round(Math.random()*1000)},
            {name: \'岳阳市\',value: Math.round(Math.random()*1000)},
            {name: \'益阳市\',value: Math.round(Math.random()*1000)},
            {name: \'长沙市\',value: Math.round(Math.random()*1000)},
            {name: \'株洲市\',value: Math.round(Math.random()*1000)},
            {name: \'张家界市\',value: Math.round(Math.random()*1000)},
            {name: \'娄底市\',value: Math.round(Math.random()*1000)},
            {name: \'湘潭市\',value: Math.round(Math.random()*1000)},
            {name: \'榆林市\',value: Math.round(Math.random()*1000)},
            {name: \'延安市\',value: Math.round(Math.random()*1000)},
            {name: \'汉中市\',value: Math.round(Math.random()*1000)},
            {name: \'安康市\',value: Math.round(Math.random()*1000)},
            {name: \'商洛市\',value: Math.round(Math.random()*1000)},
            {name: \'宝鸡市\',value: Math.round(Math.random()*1000)},
            {name: \'渭南市\',value: Math.round(Math.random()*1000)},
            {name: \'咸阳市\',value: Math.round(Math.random()*1000)},
            {name: \'西安市\',value: Math.round(Math.random()*1000)},
            {name: \'铜川市\',value: Math.round(Math.random()*1000)},
            {name: \'清远市\',value: Math.round(Math.random()*1000)},
            {name: \'韶关市\',value: Math.round(Math.random()*1000)},
            {name: \'湛江市\',value: Math.round(Math.random()*1000)},
            {name: \'梅州市\',value: Math.round(Math.random()*1000)},
            {name: \'河源市\',value: Math.round(Math.random()*1000)},
            {name: \'肇庆市\',value: Math.round(Math.random()*1000)},
            {name: \'惠州市\',value: Math.round(Math.random()*1000)},
            {name: \'茂名市\',value: Math.round(Math.random()*1000)},
            {name: \'江门市\',value: Math.round(Math.random()*1000)},
            {name: \'阳江市\',value: Math.round(Math.random()*1000)},
            {name: \'云浮市\',value: Math.round(Math.random()*1000)},
            {name: \'广州市\',value: Math.round(Math.random()*1000)},
            {name: \'汕尾市\',value: Math.round(Math.random()*1000)},
            {name: \'揭阳市\',value: Math.round(Math.random()*1000)},
            {name: \'珠海市\',value: Math.round(Math.random()*1000)},
            {name: \'佛山市\',value: Math.round(Math.random()*1000)},
            {name: \'潮州市\',value: Math.round(Math.random()*1000)},
            {name: \'汕头市\',value: Math.round(Math.random()*1000)},
            {name: \'深圳市\',value: Math.round(Math.random()*1000)},
            {name: \'东莞市\',value: Math.round(Math.random()*1000)},
            {name: \'中山市\',value: Math.round(Math.random()*1000)},
            {name: \'延边朝鲜族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'吉林市\',value: Math.round(Math.random()*1000)},
            {name: \'白城市\',value: Math.round(Math.random()*1000)},
            {name: \'松原市\',value: Math.round(Math.random()*1000)},
            {name: \'长春市\',value: Math.round(Math.random()*1000)},
            {name: \'白山市\',value: Math.round(Math.random()*1000)},
            {name: \'通化市\',value: Math.round(Math.random()*1000)},
            {name: \'四平市\',value: Math.round(Math.random()*1000)},
            {name: \'辽源市\',value: Math.round(Math.random()*1000)},
            {name: \'承德市\',value: Math.round(Math.random()*1000)},
            {name: \'张家口市\',value: Math.round(Math.random()*1000)},
            {name: \'保定市\',value: Math.round(Math.random()*1000)},
            {name: \'唐山市\',value: Math.round(Math.random()*1000)},
            {name: \'沧州市\',value: Math.round(Math.random()*1000)},
            {name: \'石家庄市\',value: Math.round(Math.random()*1000)},
            {name: \'邢台市\',value: Math.round(Math.random()*1000)},
            {name: \'邯郸市\',value: Math.round(Math.random()*1000)},
            {name: \'秦皇岛市\',value: Math.round(Math.random()*1000)},
            {name: \'衡水市\',value: Math.round(Math.random()*1000)},
            {name: \'廊坊市\',value: Math.round(Math.random()*1000)},
            {name: \'恩施土家族苗族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'十堰市\',value: Math.round(Math.random()*1000)},
            {name: \'宜昌市\',value: Math.round(Math.random()*1000)},
            {name: \'襄樊市\',value: Math.round(Math.random()*1000)},
            {name: \'黄冈市\',value: Math.round(Math.random()*1000)},
            {name: \'荆州市\',value: Math.round(Math.random()*1000)},
            {name: \'荆门市\',value: Math.round(Math.random()*1000)},
            {name: \'咸宁市\',value: Math.round(Math.random()*1000)},
            {name: \'随州市\',value: Math.round(Math.random()*1000)},
            {name: \'孝感市\',value: Math.round(Math.random()*1000)},
            {name: \'武汉市\',value: Math.round(Math.random()*1000)},
            {name: \'黄石市\',value: Math.round(Math.random()*1000)},
            {name: \'神农架林区\',value: Math.round(Math.random()*1000)},
            {name: \'天门市\',value: Math.round(Math.random()*1000)},
            {name: \'仙桃市\',value: Math.round(Math.random()*1000)},
            {name: \'潜江市\',value: Math.round(Math.random()*1000)},
            {name: \'鄂州市\',value: Math.round(Math.random()*1000)},
            {name: \'遵义市\',value: Math.round(Math.random()*1000)},
            {name: \'黔东南苗族侗族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'毕节地区\',value: Math.round(Math.random()*1000)},
            {name: \'黔南布依族苗族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'铜仁地区\',value: Math.round(Math.random()*1000)},
            {name: \'黔西南布依族苗族自治州\',value: Math.round(Math.random()*1000)},
            {name: \'六盘水市\',value: Math.round(Math.random()*1000)},
            {name: \'安顺市\',value: Math.round(Math.random()*1000)},
            {name: \'贵阳市\',value: Math.round(Math.random()*1000)},
            {name: \'烟台市\',value: Math.round(Math.random()*1000)},
            {name: \'临沂市\',value: Math.round(Math.random()*1000)},
            {name: \'潍坊市\',value: Math.round(Math.random()*1000)},
            {name: \'青岛市\',value: Math.round(Math.random()*1000)},
            {name: \'菏泽市\',value: Math.round(Math.random()*1000)},
            {name: \'济宁市\',value: Math.round(Math.random()*1000)},
            {name: \'德州市\',value: Math.round(Math.random()*1000)},
            {name: \'滨州市\',value: Math.round(Math.random()*1000)},
            {name: \'聊城市\',value: Math.round(Math.random()*1000)},
            {name: \'东营市\',value: Math.round(Math.random()*1000)},
            {name: \'济南市\',value: Math.round(Math.random()*1000)},
            {name: \'泰安市\',value: Math.round(Math.random()*1000)},
            {name: \'威海市\',value: Math.round(Math.random()*1000)},
            {name: \'日照市\',value: Math.round(Math.random()*1000)},
            {name: \'淄博市\',value: Math.round(Math.random()*1000)},
            {name: \'枣庄市\',value: Math.round(Math.random()*1000)},
            {name: \'莱芜市\',value: Math.round(Math.random()*1000)},
            {name: \'赣州市\',value: Math.round(Math.random()*1000)},
            {name: \'吉安市\',value: Math.round(Math.random()*1000)},
            {name: \'上饶市\',value: Math.round(Math.random()*1000)},
            {name: \'九江市\',value: Math.round(Math.random()*1000)},
            {name: \'抚州市\',value: Math.round(Math.random()*1000)},
            {name: \'宜春市\',value: Math.round(Math.random()*1000)},
            {name: \'南昌市\',value: Math.round(Math.random()*1000)},
            {name: \'景德镇市\',value: Math.round(Math.random()*1000)},
            {name: \'萍乡市\',value: Math.round(Math.random()*1000)},
            {name: \'鹰潭市\',value: Math.round(Math.random()*1000)},
            {name: \'新余市\',value: Math.round(Math.random()*1000)},
            {name: \'南阳市\',value: Math.round(Math.random()*1000)},
            {name: \'信阳市\',value: Math.round(Math.random()*1000)},
            {name: \'洛阳市\',value: Math.round(Math.random()*1000)},
            {name: \'驻马店市\',value: Math.round(Math.random()*1000)},
            {name: \'周口市\',value: Math.round(Math.random()*1000)},
            {name: \'商丘市\',value: Math.round(Math.random()*1000)},
            {name: \'三门峡市\',value: Math.round(Math.random()*1000)},
            {name: \'新乡市\',value: Math.round(Math.random()*1000)},
            {name: \'平顶山市\',value: Math.round(Math.random()*1000)},
            {name: \'郑州市\',value: Math.round(Math.random()*1000)},
            {name: \'安阳市\',value: Math.round(Math.random()*1000)},
            {name: \'开封市\',value: Math.round(Math.random()*1000)},
            {name: \'焦作市\',value: Math.round(Math.random()*1000)},
            {name: \'许昌市\',value: Math.round(Math.random()*1000)},
            {name: \'濮阳市\',value: Math.round(Math.random()*1000)},
            {name: \'漯河市\',value: Math.round(Math.random()*1000)},
            {name: \'鹤壁市\',value: Math.round(Math.random()*1000)},
            {name: \'大连市\',value: Math.round(Math.random()*1000)},
            {name: \'朝阳市\',value: Math.round(Math.random()*1000)},
            {name: \'丹东市\',value: Math.round(Math.random()*1000)},
            {name: \'铁岭市\',value: Math.round(Math.random()*1000)},
            {name: \'沈阳市\',value: Math.round(Math.random()*1000)},
            {name: \'抚顺市\',value: Math.round(Math.random()*1000)},
            {name: \'葫芦岛市\',value: Math.round(Math.random()*1000)},
            {name: \'阜新市\',value: Math.round(Math.random()*1000)},
            {name: \'锦州市\',value: Math.round(Math.random()*1000)},
            {name: \'鞍山市\',value: Math.round(Math.random()*1000)},
            {name: \'本溪市\',value: Math.round(Math.random()*1000)},
            {name: \'营口市\',value: Math.round(Math.random()*1000)},
            {name: \'辽阳市\',value: Math.round(Math.random()*1000)},
            {name: \'盘锦市\',value: Math.round(Math.random()*1000)},
            {name: \'忻州市\',value: Math.round(Math.random()*1000)},
            {name: \'吕梁市\',value: Math.round(Math.random()*1000)},
            {name: \'临汾市\',value: Math.round(Math.random()*1000)},
            {name: \'晋中市\',value: Math.round(Math.random()*1000)},
            {name: \'运城市\',value: Math.round(Math.random()*1000)},
            {name: \'大同市\',value: Math.round(Math.random()*1000)},
            {name: \'长治市\',value: Math.round(Math.random()*1000)},
            {name: \'朔州市\',value: Math.round(Math.random()*1000)},
            {name: \'晋城市\',value: Math.round(Math.random()*1000)},
            {name: \'太原市\',value: Math.round(Math.random()*1000)},
            {name: \'阳泉市\',value: Math.round(Math.random()*1000)},
            {name: \'六安市\',value: Math.round(Math.random()*1000)},
            {name: \'安庆市\',value: Math.round(Math.random()*1000)},
            {name: \'滁州市\',value: Math.round(Math.random()*1000)},
            {name: \'宣城市\',value: Math.round(Math.random()*1000)},
            {name: \'阜阳市\',value: Math.round(Math.random()*1000)},
            {name: \'宿州市\',value: Math.round(Math.random()*1000)},
            {name: \'黄山市\',value: Math.round(Math.random()*1000)},
            {name: \'巢湖市\',value: Math.round(Math.random()*1000)},
            {name: \'亳州市\',value: Math.round(Math.random()*1000)},
            {name: \'池州市\',value: Math.round(Math.random()*1000)},
            {name: \'合肥市\',value: Math.round(Math.random()*1000)},
            {name: \'蚌埠市\',value: Math.round(Math.random()*1000)},
            {name: \'芜湖市\',value: Math.round(Math.random()*1000)},
            {name: \'淮北市\',value: Math.round(Math.random()*1000)},
            {name: \'淮南市\',value: Math.round(Math.random()*1000)},
            {name: \'马鞍山市\',value: Math.round(Math.random()*1000)},
            {name: \'铜陵市\',value: Math.round(Math.random()*1000)},
            {name: \'南平市\',value: Math.round(Math.random()*1000)},
            {name: \'三明市\',value: Math.round(Math.random()*1000)},
            {name: \'龙岩市\',value: Math.round(Math.random()*1000)},
            {name: \'宁德市\',value: Math.round(Math.random()*1000)},
            {name: \'福州市\',value: Math.round(Math.random()*1000)},
            {name: \'漳州市\',value: Math.round(Math.random()*1000)},
            {name: \'泉州市\',value: Math.round(Math.random()*1000)},
            {name: \'莆田市\',value: Math.round(Math.random()*1000)},
            {name: \'厦门市\',value: Math.round(Math.random()*1000)},
            {name: \'丽水市\',value: Math.round(Math.random()*1000)},
            {name: \'杭州市\',value: Math.round(Math.random()*1000)},
            {name: \'温州市\',value: Math.round(Math.random()*1000)},
            {name: \'宁波市\',value: Math.round(Math.random()*1000)},
            {name: \'舟山市\',value: Math.round(Math.random()*1000)},
            {name: \'台州市\',value: Math.round(Math.random()*1000)},
            {name: \'金华市\',value: Math.round(Math.random()*1000)},
            {name: \'衢州市\',value: Math.round(Math.random()*1000)},
            {name: \'绍兴市\',value: Math.round(Math.random()*1000)},
            {name: \'嘉兴市\',value: Math.round(Math.random()*1000)},
            {name: \'湖州市\',value: Math.round(Math.random()*1000)},
            {name: \'盐城市\',value: Math.round(Math.random()*1000)},
            {name: \'徐州市\',value: Math.round(Math.random()*1000)},
            {name: \'南通市\',value: Math.round(Math.random()*1000)},
            {name: \'淮安市\',value: Math.round(Math.random()*1000)},
            {name: \'苏州市\',value: Math.round(Math.random()*1000)},
            {name: \'宿迁市\',value: Math.round(Math.random()*1000)},
            {name: \'连云港市\',value: Math.round(Math.random()*1000)},
            {name: \'扬州市\',value: Math.round(Math.random()*1000)},
            {name: \'南京市\',value: Math.round(Math.random()*1000)},
            {name: \'泰州市\',value: Math.round(Math.random()*1000)},
            {name: \'无锡市\',value: Math.round(Math.random()*1000)},
            {name: \'常州市\',value: Math.round(Math.random()*1000)},
            {name: \'镇江市\',value: Math.round(Math.random()*1000)},
            {name: \'吴忠市\',value: Math.round(Math.random()*1000)},
            {name: \'中卫市\',value: Math.round(Math.random()*1000)},
            {name: \'固原市\',value: Math.round(Math.random()*1000)},
            {name: \'银川市\',value: Math.round(Math.random()*1000)},
            {name: \'石嘴山市\',value: Math.round(Math.random()*1000)},
            {name: \'儋州市\',value: Math.round(Math.random()*1000)},
            {name: \'文昌市\',value: Math.round(Math.random()*1000)},
            {name: \'乐东黎族自治县\',value: Math.round(Math.random()*1000)},
            {name: \'三亚市\',value: Math.round(Math.random()*1000)},
            {name: \'琼中黎族苗族自治县\',value: Math.round(Math.random()*1000)},
            {name: \'东方市\',value: Math.round(Math.random()*1000)},
            {name: \'海口市\',value: Math.round(Math.random()*1000)},
            {name: \'万宁市\',value: Math.round(Math.random()*1000)},
            {name: \'澄迈县\',value: Math.round(Math.random()*1000)},
            {name: \'白沙黎族自治县\',value: Math.round(Math.random()*1000)},
            {name: \'琼海市\',value: Math.round(Math.random()*1000)},
            {name: \'昌江黎族自治县\',value: Math.round(Math.random()*1000)},
            {name: \'临高县\',value: Math.round(Math.random()*1000)},
            {name: \'陵水黎族自治县\',value: Math.round(Math.random()*1000)},
            {name: \'屯昌县\',value: Math.round(Math.random()*1000)},
            {name: \'定安县\',value: Math.round(Math.random()*1000)},
            {name: \'保亭黎族苗族自治县\',value: Math.round(Math.random()*1000)},
            {name: \'五指山市\',value: Math.round(Math.random()*1000)}
        ]
    };
    option.legend = {
        x:\'right\',
        data:[\'居民建档数\']
    };
    option.dataRange = {
        orient: \'horizontal\',
        x: \'right\',
        min: 0,
        max: 1000,
        color:[\'orange\',\'yellow\'],
        text:[\'高\',\'低\'],           // 文本，默认为数值文本
        splitNumber:0
    };
    myChart.setOption(option, true);//显示省地图
});
 
//选择地级市的单击事件
myChart.on(echarts.config.EVENT.CLICK, function (param){
   var seriesName=param.seriesName;
   if(seriesName.trim()=="居民建档数"||seriesName.trim()==""){//由于全国地图和省地图都要触发这个事                                                                                                         件，所以要判断是省还是地级市
   alert(param.name);//地级市的名字
   }
});
    </script>
  </body>
</html>

View Code

效果：

4、highchart之chart.zoomType--实现指定区域放大

指定此图是沿着什么轴进行放大，例如zoomType: \'xy\'沿着X轴和Y轴放大，依次类推

5、highchart之x轴分类过多，以缩略跨值显示时，plotOptions中dataLabels无法显示多值问题

正常图: 异常图:

处理代码：

plotOptions: {
     line: {
        dataLabels: {
            enabled: true,
            formatter: function() {
            // 根据条件设置要显示的值 
                if(表达式){
                     return xxx;
                }
            },
            rotation: 1 // 设置下倾斜度，多值问题解决
        },
        enableMouseTracking: true
    }
}

6、echarts之全国省市县地图扩展

　　项目所迫，要求做市及区的地图，echarts官方例子...咳...咳咳...，╮(╯▽╰)╭看了良久，一脸蒙逼......

　　折腾良久，终于出来了能看的扩展图，不多说了，详情看代码注解。（去掉标色的区域，其实和普通图表没啥区别）

<%@ page contentType="text/html; charset=utf-8" isELIgnored="false"%>
<html>
<head>
<title>市级地图</title>
</head>
<body>
    <div id="main" style="height: 400px;"></div>
</body>
    <!-- 由于这是jsp所以取得项目的路径引入两个关键js即可 -->
    <script src="<%=path %>/js/jquery/jquery-1.8.3.min.js"></script>
    <script src="<%=path %>/ts/build/dist/echarts.js"> </script>
    <script type="text/javascript">
         // 路径配置
        require.config({
            paths: {
                echarts: \'<%=path %>/js/echarts/build/dist\'
            }
        });
        
        // 使用
        require(
            [
                \'echarts\',
                \'echarts/chart/map\' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById(\'main\')); 
                // 这里名字对应的编码可以自己定义啦，只要对应正确的geoJson文件就行
                var cityMap = {
                     "汕尾市": "120100",
                     "广州市": "440100"
                 };
　　　　　　　　　　/* ***** 加载扩展的地图到echarts的 
　　　　　　　　　　　　　　　mapGeoData对象中，如此series.mapType才能取得扩展的地图
　　　　　　　　　　*/
                 var curIndx = 0;
                 var mapType = [];
　　　　　　　　　　// echart 默认会加载世界地图和中国地图，这里是获取已经加载的地图数据对象
                 var mapGeoData = require(\'echarts/util/mapData/params\');
                 console.log(mapGeoData)
                 for (var city in cityMap) {
                     mapType.push(city);
                     // 自定义扩展图表类型，这里的geoJson是盗用echarts官方的数据
                     mapGeoData.params[city] = {
                         getGeoJson: (function (c) {
                             var geoJsonName = cityMap[c];
                             return function (callback) {
　　　　　　　　　　　　　　　　　　　// 为什么要写这个路径，╭(╯3╰)╮没办法啊，geoJson放在这下面啊，当然放别的路径也可以
                                 $.getJSON(\'<%=path %>/js/echarts/geoJson/china-main-city/\' + geoJsonName + \'.json\', callback);
                             }
                         })(city)
                     }
                 }
　　　　　　　　　　// ******  end ******

　　　　　　　　　　// 这两个玩意不要好像也没事，等有时间在深究
                 var ecConfig = require(\'echarts/config\');
                 var zrEvent = require(\'zrender/tool/event\');
                 
                 option = {
                     title: {
                         text : \'\',
                     },
                     tooltip : {
                         trigger: \'item\',
                         formatter: \'{b}\'
                     },
                       dataRange: {
                           min: 0,
                           max: 2500,
                           x: \'left\',
                           y: \'bottom\',
                           text:[\'高\',\'低\'],           // 文本，默认为数值文本
                           calculable : true,
                           color:[\'#ff0000\',\'#FFFF00\']
                       },
                     series : [
                         {
                             name: \'\',
                             type: \'map\',
                             mapType: \'广州市\',
                             selectedMode : \'single\',
                             itemStyle:{
                                 normal:{label:{show:true}},
                                 emphasis:{label:{show:true}}
                             },
                             data:[
                                 {name: \'花都区\', value: Math.round(Math.random()*1000)},
                                 {name: \'从化市\', value: Math.round(Math.random()*1000)},
                                 {name: \'增城市\', value: Math.round(Math.random()*100)},
                                 {name: \'白云区\', value: Math.round(Math.random()*1000)},
                                 {name: \'萝岗区\', value: Math.round(Math.random()*1000)},
                                 {name: \'天河区\', value: Math.round(Math.random()*1000)},
                                 {name: \'越秀区\', value: Math.round(Math.random()*100)},
                                 {name: \'荔湾区\', value: Math.round(Math.random()*1000)},
                                 {name: \'海珠区\', value: Math.round(Math.random()*1000)},
                                 {name: \'黄埔区\', value: Math.round(Math.random()*100)},
                                 {name: \'番禺区\', value: Math.round(Math.random()*1000)},
                                 {name: \'南沙区\', value: Math.round(Math.random()*1000)}
                             ]
                         }
                     ]
                 };
                 // 为echarts对象加载数据 
                myChart.setOption(option); 
                try{
                    window.addEventListener(\'resize\', function () {
                        myChart.resize();// 图表自适应窗口
                    });
                }catch(e){}
            }
        );
    </script>
</html>

单文件引入版：

var mapGeoData = echarts.util.mapData.params; 理解透这句话，单文件引入方式基本也就理解透彻了

<%@ page contentType="text/html; charset=utf-8" isELIgnored="false"%>
<%
    String path = request.getContextPath();
%><html>
<head>
<title>市级地图</title>
</head>
<body>
    <div class="container" >
        <div class="row">
            <div id="main" style="height: 400px;"></div>
        </div>
    </div>
</body>
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<%=path %>/js/jquery/jquery-1.8.3.min.js"></script>
    <script src="<%=path %>/js/echarts/build/dist/echarts-all.js"> </script>
    <script type="text/javascript">
     // 单文件引入方式初始化
         // 基于准备好的dom，初始化echarts图表
         var myChart = echarts.init(document.getElementById(\'main\')); 
         
         var cityMap = {
              "汕尾市": "120100",
              "广州市": "440100"
          };
          
          console.log(echarts);
          var curIndx = 0;
          var mapType = [];
          // 通过console.log(echarts)，查看到地图数据对象
          var mapGeoData = echarts.util.mapData.params;
          console.log(mapGeoData);
          for (var city in cityMap) {
              mapType.push(city);
              // 自定义扩展图表类型
              mapGeoData.params[city] = {
                  getGeoJson: (function (c) {
                      var geoJsonName = cityMap[c];
                      return function (callback) {
                          $.getJSON(\'<%=path %>/js/echarts/geoJson/china-main-city/\' + geoJsonName + \'.json\', callback);
                      }
                  })(city)
              }
          }
          option = {
               title: {
                   text : \'\',
               },
               tooltip : {
                   trigger: \'item\',
                   formatter: \'{b}\'
               },
               dataRange: {
                   min: 0,
                   max: 2500,
                   x: \'left\',
                   y: \'bottom\',
                   text:[\'高\',\'低\'],           // 文本，默认为数值文本
                   calculable : true,
                   color:[\'#ff0000\',\'#FFFF00\']
               },
               series : [
                   {
                       name: \'\',
                       type: \'map\',
                       mapType: \'广州市\',
                       selectedMode : \'single\',
                       itemStyle:{
                           normal:{label:{show:true}},
                           emphasis:{label:{show:true}}
                       },
                       data:[
                           {name: \'花都区\', value: Math.round(Math.random()*1000)},
                           {name: \'从化市\', value: Math.round(Math.random()*1000)},
                           {name: \'增城市\', value: Math.round(Math.random()*100)},
                           {name: \'白云区\', value: Math.round(Math.random()*1000)},
                           {name: \'萝岗区\', value: Math.round(Math.random()*1000)},
                           {name: \'天河区\', value: Math.round(Math.random()*1000)},
                           {name: \'越秀区\', value: Math.round(Math.random()*100)},
                           {name: \'荔湾区\', value: Math.round(Math.random()*1000)},
                           {name: \'海珠区\', value: Math.round(Math.random()*1000)},
                           {name: \'黄埔区\', value: Math.round(Math.random()*100)},
                           {name: \'番禺区\', value: Math.round(Math.random()*1000)},
                           {name: \'南沙区\', value: Math.round(Math.random()*1000)}
                       ]
                   }
               ]
           };
          // 为echarts对象加载数据 
          myChart.setOption(option); 
      try{
         window.addEventListener(\'resize\', function () {
             myChart.resize();
         });
     }catch(e){}
    </script>
</html>

View Code

7、echarts之线型图没有连接线问题

好好的线图，突然没了线，是不是感觉整个人生都灰暗了，那么接下来便是改变我们人生色彩的时候啦。

data: [
        {
           "name": "需求导入", 
           "value": null
        },
　　　　......

原因就是value:null导致，改成value:""就解决了

8、echarts之map边界线和区域颜色

series : [
                   {
                       name: \'\',
                       type: \'map\',
                       mapType: \'广州市\',
                       selectedMode : \'single\',
                       itemStyle:{
                           normal:{
                                   borderColor: \'#ffffff\',// 边界线颜色设置
                                   label:{show:true},
                                   areaStyle:{color:\'#00FF33\'}// 区域颜色设置
                           },
                           emphasis:{label:{show:true}}
                       },
                       data:[
                       ]
                   }
               ]

9、echarts x轴文字垂直显示

在axisLabel下添加属性：

formatter:function(val){
    return val.split("").join("\n");
}

10、echarts x轴文字点击事件

axiLabel设置可被点击：

xAxis : [ {
             type : \'category\',
             splitLine : {
                  show : false
             },
             data : staffName,  
             axisLabel : {clickable: true }    
} ],

11、echarts 绘图美化

优化部分

option = {
    yAxis : [
        {
            type : \'value\',
            name : \'单位（%）\',
            splitLine:{
　　　　　　　　　　show:false,
                 lineStyle:{type: \'dashed\',width:0}
            },
            splitArea:{
                show: true,
                areaStyle:{color:[\'rgba(255, 255, 255, 0.5)\',\'rgba(238, 232, 170, 0.5)\']}
            },
            axisLabel:{
                formatter: \'{value}\',
                textStyle:{baseline: \'middle\'} // y轴 name有值时，防止最大和最小值刻度间距异常
            }
        }
    ],
    xAxis:[{
        splitLine :{
            show:true,
            lineStyle:{
                type: \'dashed\',
                width:1
            }
        },
        ... ...
    }]
    ... ...
};

效果图：

12、highcharts 之fontWeight ie8兼容问题

如下在ie8的时候会报错（无法获取fontWeight属性）：

title: {
           text: \'各延期时长项目数量分布\',
           subtext:\' \',
           style:{fontFamily : \'微软雅黑\',fontSize: 13,fontWeight: \'normal\'}
}

兼容写法（fontWeight属性改写成数字）：

title: {
           text: \'各延期时长项目数量分布\',
           subtext:\' \',
           style:{fontFamily : \'微软雅黑\',fontSize: 13,fontWeight: 400}
}

13、echarts设置legend项等长

legend: {
  formatter: [\'{a|{name}}\'].join(\'\n\'),
  textStyle: {
      rich: {
          a: {
            width: 100
          }
      }  
  }  
}