zoukankan      html  css  js  c++  java
  • echarts Map(地图) 不同颜色区块显示

    以河南地图为例:

    代码如下:

    <h3>天翼日必达完成率</h3>
    <div id="map" style="height:340px; text-align:left; padding:0 20px 20px 20px;"></div>
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('map'));//初始化
    myChart.setOption({
    title: {
    text: ''
    },
    tooltip : {
    trigger: 'item',
    /* formatter: '{b}',
    itemSize:'14px'*/
    },
    /* dataRange: {
    orient: 'vertical',
    min: 0,
    max: 55000,
    text:['高','低'], // 文本,默认为数值文本
    splitNumber:0
    },*/
    dataRange: {
    x: 'left',
    y: 'center',
    splitList: [
    {start: 0.8, label: '80%以上', color: '#FF6699'},
    {start: 0.6, end: 0.8, label: '60-80%', color: '#CC3300'},
    {start: 0.4, end: 0.6, label: '40-60%', color: '#F7BB37'},
    {start: 0.3, end: 0.4, label: '30-40%', color: '#3BAE56'},
    {start: 0.2, end: 0.3, label: '20-30%', color: '#92D050'},
    {start: 0.1, end: 0.2, label: '10-20%', color: '#3899FF'},
    {start: 0, end: 0.1, label: '0-10%', color: '#BFBFBF'}
    ],
    textStyle: {
    color: '#3899FF' // 值域文字颜色
    },
    selectedMode: false,
    color: ['#E0022B', '#E09107', '#A3E00B']
    },
    series : [
    {
    name: '天翼日必达完成率',
    type: 'map',
    mapType: '河南',
    mapLocation: {
    x: 'left'
    },
    itemStyle:{
    normal:{
    label:{show:true}
    },
    emphasis:{label:{show:true}}
    },
    data:[
    {name:'郑州市', value:0.9},
    {name:'开封市', value:0.6},
    {name:'洛阳市', value:0.5},
    {name:'平顶山市', value:0.7},
    {name:'安阳市', value:0.2},
    {name:'鹤壁市', value:0.35},
    {name:'新乡市', value:0.26},
    {name:'焦作市', value:0.62},
    {name:'濮阳市', value:0.82},
    {name:'许昌市', value:0.56},
    {name:'漯河市', value:0.24},
    {name:'三门峡市', value:0.32},
    {name:'南阳市', value:0.29},
    {name:'商丘市', value:0.42},
    {name:'信阳市', value:0.22},
    {name:'周口市', value:0.12},
    {name:'驻马店市', value:0.42},
    {name:'济源市', value:0.05}
    ]
    }],
    });
    </script>

    一次真实项目中遇到 记录下 以防忘记。

  • 相关阅读:
    java并发之hashmap源码
    java并发之hashmap
    java线程池之一:创建线程池的方法
    springAOP之代理模式
    java阻塞队列之LinkedBlockingQueue
    java阻塞队列之ArrayBlockingQueue
    java中的异常
    springboot入门之一:环境搭建(续)
    Unity 游戏框架搭建 2019 (二十三、二十四) 备份与版本号&危险的操作
    Unity 游戏框架搭建 2019 (二十一、二十二) 第三章简介&整理前的准备
  • 原文地址:https://www.cnblogs.com/snowhite/p/10683667.html
Copyright © 2011-2022 走看看