echarts图表基础配置

Posted 2023-04-12

参考技术A ##借鉴自  https://www.jianshu.com/p/b649e8cbf2cd      https://www.cnblogs.com/zqq-blog/p/10636102.html

echarts_部分图表配置_地图的配置

 

 1 function echarts_map (thisId,data){
 2     $.get(\'map/json/henan.json\', function (chinaJson) {
 3         echarts.registerMap(\'henan\', chinaJson);
 4         var chart = echarts.init(document.getElementById(thisId));
 5         chart.setOption({
 6 
 7             visualMap: {
 8                 show:false,//不显示也有颜色区分的效果
 9                 min: 0,
10                 max: 50000,
11                 left: \'left\',
12                 top: \'bottom\',
13                 text: [\'高\',\'低\'], // 文本，默认为数值文本
14                 calculable: false,//是否显示可拖动的句柄
15                 inRange: {
16                     color: [\'rgba(15,220,150,.5)\',\'#00415a\',]
17                 }
18             },
19             tooltip: {
20                 trigger: \'item\',
21                 showDelay: 0,
22                 backgroundColor: \'#c6e8e9\',//浮框背景色
23                 transitionDuration: 0.2,
24                 formatter: function (params) {//设置提示框内的文字
25                     var p = \'<h3 style="color:#29667b;text-align:center;font-size:14px;font-weight:bold;line-height:20px;">[\'+params.name+\']</h3>\'+
26                         \'<p style="color:#26677b;font-size:12px;">今日累计用户数：\'+params.data.uv+\'</p>\'+
27                         \'<p style="color:#26677b;font-size:12px;">当前活跃用户数：\'+params.data.iuv+\'</p>\'
28                     return p;
29                 }
30             },           
31             series: [{
32                 type: \'map\',
33                 map: \'henan\',
34                 roam: false,//标识是否可以缩放和拖动
35                 aspectScale:1.1,//设置地图的长宽比 数值越大 高度越小 数值越小 宽度越小
36                 zoom:1.25,//定义当前视角的缩放比
37                 label: {
38                     normal: {
39                         show: false,//标示是否显示提示文字
40                     },
41                     emphasis: {
42                         show: false
43                     }
44                 },
45                 itemStyle:{
46                     normal:{
47                         areaColor:\'rgba(15,220,150,.5)\'
48                     }
49                 },
50                 data:data
51             }]
52         });
53         chart.on(\'mouseover\', function (e) {
54             e.event.target.style.fill = \'#00415a\';
55         });
56     });
57 };