Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
map.html 11.8 KB
Newer Older
L
Geo and map  
lang 已提交
1 2 3 
<html>
    <head>
        <meta charset="utf-8">
P
add pinch  
pah100 已提交
4 
        <meta name="viewport" content="width=device-width, initial-scale=1" />
L
Geo and map  
lang 已提交
5 6 
        <script src="esl.js"></script>
        <script src="config.js"></script>
L
update geo examples  
lang 已提交
7 
        <script src="lib/jquery.min.js"></script>
P
add pinch  
pah100 已提交
8 
        <script src="lib/facePrint.js"></script>
L
Geo and map  
lang 已提交
9 10 11 12 13 14 
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
L
Map fix  
lang 已提交
15 
                margin: 0;
L
Geo and map  
lang 已提交
16 17 18 19 20 21 22 23 
            }
        </style>
        <div id="main"></div>
        <script>

            require([
                'echarts',
                'echarts/chart/map',
L
Add title  
lang 已提交
24 
                'echarts/component/title',
L
Better map  
lang 已提交
25 
                'echarts/component/legend',
L
Graph use center and zoom to locate  
lang 已提交
26 
                'echarts/component/visualMap',
L
Fix #3450  
lang 已提交
27 28 
                'echarts/component/markPoint',
                'echarts/component/tooltip'
L
update geo examples  
lang 已提交
29 
            ], function (echarts) {
L
Geo and map  
lang 已提交
30
P
add pinch  
pah100 已提交
31 
                require(['map/js/china'], function () {
L
Add effectScatter  
lang 已提交
32 
                    var chart = echarts.init(document.getElementById('main'));
L
Geo and map  
lang 已提交
33
L
update geo examples  
lang 已提交
34 35 36 37 38 39 40 41 42 43 44 
                    var itemStyle = {
                        normal:{
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis:{
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
L
Fix #3450  
lang 已提交
45 
                    };
L
Map style  
lang 已提交
46
L
update geo examples  
lang 已提交
47 
                    chart.setOption({
L
Fix #3450  
lang 已提交
48 
                        tooltip: {},
L
update geo examples  
lang 已提交
49 50 51 
                        title : {
                            text: 'iphone销量',
                            subtext: '纯属虚构',
L
Update tests  
lang 已提交
52 
                            left: 'center'
L
update geo examples  
lang 已提交
53 54 55 
                        },
                        legend: {
                            orient: 'vertical',
L
Update tests  
lang 已提交
56 
                            left: 'left',
L
update geo examples  
lang 已提交
57 58 
                            data:['iphone3','iphone4','iphone5']
                        },
L
dataRange component renamed to visualMap component  
lang 已提交
59 
                        visualMap: {
L
update geo examples  
lang 已提交
60 61 
                            min: 0,
                            max: 1500,
L
Update tests  
lang 已提交
62 63 
                            left: 'left',
                            top: 'bottom',
L
update geo examples  
lang 已提交
64 65 
                            text:['高','低'],           // 文本，默认为数值文本
                            calculable : true
L
Geo and map  
lang 已提交
66 
                        },
L
update geo examples  
lang 已提交
67 68 69 70 71 72 73 74 
                        selectedMode: 'single',
                        series : [
                            {
                                name: 'iphone3',
                                type: 'map',
                                map: 'china',
                                itemStyle: itemStyle,
                                showLegendSymbol: true,
L
Fix #3450  
lang 已提交
75 76 
                                // zoom: 10,
                                // center: [115.97, 29.71],
L
Graph use center and zoom to locate  
lang 已提交
77 78 79 80 81 82 
                                roam: true,
                                markPoint: {
                                    data: [{
                                        coord: [115.97, 29.71]
                                    }]
                                },
L
update geo examples  
lang 已提交
83 84 
                                label: {
                                    normal: {
S
tweak series-map label, support position and formatter.  
sushuang 已提交
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 
                                        show: true,
                                        formatter: '{b}：{value|{c}}',
                                        // position: 'inside',
                                        backgroundColor: '#fff',
                                        padding: [3, 5],
                                        borderRadius: 3,
                                        borderWidth: 1,
                                        borderColor: 'rgba(0,0,0,0.5)',
                                        color: '#777',
                                        rich: {
                                            value: {
                                                color: '#019D2D',
                                                fontSize: 14,
                                                // fontWeight: 'bold'
                                                // textBorderWidth: 2,
                                                // textBorderColor: '#000'
                                            }
                                        }
L
update geo examples  
lang 已提交
103 104 105 106 
                                    },
                                    emphasis: {
                                        show: true
                                    }
L
Map label fix  
lang 已提交
107 
                                },
L
update geo examples  
lang 已提交
108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 
                                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)}
                                ]
L
Map fix  
lang 已提交
144 
                            },
L
update geo examples  
lang 已提交
145 146 147 148 149 150 151 152 153 154 155 156 157 
                            {
                                name: 'iphone4',
                                type: 'map',
                                mapType: 'china',
                                itemStyle: itemStyle,
                                showLegendSymbol: true,
                                label: {
                                    normal: {
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
L
Map label fix  
lang 已提交
158 
                                },
L
update geo examples  
lang 已提交
159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 
                                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)}
                                ]
L
Map fix  
lang 已提交
180 
                            },
L
update geo examples  
lang 已提交
181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 
                            {
                                name: 'iphone5',
                                type: 'map',
                                mapType: 'china',
                                itemStyle: itemStyle,
                                showLegendSymbol: true,
                                label: {
                                    normal: {
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                data:[
                                    {name: '北京',value: Math.round(Math.random()*1000)},
                                    {name: '天津',value: Math.round(Math.random()*1000)},
                                    {name: '上海',value: Math.round(Math.random()*1000)},
                                    {name: '广东',value: Math.round(Math.random()*1000)},
                                    {name: '台湾',value: Math.round(Math.random()*1000)},
                                    {name: '香港',value: Math.round(Math.random()*1000)},
                                    {name: '澳门',value: Math.round(Math.random()*1000)}
                                ]
                            }
                        ]
                    });
L
Fix #3450  
lang 已提交
207 208 209 210 211 212 213 214 215 216 217 

                    chart.on('click', function (param) {
                        console.log(param);
                    });
                    // setTimeout(function () {
                    //     chart.setOption({
                    //         series: [{
                    //             zoom: 5
                    //         }]
                    //     });
                    // }, 2000);
L
Geo and map  
lang 已提交
218 
                });
L
update geo examples  
lang 已提交
219 
            });
L
Geo and map  
lang 已提交
220 221 222 223 

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