1.效果图如下：
首先下载echarts-all.js。
代码如下：
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!-- IE=edge -->
5 <title>四川地图显示</title>
6 </head>
7 <script type="text/javascript" src="<?=$sRootPath?>js/mapJs/echarts-all.js"></script>
8 <body>
9 <div id="main" style="height: 530px;"></div>
10 <script>
11 mapDisplay();
12 function mapDisplay() {
13 var myChart = echarts.init(document.getElementById(‘main‘));
14 var option = {
15 title: {
16 text: ‘四川省区域注册人数统计‘,
17 //subtext: ‘-。-‘
18 },
19 tooltip: {
20 trigger: ‘item‘,
21 formatter: function(a){
22 return a[1]+":"+a[2];
23 }
24 },
25
26 legend: {
27 orient: ‘vertical‘,
28 x: ‘right‘,
29 data: [‘数据名称‘]
30 },
31
32 dataRange: {
33 min: 0,
34 max: 1000,
35 color: [‘orange‘, ‘#6EA1F4‘],
36 //color: [‘orange‘, ‘blue‘],
37 boder: 3,
38 text: [‘高‘, ‘低‘], // 文本，默认为数值文本
39 calculable: true
40 },
41 series: [
42 {
43 //name: ‘数据名称‘,
44 type: ‘map‘,
45 mapType: ‘四川‘,
46 selectedMode: ‘single‘,
47 itemStyle: {
48 normal: {
49 label: { show: true },
50 borderWidth: 2,//省份的边框宽度
51 childBorderWidth: 1,
52 childBorderColor: ‘#6EA1F4‘
53
54 },
55 emphasis: { label: { show: true } }
56 },
57 data: [
58 { name: ‘阿坝藏族羌族自治州‘, value: 0 },
59 { name: ‘巴中市‘, value: 0 },
60 { name: ‘成都市‘, value: 0 },
61 { name: ‘达州市‘, value: 0 },
62 { name: ‘德阳市‘, value: 0 },
63 { name: ‘甘孜藏族自治州‘, value: 0 },
64 { name: ‘广安市‘, value: 0 },
65 { name: ‘广元市‘, value: 0 },
66 { name: ‘乐山市‘, value: 0 },
67 { name: ‘凉山彝族自治州‘, value: 0 },
68 { name: ‘泸州市‘, value: 0 },
69 { name: ‘眉山市‘, value: 0 },
70 { name: ‘绵阳市‘, value: 0 },
71 { name: ‘内江市‘, value: 0 },
72 { name: ‘南充市‘, value: 0 },
73 { name: ‘攀枝花市‘, value: 0 },
74 { name: ‘遂宁市‘, value: 0 },
75 { name: ‘雅安市‘, value: 0 },
76 { name: ‘宜宾市‘, value: 0 },
77 { name: ‘资阳市‘, value: 0 },
78 { name: ‘自贡市‘, value: 0 }
79 ]
80 }
81 ]
82 };
83 myChart.setOption(option);
84 }
85 </script>
86 </body>
87 </html>
时间： 2024-10-05 09:17:01