百度Echarts-免费的商业产品图表库

时间:2022-08-22 23:53:00

官方网站http://echarts.baidu.com/

民间网站http://fansunion.cn/echarts/

下载地址https://codeload.github.com/ecomfe/echarts/zip/1.3.1

API&Dochttp://echarts.baidu.com/doc/doc.html

简要介绍

ECharts (Enterprise Charts 商业产品图表库)

提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、地图、力导向布局图,同时支持任意维度的堆积和多图表混合展现。

用法示例

1. 在线访问

  http://echarts.baidu.com/doc/example.html

2. 下载查看

 下载包的 doc/example目录 有很多示例。

小试牛刀

官方的例子,我看了下。引用了很多js和css文件,不够简明。

而我想要的是那种非常简介的或者是核心步骤的Example,于是我自己写了几个。

Line&折线图

百度Echarts-免费的商业产品图表库

<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
 <title>Echarts图表Demo</title>
 <script src="js/esl/esl.js"></script>
 <script src="js/jquery.js"></script>
 <script src="js/echarts.js"></script>
 
 <script type="text/javascript">

 var fileLocation ='js/echarts';
require.config({
   
    paths:{
         echarts: fileLocation,
            'echarts/chart/line': fileLocation,
            'echarts/chart/bar': fileLocation,
            'echarts/chart/scatter': fileLocation,
            'echarts/chart/k': fileLocation,
            'echarts/chart/pie': fileLocation,
            'echarts/chart/radar': fileLocation,
            'echarts/chart/map': fileLocation,
            'echarts/chart/chord': fileLocation,
            'echarts/chart/force': fileLocation
    }
});

// 作为入口
require(
    [
        'echarts',
        'echarts/chart/line',
        'echarts/chart/bar',
        'echarts/chart/scatter',
        'echarts/chart/k',
        'echarts/chart/pie',
        'echarts/chart/radar',
        'echarts/chart/force',
        'echarts/chart/chord',
    ],
    
    displayChart
    
);

function displayChart(ec) {
         //折线图
        var lineChart = ec.init(document.getElementById('line'));
        var lineChartOtion = getLineChartOption();    
        lineChart.setOption(lineChartOtion);
    }

    //获得Line图的选项和数据
    function getLineChartOption(){
    var lineChartOption={
    title : {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : true,
            dataView : {readOnly: false},
            magicType:['line', 'bar'],
            restore : true,
            saveAsImage : true
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            },
            splitArea : {show : true}
        }
    ],
    series : [
        {
            name:'最高气温',
            type:'line',
            itemStyle: {
                normal: {
                    lineStyle: {
                        shadowColor : 'rgba(0,0,0,0.4)'
                    }
                }
            },
            data:[11, 11, 15, 13, 12, 13, 10]
        },
        {
            name:'最低气温',
            type:'line',
            itemStyle: {
                normal: {
                    lineStyle: {
                        shadowColor : 'rgba(0,0,0,0.4)'
                    }
                }
            },
            data:[-2, 1, 2, 5, 3, 2, 0]
        }
    ]
};
return lineChartOption;
    }

</script>
</head>

<body>

<div id="line" style="width:400px;height:300px;">  </div>

</body>
</html>


Bar&柱状图

百度Echarts-免费的商业产品图表库

<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
 <title>Echarts图表Demo</title>
 <script src="js/esl/esl.js"></script>
 <script src="js/jquery.js"></script>
 <script src="js/echarts.js"></script>
 
 <script type="text/javascript">

 var fileLocation ='js/echarts';
require.config({
   
    paths:{
         echarts: fileLocation,
            'echarts/chart/line': fileLocation,
            'echarts/chart/bar': fileLocation,
            'echarts/chart/scatter': fileLocation,
            'echarts/chart/k': fileLocation,
            'echarts/chart/pie': fileLocation,
            'echarts/chart/radar': fileLocation,
            'echarts/chart/map': fileLocation,
            'echarts/chart/chord': fileLocation,
            'echarts/chart/force': fileLocation
    }
});

// 作为入口
require(
    [
        'echarts',
        'echarts/chart/line',
        'echarts/chart/bar',
        'echarts/chart/scatter',
        'echarts/chart/k',
        'echarts/chart/pie',
        'echarts/chart/radar',
        'echarts/chart/force',
        'echarts/chart/chord',
    ],
    
    displayChart
    
);

function displayChart(ec) {
        //饼图
        var pieChart = ec.init(document.getElementById('pie'));
        var pieChartOtion = getPieChartOption();    
        pieChart.setOption(pieChartOtion);
    }
    
    //获得Pie图的选项和数据
    function getPieChartOption(){
      var pieChartOption = {
    tooltip : {
        show: true,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
    },
    toolbox: {
        show : true,
        feature : {
            mark : true,
            dataView : {readOnly: false},
            restore : true,
            saveAsImage : true
        }
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            center : ['35%', 200],
            radius : 80,
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner',
                        formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + ' %'},
                    },
                    labelLine : {
                        show : false
                    }
                }
            },
            data:[
                {value:335, name:'直达'},
                {value:679, name:'营销广告'},
                {
                    value:1548,
                    name:'搜索引擎',
                    itemStyle : {
                        normal : {
                            label : {
                                show : false
                            }
                        },
                        emphasis : {
                            label : {
                                show : true,
                                formatter : "{b} : {d}%",
                                position : 'inner'
                            }
                        }
                    }
                }
            ]
        },
        {
            name:'访问来源',
            type:'pie',
            center : ['35%', 200],
            radius : [110, 140],
            data:[
                {value:335, name:'直达'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {
                    value:1048,
                    name:'百度',
                    itemStyle : {
                        normal : {
                            color : (function(){
                                var zrColor = require('zrender/tool/color');
                                return zrColor.getRadialGradient(
                                    300, 200, 110, 300, 200, 140,
                                    [[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']]
                                )
                            })(),
                            label : {
                                textStyle : {
                                    color : 'rgba(30,144,255,0.8)',
                                    align : 'center',
                                    baseline : 'middle',
                                    fontFamily : '微软雅黑',
                                    fontSize : 30,
                                    fontWeight : 'bolder'
                                }
                            },
                            labelLine : {
                                length : 40,
                                lineStyle : {
                                    color : '#f0f',
                                    width : 3,
                                    type : 'dotted'
                                }
                            }
                        }
                    }
                },
                {value:251, name:'谷歌'},
                {
                    value:102,
                    name:'必应',
                    itemStyle : {
                        normal : {
                            label : {
                                show : false
                            },
                            labelLine : {
                                show : false
                            }
                        },
                        emphasis : {
                            label : {
                                show : true
                            },
                            labelLine : {
                                show : true,
                                length : 50
                            }
                        }
                    }
                },
                {value:147, name:'其他'}
            ]
        },
        {
            name:'访问来源',
            type:'pie',
            startAngle: 90,
            center : ['75%', 200],
            radius : [80, 120],
            itemStyle : {
                normal : {
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    color: (function(){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getRadialGradient(
                            650, 200, 80, 650, 200, 120,
                            [[0, 'rgba(255,255,0,1)'],[1, 'rgba(255,0,0,1)']]
                        )
                    })(),
                    label : {
                        show : true,
                        position : 'center',
                        formatter : "{d}%",
                        textStyle : {
                            color : 'red',
                            fontSize : '30',
                            fontFamily : '微软雅黑',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                {value:335, name:'直达'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
                    
    
    
    return pieChartOption;
    }
</script>
</head>

<body>

<div id="pie" style="width:400px;height:300px;">  </div>

</body>
</html>


Pie&饼状图

百度Echarts-免费的商业产品图表库

<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
 <title>Echarts图表Demo</title>
 <script src="js/esl/esl.js"></script>
 <script src="js/jquery.js"></script>
 <script src="js/echarts.js"></script>
 
 <script type="text/javascript">

 var fileLocation ='js/echarts';
require.config({
   
    paths:{
         echarts: fileLocation,
            'echarts/chart/line': fileLocation,
            'echarts/chart/bar': fileLocation,
            'echarts/chart/scatter': fileLocation,
            'echarts/chart/k': fileLocation,
            'echarts/chart/pie': fileLocation,
            'echarts/chart/radar': fileLocation,
            'echarts/chart/map': fileLocation,
            'echarts/chart/chord': fileLocation,
            'echarts/chart/force': fileLocation
    }
});

// 作为入口
require(
    [
        'echarts',
        'echarts/chart/line',
        'echarts/chart/bar',
        'echarts/chart/scatter',
        'echarts/chart/k',
        'echarts/chart/pie',
        'echarts/chart/radar',
        'echarts/chart/force',
        'echarts/chart/chord',
    ],
    
    displayChart
    
);

function displayChart(ec) {
        //柱状图
        var barChart = ec.init(document.getElementById('bar'));
        var barChartOtion = getBarChartOption();    
        barChart.setOption(barChartOtion);
    }
    
    //获得Bar图的选项和数据
    function getBarChartOption(){
    var option = {
    tooltip : {
        show: true,
        trigger: 'item'
    },
    legend: {
        data:['邮件营销','联盟广告','直接访问','搜索引擎']
    },
    toolbox: {
        show : true,
        feature : {
            mark : true,
            dataView : {readOnly: false},
            magicType:['line', 'bar'],
            restore : true,
            saveAsImage : true
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitArea : {show : true}
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'bar',
            itemStyle: {        // 系列级个性化样式,纵向渐变填充
                normal: {
                    borderColor:'red',
                    color : (function(){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 400, 0, 300,
                            [[0, 'green'],[1, 'yellow']]
                        )
                    })()
                },
                emphasis: {
                    borderWidth: 5,
                    borderColor:'green',
                    color: (function(){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 400, 0, 300,
                            [[0, 'red'],[1, 'orange']]
                        )
                    })(),
                    label : {
                        show : true,
                        position : 'top',
                        formatter : "{a} {b} {c}",
                        textStyle : {
                            color: 'blue'
                        }
                    }
                }
            },
            data:[220, 232, 101, 234, 190, 330, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '总量',
            data:[120, '-', 451, 134, 190, 230, 110]
        },
        {
            name:'直接访问',
            type:'bar',
            stack: '总量',
            itemStyle: {                // 系列级个性化
                normal: {
                    borderWidth: 10,
                    borderColor:'tomato',
                    color: 'red'
                },
                emphasis: {
                    borderColor:'red',
                    color: 'blue'
                }
            },
            data:[
                320, 332, '-', 334,
                {
                    value: 390,
                    symbolSize : 10,   // 数据级个性化
                    itemStyle: {
                        normal: {
                            color :'lime'
                        },
                        emphasis: {
                            color: 'skyBlue'
                        }
                    }
                },
                330, 320
            ]
        },
        {
            name:'搜索引擎',
            type:'bar',
            barWidth: 40,                   // 系列级个性化,柱形宽度
            itemStyle: {
                normal: {                   // 系列级个性化,横向渐变填充
                    borderRadius: 5,
                    color : (function(){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 0, 1000, 0,
                            [[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']]
                        )
                    })(),
                    label : {
                        show : true,
                        textStyle : {
                            fontSize : '20',
                            fontFamily : '微软雅黑',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                620, 732,
                {
                    value: 701,
                    itemStyle : { normal: {label : {position: 'inside'}}}
                },
                734, 890, 930, 820]
        }
    ]
};

return option;
                    
    }
    
    
</script>
</head>

<body>

<div id="bar" style="width:400px;height:300px;">  </div>

</body>
</html>

不足之处

1.自己写的示例,样式不太好

2.图表展示流程不完善

官方示例 附录:一个直观的示例

 
// 图表实例化------------------
var echarts = require('echarts');
require('echarts/chart/line');  // 图表按需加载,需要主动require
var myChart = echarts.init(document.getElementById('main'));

// ajax getting data...............

// 过渡---------------------
myChart.showLoading({
    text: '正在努力的读取数据中...',    //loading话术
});

// ajax return
myChart.hideLoading();

// 图表使用-------------------
var option = {
    legend: {                                   // 图例配置
        padding: 5,                             // 图例内边距,单位px,默认上下左右内边距为5
        itemGap: 10,                            // Legend各个item之间的间隔,横向布局时为水平间隔,纵向布局时为纵向间隔
        data: ['ios', 'android']
    },
    tooltip: {                                  // 气泡提示配置
        trigger: 'item',                        // 触发类型,默认数据触发,可选为:'axis'
    },
    xAxis: [                                    // 直角坐标系中横轴数组
        {
            type: 'category',                   // 坐标轴类型,横轴默认为类目轴,数值轴则参考yAxis说明
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }
    ],
    yAxis: [                                    // 直角坐标系中纵轴数组
        {
            type: 'value',                      // 坐标轴类型,纵轴默认为数值轴,类目轴则参考xAxis说明
            boundaryGap: [0.1, 0.1],            // 坐标轴两端空白策略,数组内数值代表百分比
            splitNumber: 4                      // 数值轴用,分割段数,默认为5
        }
    ],
    series: [
        {
            name: 'ios',                        // 系列名称
            type: 'line',                       // 图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
            data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
        },
        {
            name: 'android',                    // 系列名称
            type: 'line',                       // 图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
            data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
        }
    ]
};
myChart.setOption(option);

...

// 增加些数据------------------
option.legend.data.push('win');
option.series.push({
        name: 'win',                            // 系列名称
        type: 'line',                           // 图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
        data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);

...

// 图表清空-------------------
myChart.clear();

// 图表释放-------------------
myChart.dispose();

3.浏览器兼容性问题

上面3个示例,在IE和QQ等IE系列浏览器,无法查看。

在Firefox上可以正常查看。

网页错误详细信息(IE)

用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C)
时间戳: Thu, 28 Nov 2013 07:52:49 UTC


消息: 'undefined' 为空或不是对象
行: 1571
字符: 9
代码: 0
URI: file:///G:/WebCenter/图表/echarts-demo/js/esl/esl.js


问题改进办法


a.html第一行加上 <!DOCTYPE html>。

  解决浏览器兼容性问题。不然IE浏览器报错。

b.调整div和script脚本的相对位置。

<div id="chinaMap" style="width:400px;height:300px;">  </div>
 <script type="text/javascript">

  echarts脚本

 </script>

c.减少js配置。

模块化自动加载引入了els.js之后,不需要再手动引入echarts.js等脚本文件。

d.美化图的展现。

  修改div的宽度和高度。

  还可以设置 chart的option参数。

改进后的示例

上面的用法示例,是我自己参照官方的例子制作的,问题很多。

向相关同事请教后,解决了遇到的问题。

再次整理如下。

Line&折线图

<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
 <title>Echarts图表Demo</title>
 <script src="js/esl/esl.js"></script>
</head>

<body>

<div id="line" style="width:800px;height:600px;">  </div>
 <script type="text/javascript">

 var fileLocation ='js/echarts';
require.config({
   
    paths:{
          echarts: fileLocation,
            'echarts/chart/line': fileLocation,
            'echarts/chart/bar': fileLocation,
            'echarts/chart/pie': fileLocation
    }
});

// 作为入口
require(
    [
        'echarts',
        'echarts/chart/line'
    ],
    
    displayChart
    
);

function displayChart(ec) {
         //折线图
        var lineChart = ec.init(document.getElementById('line'));
        var lineChartOtion = getLineChartOption();    
        lineChart.setOption(lineChartOtion);
    }

    //获得Line图的选项和数据
    function getLineChartOption(){
    var lineChartOption={
    title : {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : true,
            dataView : {readOnly: false},
            magicType:['line', 'bar'],
            restore : true,
            saveAsImage : true
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            },
            splitArea : {show : true}
        }
    ],
    series : [
        {
            name:'最高气温',
            type:'line',
            itemStyle: {
                normal: {
                    lineStyle: {
                        shadowColor : 'rgba(0,0,0,0.4)'
                    }
                }
            },
            data:[11, 11, 15, 13, 12, 13, 10]
        },
        {
            name:'最低气温',
            type:'line',
            itemStyle: {
                normal: {
                    lineStyle: {
                        shadowColor : 'rgba(0,0,0,0.4)'
                    }
                }
            },
            data:[-2, 1, 2, 5, 3, 2, 0]
        }
    ]
};
return lineChartOption;
    }

</script>
</body>
</html>

百度Echarts-免费的商业产品图表库

Bar&柱状图

<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
 <title>Echarts图表Demo</title>
 <script src="js/esl/esl.js"></script>
</head>

<body>

<div id="bar" style="width:800px;height:600px;">  </div>
<script type="text/javascript">

 var fileLocation ='js/echarts';
require.config({
   
    paths:{
         echarts: fileLocation,
            'echarts/chart/line': fileLocation,
            'echarts/chart/bar': fileLocation,
            'echarts/chart/pie': fileLocation
    }
});

// 作为入口
require(
    [
        'echarts',
        'echarts/chart/bar'
    ],
    
    displayChart
    
);

function displayChart(ec) {
        //柱状图
        var barChart = ec.init(document.getElementById('bar'));
        var barChartOtion = getBarChartOption();    
        barChart.setOption(barChartOtion);
    }
    
    //获得Bar图的选项和数据
    function getBarChartOption(){
    var option = {
    tooltip : {
        show: true,
        trigger: 'item'
    },
    legend: {
        data:['邮件营销','联盟广告','直接访问','搜索引擎']
    },
    toolbox: {
        show : true,
        feature : {
            mark : true,
            dataView : {readOnly: false},
            magicType:['line', 'bar'],
            restore : true,
            saveAsImage : true
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            splitArea : {show : true}
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'bar',
            itemStyle: {        // 系列级个性化样式,纵向渐变填充
                normal: {
                    borderColor:'red',
                    color : (function(){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 400, 0, 300,
                            [[0, 'green'],[1, 'yellow']]
                        )
                    })()
                },
                emphasis: {
                    borderWidth: 5,
                    borderColor:'green',
                    color: (function(){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 400, 0, 300,
                            [[0, 'red'],[1, 'orange']]
                        )
                    })(),
                    label : {
                        show : true,
                        position : 'top',
                        formatter : "{a} {b} {c}",
                        textStyle : {
                            color: 'blue'
                        }
                    }
                }
            },
            data:[220, 232, 101, 234, 190, 330, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '总量',
            data:[120, '-', 451, 134, 190, 230, 110]
        },
        {
            name:'直接访问',
            type:'bar',
            stack: '总量',
            itemStyle: {                // 系列级个性化
                normal: {
                    borderWidth: 10,
                    borderColor:'tomato',
                    color: 'red'
                },
                emphasis: {
                    borderColor:'red',
                    color: 'blue'
                }
            },
            data:[
                320, 332, '-', 334,
                {
                    value: 390,
                    symbolSize : 10,   // 数据级个性化
                    itemStyle: {
                        normal: {
                            color :'lime'
                        },
                        emphasis: {
                            color: 'skyBlue'
                        }
                    }
                },
                330, 320
            ]
        },
        {
            name:'搜索引擎',
            type:'bar',
            barWidth: 40,                   // 系列级个性化,柱形宽度
            itemStyle: {
                normal: {                   // 系列级个性化,横向渐变填充
                    borderRadius: 5,
                    color : (function(){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 0, 1000, 0,
                            [[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']]
                        )
                    })(),
                    label : {
                        show : true,
                        textStyle : {
                            fontSize : '20',
                            fontFamily : '微软雅黑',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                620, 732,
                {
                    value: 701,
                    itemStyle : { normal: {label : {position: 'inside'}}}
                },
                734, 890, 930, 820]
        }
    ]
};

return option;
                    
    }
    
    
</script>
</body>
</html>

百度Echarts-免费的商业产品图表库

Pie&饼状图

<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
 <title>Echarts图表Demo</title>
 <script src="js/esl/esl.js"></script>

</head>

<body>

<div id="pie" style="width:800px;height:600px;">  </div>
 <script type="text/javascript">

 var fileLocation ='js/echarts';
require.config({
   
    paths:{
         echarts: fileLocation,
            'echarts/chart/line': fileLocation,
            'echarts/chart/bar': fileLocation,
            'echarts/chart/pie': fileLocation
 
    }
});

// 作为入口
require(
    [
        'echarts',
        'echarts/chart/pie'
    ],
    
    displayChart
    
);

function displayChart(ec) {
        //饼图
        var pieChart = ec.init(document.getElementById('pie'));
        var pieChartOtion = getPieChartOption();    
        pieChart.setOption(pieChartOtion);
    }
    
    //获得Pie图的选项和数据
    function getPieChartOption(){
      var pieChartOption = {
    tooltip : {
        show: true,
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
    },
    toolbox: {
        show : true,
        feature : {
            mark : true,
            dataView : {readOnly: false},
            restore : true,
            saveAsImage : true
        }
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            center : ['35%', 200],
            radius : 80,
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner',
                        formatter : function(a,b,c,d) {return (d - 0).toFixed(0) + ' %'},
                    },
                    labelLine : {
                        show : false
                    }
                }
            },
            data:[
                {value:335, name:'直达'},
                {value:679, name:'营销广告'},
                {
                    value:1548,
                    name:'搜索引擎',
                    itemStyle : {
                        normal : {
                            label : {
                                show : false
                            }
                        },
                        emphasis : {
                            label : {
                                show : true,
                                formatter : "{b} : {d}%",
                                position : 'inner'
                            }
                        }
                    }
                }
            ]
        },
        {
            name:'访问来源',
            type:'pie',
            center : ['35%', 200],
            radius : [110, 140],
            data:[
                {value:335, name:'直达'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {
                    value:1048,
                    name:'百度',
                    itemStyle : {
                        normal : {
                            color : (function(){
                                var zrColor = require('zrender/tool/color');
                                return zrColor.getRadialGradient(
                                    300, 200, 110, 300, 200, 140,
                                    [[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']]
                                )
                            })(),
                            label : {
                                textStyle : {
                                    color : 'rgba(30,144,255,0.8)',
                                    align : 'center',
                                    baseline : 'middle',
                                    fontFamily : '微软雅黑',
                                    fontSize : 30,
                                    fontWeight : 'bolder'
                                }
                            },
                            labelLine : {
                                length : 40,
                                lineStyle : {
                                    color : '#f0f',
                                    width : 3,
                                    type : 'dotted'
                                }
                            }
                        }
                    }
                },
                {value:251, name:'谷歌'},
                {
                    value:102,
                    name:'必应',
                    itemStyle : {
                        normal : {
                            label : {
                                show : false
                            },
                            labelLine : {
                                show : false
                            }
                        },
                        emphasis : {
                            label : {
                                show : true
                            },
                            labelLine : {
                                show : true,
                                length : 50
                            }
                        }
                    }
                },
                {value:147, name:'其他'}
            ]
        },
        {
            name:'访问来源',
            type:'pie',
            startAngle: 90,
            center : ['75%', 200],
            radius : [80, 120],
            itemStyle : {
                normal : {
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    color: (function(){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getRadialGradient(
                            650, 200, 80, 650, 200, 120,
                            [[0, 'rgba(255,255,0,1)'],[1, 'rgba(255,0,0,1)']]
                        )
                    })(),
                    label : {
                        show : true,
                        position : 'center',
                        formatter : "{d}%",
                        textStyle : {
                            color : 'red',
                            fontSize : '30',
                            fontFamily : '微软雅黑',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                {value:335, name:'直达'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
                    
    
    
    return pieChartOption;
    }
</script>
</body>
</html>

百度Echarts-免费的商业产品图表库

ChinaMap&中国地图

<!DOCTYPE html>
<html>
<head>
<meta content='text/html;charset=utf-8' http-equiv='content-type'>
 <title>Echarts图表Demo</title>
 <script src="js/esl/esl.js"></script>
</head>

<body>

<div id="chinaMap" style="width:800px;height:600px;">  </div>
 <script type="text/javascript">

 var fileLocation ='js/echarts-map';
    require.config({
       
        paths:{
             'echarts': fileLocation,
             'echarts/chart/map': fileLocation       
        }
    });

// 作为入口
require(
    [
        'echarts',
         'echarts/chart/map'
    ],
    displayChart   
);

function displayChart(ec) {
         chinaMapChart = ec.init(document.getElementById('chinaMap'));
        chinaMapChartOtion = getChinaMapChartOption();    
        chinaMapChart.setOption(chinaMapChartOtion);
    }
    
    //获得Pie图的选项和数据
    function getChinaMapChartOption(){
     var  chinaMapChartOption = {
    tooltip : {
        trigger: 'item'
    },
    toolbox: {
        show : true,
        orient: 'vertical',
        x:'right',
        y:'center',
        feature : {
            mark : true,
            dataView : {readOnly: false}
        }
    },
    series : [
        {
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            name: '选择器',
            type: 'map',
            mapType: 'china',
            mapLocation: {
                x: 'left',
                width: 500
            },
            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: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}
            ]
        }
    ],
    animation: false
};
var ecConfig = require('echarts/config');

chinaMapChart.on(ecConfig.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;
        }
    }
    if (typeof selectedProvince == 'undefined') {
        option.series.splice(1);
        option.legend = null;
        option.dataRange = null;
        chinaMapChart.setOption(option, true);
        return;
    }
    option.series[1] = {
        name: '随机数据',
        type: 'map',
        mapType: selectedProvince,
        itemStyle:{
            normal:{label:{show:true}},
            emphasis:{label:{show:true}}
        },
        mapLocation: {
            x: 500
        },
        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)}
        ]
    };
    option.legend = {
        x:'right',
        data:['随机数据']
    };
    option.dataRange = {
        orient: 'horizontal',
        x: 'right',
        min: 0,
        max: 1000,
        color:['orange','yellow'],
        text:['高','低'],           // 文本,默认为数值文本
        splitNumber:0
    };
    chinaMapChart.setOption(option, true);
})
                    
    
    
    return chinaMapChartOption;
    }
</script>
</body>
</html>


百度Echarts-免费的商业产品图表库

下载地址http://download.csdn.net/detail/fansunion/6629107(修改后的示例)


原文链接http://FansUnion.cn/articles/3319(小雷网-FansUnion.cn)