echarts Map(地图) 不同颜色区块显示

echarts Map(地图) 不同区块显示

这里以重庆地图为例

配置项:

    var option = {
        title : {
            text: ‘重庆市‘,
            subtext: ‘‘,
            x:‘left‘
        },
        tooltip : {
                trigger: ‘item‘,
                formatter: ‘{b}‘,
                itemSize:‘14px‘
            },
        legend: {
            orient: ‘vertical‘,
            x:‘center‘,
            data:[‘重庆市区县‘]
        },
        dataRange: {
            x: ‘left‘,
            y: ‘bottom‘,
            splitList: [
                {start: 1500},
                {start: 900, end: 1500},
                {start: 310, end: 1000},
                {start: 200, end: 300},
                {start: 10, end: 200, label: ‘10 到 200(火灾数量)‘},
                {start: 5, end: 5, label: ‘5(火灾数量)‘, color: ‘black‘},
                {end: 10}
            ],
            color: [‘#eee‘, ‘#949fb1‘, ‘#f3ce85‘]
        },
        series : [
            {
                name: ‘重庆市区县‘,
                type: ‘map‘,
                mapType: ‘重庆‘,
                roam: true,
                itemStyle:{
                    normal:{
                        label:{
                            show:false,
                            textStyle: {
                               color: "#000"
                            }
                        }
                    },
                    emphasis:{label:{show:true}}
                },
                data:[
                    {name: ‘城口县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘开县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘巫溪县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘云阳县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘奉节县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘巫山县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘万州区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘梁平县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘忠县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘垫江县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘石柱土家族自治县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘丰都县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘长寿区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘涪陵区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘合川区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘潼南县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘铜梁县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘渝北区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘璧山县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘沙坪坝县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘江北区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘大足县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘永川区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘綦江县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘南川区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘万盛区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘大渡口区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘南岸区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘武隆县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘九龙坡区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘荣昌县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘秀山土家族苗族自治县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘酉阳土家族苗族自治县‘,value: Math.round(Math.random()*2000)},
                    {name: ‘彭水苗族土家族自治县‘,value: Math.round(Math.random()*2000)},
                      {name: ‘江津区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘北碚区‘,value: Math.round(Math.random()*2000)},
                    {name: ‘巴南区‘,value: Math.round(Math.random()*2000)}
                ]
            }
        ]
    };
时间: 2024-11-07 04:14:36

echarts Map(地图) 不同颜色区块显示的相关文章

Echarts map地图中需要的JSON 数据格式

var initData1 = [ { "name": "安徽", "value": 244 }, { "name": "北京", "value": 5019 }, { "name": "福建", "value": 120 }, { "name": "甘肃", "value&qu

Echarts Map地图类型使用

使用的时候出现了一个BUG, China地图的底色没有绘制出来,现在把一个小的DEMO给大家,以供参考,并附上参考文章(http://blog.csdn.net/danielinbiti/article/details/44851781),祝好. <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body

数据视化Echarts+百度地图API实现市县区级下钻

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

ECharts系列 - 地图 实例一

ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.1.8下载地址:  http://echarts.baidu.com/build/echarts-2.1.8.zip ECharts官方实例:  http://echarts.baidu.com/doc/example.html ECharts官方API文档:  http://echarts.baidu.com/doc/doc.html 1.项目结构 js文件夹: 下载了EChar

Echarts 中国地图(包括china.js文件)

用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 1 <!DOCTYPE html> 2 <html> 3 <head> 4 首先,引入jquery.js echarts.js china.js(必要) 5 <script src="/jquery.js"></script> 6 <script src="ech

react+echarts实现地图

6 import React, { Component } from 'react'; 7 import axios from 'axios'; 8 import echarts from 'echarts/lib/echarts'; 9 import 'echarts/lib/component/tooltip'; 10 import 'echarts/lib/component/title'; 11 import 'echarts/lib/component/visualMap'; 12 i

echarts合并地图,把中国各个省份分成&#39;华北&#39;,&#39;东北&#39;,&#39;华东&#39;,&#39;华中&#39;,&#39;华南&#39;,&#39;西南&#39;,&#39;西北&#39;七个大区

最近公司有个需求是按照大区,即把中国分成华北','东北','华东','华中','华南','西南','西北'七个大区, 但是echarts地图只有省市,还没有大区,只能自己网上找资料再按需求写了 echarts地图合并关键点是把coordinates和encodeOffsets合并,而且这两个必须都合并,且最多只能合并到二维数组,合并到三维数组就不行了. 实例结果截图 代码: <!DOCTYPE html> <html lang="zh"> <head>

iOS定位服务与地图开发(4)---显示地图

iOS 6之前,苹果使用的是谷歌地图,iOS 6之后,苹果使用了自己的地图(国内好像用的是高德地图),但是API编程接口与iOS 5相比没有太大变化. iOS 应用程序中使用Map Kit API开发地图应用程序,使用MKMapView类作为地图显示视图,其委托协议是MKMapViewDelegate. 1.显示地图: .h文件中代码 #import <MapKit/MapKit.h> @interface YXCViewController <MKMapViewDelegate>

Form表单类组件与Map地图组件

笔记内容:Form表单类组件与Map地图组件 笔记日期:2018-02-04 form之switch组件 switch组件是一个开关选择器,wxml示例代码如下: <view class='container'> <view class='switch_text'>switch</view> <switch name='switch1' checked='true' /> <switch name='switch2' /> <switch