ECharts 绘制吉林省地图,并根据数值设置市区颜色(demo)

先看下效果图

ECharts 绘制吉林省地图,并根据数值设置市区颜色(demo)_第1张图片

1、如何获取地图数据

前往阿里云的地图数据获取需要的地图json

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.87755764334002&lng=104.150390625&zoom=3

打开的页面是这样子的,下载数据,一定要选框出的部分下载。否则可能会出现奇怪的bug 

ECharts 绘制吉林省地图,并根据数值设置市区颜色(demo)_第2张图片

2、在html中,引入echarts.js ,关于echarts的资料如下

echarts 官方文档 

https://echarts.apache.org/zh/option.html#title

echarts 的js文件获取地址

https://echarts.apache.org/zh/builder.html

引入jquery 和 echars.js 


3、读取吉林省份地图json的数据,并加载到echarts

function getArea () {
    const myChart = echarts.init(document.getElementById('main'))

    var url = "js/jilin.json";
    $.get(url, null, function (ret) {
        let geoJson = ret;
   
        echarts.registerMap('jilin', ret)
        // 注册矢量地图数据
        var option = {
          visualMap: { // 视觉映射组件

            // type: 'continuous', 如果需要渐变色,设置type为连续
            show: true,
            // inverse: true, // 反转
            top: '70%',
            bottom: '0%',
            left: '2%',
            textStyle: {
              fontsize: 12
            },

            splitList: [ // 自定义范围
              { start: 0, end: 100 },
              { start: 100, end: 300 },
              { start: 300, end: 500 },
              { start: 500, end: 1000 },
              { start: 1000 }
            ],
            color: ['#BF242A', '#CD5459', '#DC878A', '#EAB7B9', '#F3D7D9'] //自定义范围的颜色
          },
          tooltip: { // 悬浮框
            trigger: 'item', // 触发条件
            backgroundColor: 'RGBA(136, 123, 135, 0.8)',
            formatter: '{b}
占用数{c}', // 自定义显示数据 textStyle: { color: '#ffffff' } }, series: [ { type: 'map', map: 'jilin', zoom: 1.2, top: '10%', x: 'center', label: { show: true // 显示 }, itemStyle: { normal: { // 静态的时候显示的默认样式 areaColor: '#F3D7D9', // 地图颜色 borderColor: '#886364' // 边框颜色 }, emphasis: { // 鼠标移入动态的时候显示的默认样式 borderWidth: 2, // 边框宽度 areaColor: '#ffffff' // 地图颜色 } }, // 数据 data: [ { name: '长春市', value: '1202' }, { name: '吉林市', value: '396' }, { name: '通化市', value: '1125' }, { name: '四平市', value: '635' }, { name: '白山市', value: '586' }, { name: '辽源市', value: '360' }, { name: '白城市', value: '231' }, { name: '延边朝鲜族自治州', value: '196' }, { name: '松原市', value: '80' } ] } ] } myChart.setOption(option) }) }

4、完整demo下载

https://download.csdn.net/download/wangkunggxx/85582925

你可能感兴趣的:(web前端,echarts,前端,javascript)