zoukankan      html  css  js  c++  java
  • 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 };
  • 相关阅读:
    [luogu4053 JSOI2007] 建筑抢修 (贪心 优先队列)
    [luogu2272 ZJOI2007] 最大半连通子图 (tarjan缩点 拓扑排序 dp)
    20180705 考试记录
    [luogu4310] 绝世好题 (递推)
    [luogu2765 网络流24题] 魔术球问题 (dinic最大流)
    [luogu4151 WC2011] 最大XOR和路径 (线性基)
    [luogu3232 HNOI2013] 游走 (高斯消元 期望)
    [luogu3726 HNOI2017] 抛硬币 (拓展lucas)
    20180703 考试记录
    [spoj] HIGH
  • 原文地址:https://www.cnblogs.com/cy3664983/p/7509233.html
Copyright © 2011-2022 走看看