最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】AdminLTE中集成ECharts中的中国地图

AdminLTE crifan 1201浏览 0评论

折腾:

【记录】用AdminLTE实现报表的原型

期间,需要去AdminLTE中集成ECharts中的地图。

ECharts 下载

-》

http://echarts.baidu.com/dist/echarts.js

关于地图,官网有几个示例:

http://echarts.baidu.com/demo.html#map-china

http://echarts.baidu.com/demo.html#map-china-dataRange

http://echarts.baidu.com/demo.html#map-locate

http://echarts.baidu.com/demo.html#geo-map-scatter

http://echarts.baidu.com/demo.html#map-labels

ECharts Gallery

里面有更多的地图的示例

这个:

http://gallery.echartsjs.com/editor.html?c=xBJLIZT3ag

至少把多个省份,弄成同一种颜色了。

ECharts Documentation

http://echarts.baidu.com/tutorial.html#5%20分钟上手%20ECharts

去合并进来。

【已解决】集成ECharts时报错:echarts.js Map china not exists You can download map file on

但是都是单个省份的,还是希望可以:

能把多个省份,合并成一个大区

然后花了点时间,去把不同相邻省份,属于同一个大区的,都给同样的数值,所以就是同一个颜色了。

代码:

<!– ECharts –>
<script src="dist/lib/echarts/echarts.js"></script>
<script src="dist/lib/echarts/map/china.js"></script>
<script type="text/javascript">
  // 基于准备好的dom,初始化echarts实例
  var myChart = echarts.init(document.getElementById(‘china_map’));
function randomData() {
    return Math.round(Math.random()*1000);
}
option = {
    title: {
        text: ”,
        subtext: ”,
        left: ‘center’
    },
    tooltip: {
        trigger: ‘item’
    },
    legend: {
        orient: ‘vertical’,
        left: ‘left’,
        data:[‘2017年’]
    },
    visualMap: {
        show: false,
        min: 0,
        max: 500,
        left: ‘left’,
        top: ‘bottom’,
        text: [‘高’, ‘低’],           // 文本,默认为数值文本
        calculable: false,
        inRange: {
          //color: [ ‘#e0f3f8’, ‘#ffffbf’, ‘#fee090’, ‘#fdae61’, ‘#f46d43’, ‘#d73027’, ‘#a50026’]
          color: [ ‘#FF0033’, ‘#22BF2E’]
        }
    },
    // toolbox: {
    //     show: true,
    //     orient: ‘vertical’,
    //     left: ‘right’,
    //     top: ‘center’,
    //     feature: {
    //         dataView: {readOnly: false},
    //         restore: {},
    //         saveAsImage: {}
    //     }
    // },
    series: [
        {
            name: ‘2016年’,
            type: ‘map’,
            mapType: ‘china’,
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
              //大西北区
              {name: ‘甘肃’,value: 50 },
              {name: ‘青海’,value: 50 },
              {name: ‘新疆’,value: 50 },
              {name: ‘宁夏’,value: 50 },
              {name: ‘陕西’,value: 50 },
              {name: ‘山西’,value: 50 },
              //大中南区
              {name: ‘湖南’,value: 450 },
              {name: ‘江西’,value: 450 },
              {name: ‘湖北’,value: 450 },
              //大华东区
              {name: ‘江苏’,value: 450 },
              {name: ‘安徽’,value: 450 },
              //大华南区
              {name: ‘广东’,value: 50 },
              {name: ‘海南’,value: 50 },
              {name: ‘福建’,value: 50 },
              //大华北区
              {name: ‘黑龙江’,value: 450 },
              {name: ‘吉林’,value: 450 },
              {name: ‘辽宁’,value: 450 },
              {name: ‘河北’,value: 450 },
              {name: ‘天津’,value: 450 },
              {name: ‘北京’,value: 450 },
              {name: ‘内蒙古’,value: 450 },
              //大华中区
              {name: ‘河南’,value: 450 },
              {name: ‘山东’,value: 450 },
              //大东南区
              {name: ‘浙江’,value: 450 },
              {name: ‘上海’,value: 450 },
              //大西南区
              {name: ‘重庆’,value: 450 },
              {name: ‘四川’,value: 450 },
              {name: ‘西藏’,value: 450 },
              {name: ‘云南’,value: 450 },
              {name: ‘广西’,value: 450 },
              {name: ‘贵州’,value: 450 },
              {name: ‘台湾’,value: 450 },
              {name: ‘香港’,value: 450 },
              {name: ‘澳门’,value: 450 }
            ]
        },
        
    ]
};
myChart.setOption(option);
</script>
</body>
</html>

效果:

当然鼠标移动上去,还是单个省份(不是多个省份连在一起的大区):

转载请注明:在路上 » 【已解决】AdminLTE中集成ECharts中的中国地图

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
58 queries in 0.104 seconds, using 18.34MB memory