ECharts 中国地图,搭配值域控件


效果

代码

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>ECharts Study</title>
</head>

<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px;width:50%;margin:0 auto;"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载
        ],
        function(ec) {
            // 基于准备好的dom,初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));

            var option = {
                title: {
                    text: '农产品进口百强企业所在地区分布',
                    subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },

                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: ['农产品进口百强企业所在地区分布']
                },
                dataRange: {
                    x: 'left',
                    y: 'bottom',
                    splitList: [{
                        start: 1500
                    }, {
                        start: 900,
                        end: 1500
                    }, {
                        start: 310,
                        end: 1000
                    }, {
                        start: 200,
                        end: 300
                    }, {
                        start: 10,
                        end: 200,
                        label: '10 到 200(自定义label)'
                    }, {
                        start: 5,
                        end: 5,
                        label: '5(自定义特殊颜色)',
                        color: 'black'
                    }, {
                        end: 10
                    }],
                    color: ['#E0022B', '#E09107', '#A3E00B']
                },
                series: [{
                    name: '农产品进口百强企业所在地区分布',
                    type: 'map',
                    mapType: 'china',
                    showLegendSymbol: false,
                    roam: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                textStyle: {
                                    color: "rgb(249, 249, 249)"
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: [{
                        name: '北京',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '天津',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '上海',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '重庆',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '河北',
                        value: 0
                    }, {
                        name: '河南',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '云南',
                        value: 5
                    }, {
                        name: '辽宁',
                        value: 305
                    }, {
                        name: '黑龙江',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '湖南',
                        value: 200
                    }, {
                        name: '安徽',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '山东',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '新疆',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '江苏',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '浙江',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '江西',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '湖北',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '广西',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '甘肃',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '山西',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '内蒙古',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '陕西',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '吉林',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '福建',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '贵州',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '广东',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '青海',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '西藏',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '四川',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '宁夏',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '海南',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '台湾',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '香港',
                        value: Math.round(Math.random() * 2000)
                    }, {
                        name: '澳门',
                        value: Math.round(Math.random() * 2000)
                    }]
                }]
            };

            // 为echarts对象加载数据 
            myChart.setOption(option);
        }
    );
    </script>
</body>

</html>

知识共享许可协议
《ECharts 中国地图,搭配值域控件》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告