FansUnion

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

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

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

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

API&Doc：http://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&折线图

<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&柱状图

<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&饼状图

<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脚本的相对位置。

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>

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>

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>

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>

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

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

你可能感兴趣的:(免费,百度,图表,ECharts,商业产品图表库)

扫地机类清洁产品之直流无刷电机控制悟空胆好小清洁服务机器人单片机人工智能
扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码说私域人工智能小程序
摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
抖音乐买买怎么加入赚钱?赚钱方法是什么测评君高省
你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
网易严选官方旗舰店，优质商品，卓越服务高省_飞智666600
网易严选官方旗舰店是网易旗下的一家电商平台，以提供优质商品和卓越服务而闻名。作为一名SEO优化师，我将为您详细介绍网易严选官方旗舰店，并重点强调其特点和优势。大家好！我是高省APP最大团队&联合创始人飞智导师。相较于其他返利app，高省APP的佣金更高，模式更好，最重要的是，终端用户不会流失！高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几
水泥质量纠纷案代理词徐宝峰律师
贵州领航建设有限公司诉贵州纳雍隆庆乌江水泥有限公司产品质量纠纷案代理词尊敬的审判长、审判员：贵州千里律师事务所接受被告贵州纳雍隆庆乌江水泥有限公司的委托，指派我担任其诉讼代理人，参加本案的诉讼活动。下面，我结合本案事实和相关法律规定发表如下代理意见，供合议庭评议案件时参考：原告应当举证证明其遭受的损失与被告生产的水泥质量的因果关系。首先水泥是一种粉状水硬性无机胶凝材料。加水搅拌后成浆体，能在空气中
腾讯云技术深度探索：构建高效云原生微服务架构我的运维人生云原生架构腾讯云运维开发技术共享
腾讯云技术深度探索：构建高效云原生微服务架构在当今快速发展的技术环境中，云原生技术已成为企业数字化转型的关键驱动力。腾讯云作为行业领先的云服务提供商，不断推出创新的产品和技术，助力企业构建高效、可扩展的云原生微服务架构。本文将深入探讨腾讯云在微服务领域的最新进展，并通过一个实际案例展示如何在腾讯云平台上构建云原生应用。腾讯云微服务架构概览腾讯云微服务架构基于云原生理念，旨在帮助企业快速实现应用的容
Pyecharts数据可视化大屏：打造沉浸式数据分析体验我的运维人生信息可视化数据分析数据挖掘运维开发技术共享
Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
将cmd中命令输出保存为txt文本文件落难Coder Windows cmd window
最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
直返最高等级与直返APP：无需邀请码的返利新体验古楼
随着互联网的普及和电商的兴起，直返模式逐渐成为一种流行的商业模式。在这种模式下，消费者通过购买产品或服务，获得一定的返利，并可以分享给更多的人。其中，直返最高等级和直返APP是直返模式中的重要概念和工具。本文将详细介绍直返最高等级的概念、直返APP的使用以及与邀请码的关系。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，
2022现在哪个打车软件比较好用又便宜实惠的打车软件合集高省APP珊珊
这是一个信息高速传播的社会。信息可以通过手机，微信，自媒体，抖音等方式进行传播。但同时这也是一个交通四通发达的社会。高省APP，是2022年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。珊珊导师，高省邀请码777777，注册送2皇冠会员，送万元推广大礼包，教你如何1年做到百万团队。高
pyecharts——绘制柱形图折线图 2224070247 信息可视化 python java 数据可视化
一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据
如何成为段子手欣雅阅读
我是一个尬聊大师，与朋友聊天经常把话题聊死，留我一个人在群里，望着自己打下的最后一句话无语凝噎。看到风趣幽默的朋友与人聊天，很是艳羡，觉得自己何时才能成为这样的段子手呢？一、段子是什么？“段子”一词在百度百科上的解释：本是相声中的一个艺术术语，指的是相声作品中一节或一段艺术内容。我的理解：段子就是一些搞笑的故事或者笑话。二、为什么要会说段子？不知道大家有没有这样的朋友，本来很无趣的聚会，只要有他参
怎么做淘客赚钱(2022最新免费淘客盈利的方法) 高省_飞智666600
很多人都不知道什么是淘宝客，今天小编为大家解答一下吧。淘宝客，现在简称淘客，是时下比较流行的一个词语，特质为淘宝店推广商品获取提成的人，这些人没有自己的产品，只是在淘宝里面选择适合自己的产品，在自己比较熟悉的领域推广，把产品卖出去之后，会从淘宝店家那里获得百分之五到百分之五十左右的佣金。淘宝客付出的是什么呢？时间。你需要花时间去选适合自己推广的产品，需要花时间去选自己的推广方法，如果你打算自己做个
高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts 信息可视化数据分析
ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
01-Git初识 Meereen Git git
01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name
第四天旅游线路预览——从贾登峪到喀纳斯景区入口（贾登峪游客服务中心）陟彼高冈yu 基于Google earth studio 的旅游规划和预览旅游
第四天：从贾登峪到喀纳斯风景区入口，晚上住宿贾登峪；从贾登峪到喀纳斯景区入口（贾登峪游客服务中心）：搭乘贾登峪①路车，路过三湾到达景区换乘中心，路程时长约40分钟；1）早上8：00起床，吃完早饭，8：30出发；2）从贾登峪到喀纳斯风景区，需要搭乘一站公交车，为免费公交车，路程4.3公里，车程约9分钟8：40左右到达喀纳斯景区入口（贾登峪游客服务中心）；3）乘坐贾登峪①路车，路过三湾到达景区换乘中心
如何选择最适合你的项目研发管理软件？TAPD卓越版全面解析北京云巴巴信息技术有限公司产品经理需求分析
在当今快速发展的科技时代，项目研发管理软件已成为企业不可或缺的重要工具。面对市场上琳琅满目的产品，如何选择一款适合自己团队的项目研发管理软件呢？本文将围绕项目研发管理软件的选择标准，重点介绍TAPD卓越版的特点、优势以及使用体验，让你更好地理解和选择适合自己的项目研发管理软件。项目研发管理软件的选择标准在选择项目研发管理软件时，我们需要考虑以下几个方面的因素：功能全面性：软件是否覆盖了从需求管理、
最超值的Mac——Mac mini 初心么么哒
你知道最超值的Mac是什么吗？自2005年以来，Macmini一直是Apple台式机产品线中的主要产品。最初推出是为了让对Mac好奇的Mac进入Apple生态系统的一种简单方式，现在新的AppleSiliconMacmini可能是任何寻找新Mac的人的最有吸引力的购买。什么是AppleSiliconMacmini？M1Macmini是Apple最小的台式电脑，同时也是最快的台式电脑之一。最新型号由
可以赚钱的app，你们都在用哪些？配音新手圈
1.七猫免费小说2.有柿3.番茄小说兼职副业推荐公众号，配音新手圈，声优配音圈，新配音兼职圈，配音就业圈，鼎音副业，有声新手圈，每天更新各种远程工作与在线兼职，职位包括：写手、程序开发、剪辑、设计、翻译、配音、无门槛、插画、翻译、等等。。。每日更新兼职。4.速读免费小说5.得间免费小说6.快手7.快手极速8.抖音火山版（可提0.2，可能我懒赚的慢，但真不推荐）9.拼多多10.淘宝11.点淘12.美
《前夫如龙》王昊江琼（独家小说）精彩TXT阅读海边书楼
《前夫如龙》王昊江琼（独家小说）精彩TXT阅读主角：王昊江琼简介：离婚那天，她视他如泥土。谁曾想，消息一出，天下震动！可关注微信公众号【风车文楼】去回个书号【203】，即可免费阅读【前夫如龙】全文！江芸并未听出华少龙声音里的冷漠，依旧一脸笑容道：“是啊，那个废物哪儿配得上我姐？这些年，我姐对他仁至义尽了。以后，华少爷可以多跟我姐接触接触，只有华少爷这样的人，才配得上我姐啊！”江琼低着头，微微有些娇
手机上有什么兼职可以做？网上兼职一单一结手机就可以做？优惠券高省
建议上班族和全职宝妈把空闲时间拿出来一点做做副业，什么也不耽搁还能多一笔收入！推荐大家一定要试一试！！！只要有手机就可以做，下面小编就为大家推荐用手机就可以做的三类网上兼职工作。一，高省APP高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。万方导师高省邀请码005500，注册送双皇冠会员，送万元推广大礼包，教你如
摄影小白，怎么才能拍出高大上产品图片？是波妞唉
很多人以为文案只要会码字，会排版就OK了！说实话，没接触到这一行的时候，我的想法更简单，以为只要会写字就行！可是真做了文案才发现，码字只是入门级的基本功。一篇文章离不开排版、配图，说起来很简单！从头做到尾你就会发现，写文章用两个小时，找合适的配图居然要花掉半天的时间，甚至更久！图片能找到合适的就不怕，还有找不到的，比如产品图，只能亲自拍。拿着摆弄了半天，就是拍不出想要的效果，光线不好、搭出来丑破天
收益，收益，还是收益格局AUTOMAN
邻居是一个卖早餐的小夫妻，除了过年，每天他们都要凌晨起床，准备明早要卖的东西。在今年偶尔的一次聊天中，他跟我讲去年没有赚什么钱，大部分都补贴家用了。这么勤劳的他，在今年该如何提高盈利或是收益呢？我觉得他们可以用如下方法:1.减少成本。也就是偷工减料，或者用便宜的东西。不太建议用这种方法，客户体验会变差。2.提高售价。在不降低产品质量的情况下，也是个办法。但是要结合竞争情况，有无替代品。3.开拓新的
中国广电永久9元流量套餐！性价比最高流量卡套餐介绍！优惠攻略官
中国广电是中国最大的传媒集团之一，其推出的流量套餐备受消费者青睐。中国广电最实惠的流量套餐不仅价格亲民，而且提供了优质的网络体验。首先，中国广电的流量套餐价格实惠，适合不同消费者的需求。无论是短期的日租卡还是长期有效的月租卡，用户都可以根据自己的实际情况选择适合自己的套餐。而且，流量的价格相对于其他运营商的套餐来说更加合理，给用户提供了更大的选择空间。☞大流量卡套餐「→点这免费申请办理」或者截图扫
2024春节微信红包封面序列号大全一览帮忙赚赏金
2024微信红包封面序列号哪里领取红包封面领取微信搜索公众号：【艺间封面】千万红包封面等你领取2024微信红包封面免费序列号如何设置微信红包封面？1.打开微信，点击好友选择红包。2.单击红包封面。3.单击“添加红包封面”。4.输入接收序列号。来一波免费的微信红包封面序列号微信红包封面序列号红包封面领取微信搜索公众号：艺间封面千万红包封面等你领取微信红包封面序列号kGnkrbw5a7N微信红包封面序
天猫返利网哪个最好?天猫返利网站有哪些? 优惠券高省
关于哪个返利网站好用，今天汐儿给大家介绍以下十大网站，可以作为参考：1、高省网【高省APP】（邀请码：668666）全网佣金最高。手机应用商店搜索“高省”即可免费下载安装，填写高省邀请码：668666，直升2皇冠，享更高佣金及分红奖励。高省APP全网佣金最高，手机应用商店搜索“高省”即可下载，高省邀请码：668666，此码注册，直升2皇冠，佣金更高！送万元推广大礼包，教你如何1年做到百万团队。其实
进销存小程序源码 PHP网络版ERP进销存管理系统全开源可二开摸鱼小号 php
可直接源码搭建部署发布后使用：一、功能模块介绍该系统模板主要有进，销，存三个主要模板功能组成，下面将介绍各模块所对应的功能；进：需要将产品采购入库，自动生成采购明细台账同时关联财务生成付款账单；销：是指对客户的销售订单记录，汇总生成产品销售明细及回款计划；存：库存的日常盘点与统计，库存下限预警、出入库台账、库存位置等。1.进购管理采购订单：采购下单审批→由上级审批通过采购入库；采购入库：货品到货>
《花都狂少》章小贝小说免费阅读【花都狂少TXT】完整版九月文楼
《花都狂少》章小贝小说免费阅读【花都狂少TXT】完整版主角：章小贝简介：开光师，是一种专门给新娘破瓜的职业。在我们那里，我被逼着做了一名开光师，专门做那些新郎官不敢做的事。一开始我很抵触，更怕早死。可是当我真的做了一次以后，就开始欲罢不能起来。小姐姐，别走，今晚，破瓜！关注微信公众号【风车文楼】去回个书号【267】，即可阅读【花都狂少】小说全文！“你怎么流鼻血了？”灵琴清惊讶的问。咳咳，我尴尬的咳
JAVA学习笔记之23种设计模式学习 victorfreedom Java技术设计模式 android java 常用设计模式
博主最近买了《设计模式》这本书来学习，无奈这本书是以C++语言为基础进行说明，整个学习流程下来效率不是很高，虽然有的设计模式通俗易懂，但感觉还是没有充分的掌握了所有的设计模式。于是博主百度了一番，发现有大神写过了这方面的问题，于是博主迅速拿来学习。一、设计模式的分类总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器
每天赚50零花钱的方法，日赚50元左右的5个正规渠道一起高省
每个人都希望拥有一笔自己的零花钱，但是很多人可能没有太多的时间去赚钱，或者没有太多的机会去赚取收入。但是，你可以通过一些简单的方法来赚取每天50元的零花钱。下面分享一些能每天赚50元的方法门路，总有一个适合你！①电商——高省高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。拂晓导师高省邀请码989898，注册送双皇
遍历dom 并且存储（将每一层的DOM元素存在数组中）换个号韩国红果果 JavaScript html
数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con
Android+Jquery Mobile学习系列(9)-总结和代码分享白糖_ JQuery Mobile
目录导航经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym
impala参考资料 dayutianfei impala
记录一些有用的Impala资料 1. 入门资料 >>官网翻译： http://my.oschina.net/weiqingbin/blog?catalog=423691 2. 实用进阶 >>代码&架构分析： Impala/Hive现状分析与前景展望：http
JAVA 静态变量与非静态变量初始化顺序之新解周凡杨 java 静态非静态顺序
今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo
跳出iframe返回外层页面 g21121 iframe
在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> //<!-- function
JAVA多线程监听JMS、MQ队列 510888780 java多线程
背景：消息队列中有非常多的消息需要处理，并且监听器onMessage（）方法中的业务逻辑也相对比较复杂，为了加快队列消息的读取、处理速度。可以通过加快读取速度和加快处理速度来考虑。因此从这两个方面都使用多线程来处理。对于消息处理的业务处理逻辑用线程池来做。对于加快消息监听读取速度可以使用1.使用多个监听器监听一个队列；2.使用一个监听器开启多线程监听。对于上面提到的方法2使用一个监听器开启多线
第一个SpringMvc例子布衣凌宇 spring mvc
第一步：导入需要的包；第二步：配置web.xml文件 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi=
我的spring学习笔记15-容器扩展点之PropertyOverrideConfigurer aijuans Spring3
PropertyOverrideConfigurer类似于PropertyPlaceholderConfigurer，但是与后者相比，前者对于bean属性可以有缺省值或者根本没有值。也就是说如果properties文件中没有某个bean属性的内容，那么将使用上下文（配置的xml文件）中相应定义的值。如果properties文件中有bean属性的内容，那么就用properties文件中的值来代替上下
通过XSD验证XML antlove xml schema xsd validation SchemaFactory
1. XmlValidation.java package xml.validation; import java.io.InputStream; import javax.xml.XMLConstants; import javax.xml.transform.stream.StreamSource; import javax.xml.validation.Schem
文本流与字符集百合不是茶 PrintWrite()的使用字符集名字别名获取
文本数据的输入输出; 输入;数据流,缓冲流输出;介绍向文本打印格式化的输出PrintWrite(); package 文本流; import java.io.FileNotFound
ibatis模糊查询sqlmap-mapping-**.xml配置 bijian1013 ibatis
正常我们写ibatis的sqlmap-mapping-*.xml文件时，传入的参数都用##标识，如下所示： <resultMap id="personInfo" class="com.bijian.study.dto.PersonDTO"> <res
java jvm常用命令工具——jdb命令(The Java Debugger) bijian1013 java jvm jdb
用来对core文件和正在运行的Java进程进行实时地调试，里面包含了丰富的命令帮助您进行调试，它的功能和Sun studio里面所带的dbx非常相似，但 jdb是专门用来针对Java应用程序的。现在应该说日常的开发中很少用到JDB了，因为现在的IDE已经帮我们封装好了，如使用ECLI
【Spring框架二】Spring常用注解之Component、Repository、Service和Controller注解 bit1129 controller
在Spring常用注解第一步部分【Spring框架一】Spring常用注解之Autowired和Resource注解（http://bit1129.iteye.com/blog/2114084）中介绍了Autowired和Resource两个注解的功能，它们用于将依赖根据名称或者类型进行自动的注入，这简化了在XML中，依赖注入部分的XML的编写，但是UserDao和UserService两个bea
cxf wsdl2java生成代码super出错,构造函数不匹配 bitray super
由于过去对于soap协议的cxf接触的不是很多,所以遇到了也是迷糊了一会.后来经过查找资料才得以解决. 初始原因一般是由于jaxws2.2规范和jdk6及以上不兼容导致的.所以要强制降为jaxws2.1进行编译生成.我们需要少量的修改: 我们原来的代码 wsdl2java com.test.xxx -client http://..... 修改后的代
动态页面正文部分中文乱码排障一例 ronin47
公司网站一部分动态页面，早先使用apache+resin的架构运行，考虑到高并发访问下的响应性能问题，在前不久逐步开始用nginx替换掉了apache。不过随后发现了一个问题，随意进入某一有分页的网页，第一页是正常的（因为静态化过了）；点“下一页”，出来的页面两边正常，中间部分的标题、关键字等也正常，唯独每个标题下的正文无法正常显示。因为有做过系统调整，所以第一反应就是新上
java-54- 调整数组顺序使奇数位于偶数前面 bylijinnan java
import java.util.Arrays; import java.util.Random; import ljn.help.Helper; public class OddBeforeEven { /** * Q 54 调整数组顺序使奇数位于偶数前面 * 输入一个整数数组，调整数组中数字的顺序，使得所有奇数位于数组的前半部分，所有偶数位于数组的后半
从100PV到1亿级PV网站架构演变 cfyme 网站架构
一个网站就像一个人，存在一个从小到大的过程。养一个网站和养一个人一样，不同时期需要不同的方法，不同的方法下有共同的原则。本文结合我自已14年网站人的经历记录一些架构演变中的体会。 1：积累是必不可少的架构师不是一天练成的。 1999年，我作了一个个人主页，在学校内的虚拟空间，参加了一次主页大赛，几个DREAMWEAVER的页面，几个TABLE作布局，一个DB连接，几行PHP的代码嵌入在HTM
[宇宙时代]宇宙时代的GIS是什么？ comsci Gis
我们都知道一个事实，在行星内部的时候，因为地理信息的坐标都是相对固定的，所以我们获取一组GIS数据之后，就可以存储到硬盘中，长久使用。。。但是，请注意，这种经验在宇宙时代是不能够被继续使用的宇宙是一个高维时空
详解create database命令 czmmiao database
完整命令 CREATE DATABASE mynewdb USER SYS IDENTIFIED BY sys_password USER SYSTEM IDENTIFIED BY system_password LOGFILE GROUP 1 ('/u01/logs/my/redo01a.log','/u02/logs/m
几句不中听却不得不认可的话 datageek
1、人丑就该多读书。 2、你不快乐是因为：你可以像猪一样懒，却无法像只猪一样懒得心安理得。 3、如果你太在意别人的看法，那么你的生活将变成一件裤衩，别人放什么屁，你都得接着。 4、你的问题主要在于：读书不多而买书太多，读书太少又特爱思考，还他妈话痨。 5、与禽兽搏斗的三种结局：(1)、赢了，比禽兽还禽兽。(2)、输了，禽兽不如。(3)、平了，跟禽兽没两样。结论：选择正确的对手很重要。 6
1 14:00 PHP中的“syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM”错误 dcj3sjt126com PHP
原文地址：http://www.kafka0102.com/2010/08/281.html 因为需要，今天晚些在本机使用PHP做些测试，PHP脚本依赖了一堆我也不清楚做什么用的库。结果一跑起来，就报出类似下面的错误：“Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM in /home/kafka/test/
xcode6 Auto layout and size classes dcj3sjt126com ios
官方GUI https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html iOS中使用自动布局（一） http://www.cocoachina.com/ind
通过PreparedStatement批量执行sql语句【sql语句相同，值不同】梦见x光 sql 事务批量执行
比如说：我有一个List需要添加到数据库中，那么我该如何通过PreparedStatement来操作呢？ public void addCustomerByCommit(Connection conn , List<Customer> customerList) { String sql = "inseret into customer(id
程序员必知必会----linux常用命令之十【系统相关】 hanqunfeng Linux常用命令
一.linux快捷键 Ctrl+C : 终止当前命令 Ctrl+S : 暂停屏幕输出 Ctrl+Q : 恢复屏幕输出 Ctrl+U : 删除当前行光标前的所有字符 Ctrl+Z : 挂起当前正在执行的进程 Ctrl+L : 清除终端屏幕，相当于clear 二.终端命令 clear : 清除终端屏幕 reset : 重置视窗，当屏幕编码混乱时使用 time com
NGINX IXHONG nginx
pcre 编译安装 nginx conf/vhost/test.conf upstream admin { server 127.0.0.1:8080; } server { listen 80; &
设计模式--工厂模式 kerryg 设计模式
工厂方式模式分为三种： 1、普通工厂模式：建立一个工厂类，对实现了同一个接口的一些类进行实例的创建。 2、多个工厂方法的模式：就是对普通工厂方法模式的改进，在普通工厂方法模式中，如果传递的字符串出错，则不能正确创建对象，而多个工厂方法模式就是提供多个工厂方法，分别创建对象。 3、静态工厂方法模式：就是将上面的多个工厂方法模式里的方法置为静态，
Spring InitializingBean/init-method和DisposableBean/destroy-method mx_xiehd java spring bean xml
1.initializingBean/init-method 实现org.springframework.beans.factory.InitializingBean接口允许一个bean在它的所有必须属性被BeanFactory设置后，来执行初始化的工作，InitialzingBean仅仅指定了一个方法。通常InitializingBean接口的使用是能够被避免的，（不鼓励使用，因为没有必要
解决Centos下vim粘贴内容格式混乱问题 qindongliang1922 centos vim
有时候，我们在向vim打开的一个xml，或者任意文件中，拷贝粘贴的代码时，格式莫名其毛的就混乱了，然后自己一个个再重新，把格式排列好，非常耗时，而且很不爽，那么有没有办法避免呢？答案是肯定的，设置下缩进格式就可以了，非常简单：在用户的根目录下直接vi ~/.vimrc文件然后将set pastetoggle=<F9> 写入这个文件中，保存退出，重新登录，
netty大并发请求问题 tianzhihehe netty
多线程并发使用同一个channel java.nio.BufferOverflowException: null at java.nio.HeapByteBuffer.put(HeapByteBuffer.java:183) ~[na:1.7.0_60-ea] at java.nio.ByteBuffer.put(ByteBuffer.java:832) ~[na:1.7.0_60-ea]
Hadoop NameNode单点问题解决方案之一 AvatarNode wyz2009107220 NameNode
我们遇到的情况 Hadoop NameNode存在单点问题。这个问题会影响分布式平台24*7运行。先说说我们的情况吧。我们的团队负责管理一个1200节点的集群(总大小12PB)，目前是运行版本为Hadoop 0.20，transaction logs写入一个共享的NFS filer(注：NetApp NFS Filer)。经常遇到需要中断服务的问题是给hadoop打补丁。 DataNod