Echarts 热力图

一. 前言

        项目是vue2, echarts版本 "echarts": "^4.1.0"

二. 图

        

三. 引用echarts以及绘画的地图边界

        下面边界是一个json文件可以在 DataV.GeoAtlas地理小工具系列 中下载自己的边界，或者公司提供所需的边界数据。

        import * as echarts from "echarts";     // 引入echarts

        import bjsbjjson from './bjbj.json';        // 北京市镇街边界

四. 使用

        绘制echarts地图必须有一个绘制的地方 例如： <div id="gzrywzfbEcharts" style="width: 100%;height: 100%"></div>

InitgzrywzfbEcharts() {
            let myChart = this.$echarts.init(document.getElementById("gzrywzfbEcharts"));
            echarts.registerMap('北京', bjsbjjson);
            let option = {
                // visualMap: {
                //     min: 10,
                //     max: 70,
                //     text:['High','Low'],
                //     realtime: false,
                //     calculable: true,
                //     inRange: {
                //         color: ['lightskyblue','yellow', 'orangered']
                //     }
                // },
                visualMap: {
                    show: true,
                    bottom:'10px',
                    left:'20px',
                    textStyle: {
                        fontSize: 14,
                        color: '#ccc'
                    },
                    // splitList: [
                    //     { start: 0, end: 100000 },
                    //     { start: 100000, end: 500000 },
                    //     { start: 500000, end: 1000000 },
                    //     { start: 1000000, end: 1500000 },
                    //     { start: 1500000, end: 2000000 },
                    //     { start: 2000000, label: '2000000以上' },
                    // ],
                    pieces: [
                        {min: 0, max: 2000, label: '0-2000', color:  '#8ED1EB'},
                        {min: 2000, max: 4000, label: '2000-4000', color:  '#B0DFA5'},
                        {min: 4000, max: 6000, label: '4000-6000', color:  '#E5F436'},
                        {min: 6000, max: 8000, label: '6000-8000', color:  '#FFCF01'},
                        {min: 8000, max: 10000, label: '8000-10000', color:  '#FE6900'},
                        {min: 10000,  label: '10000以上', color:  '#FD4500'},
                    ],
                    realtime: false,
                    calculabel: false,
                    // color: ['#810000', '#C00000', '#056DCF', '#0682F6', '#4AA1FA', '#5DBCFF']
                },
                series: [{
                    type: 'map',
                    map: '北京',
                    selectedMode:'single',
                    // aspectScale: 0.1,    // 长宽比
                    zoom: 1.2,              // 缩放比例
                    roam: true,             // 是否地图放大
                    scaleLimit:{                       //所属组件的z分层，z值小的图形会被z值大的图形覆盖
                        min: 1.2,                          //最小的缩放值
                        max: 5,                            //最大的缩放值
                    },
                    itemStyle:{
                        normal:{
                            label:{
                                show:true
                            }
                        },
                        emphasis:{
                            label:{
                                show:true
                            }
                        }
                    },
                    data:[
                        {name: '城六区', value: 1000},
                        {name: '门头沟区', value: 1000},
                        {name: '通州区', value: 2000},
                        {name: '昌平区', value: 3000},
                        {name: '大兴区', value: 4000},
                        {name: '房山区', value: 4100},
                        {name: '顺义区', value: 1500},
                        {name: '平谷区', value: 2500},
                        {name: '密云区', value: 3500},
                        {name: '延庆区', value: 3500},
                        {name: '怀柔区', value: 8500},
                        {name: '海淀区', value: 7500},
                        {name: '朝阳区', value: 3005},
                        {name: '丰台区', value: 2005},
                        {name: '石景山区', value: 1250},
                        {name: '西城区', value: 6005},
                        {name: '东城区', value: 8500},
                    ]
                }]
            };
            myChart.setOption(option);
            setTimeout(() => {
                window.addEventListener("resize", () => myChart.resize());
            }, 200);
        },

其中echarts.registerMap('北京', bjsbjjson); 的北京 是自己起的地图名称，要和

series: [{ type: 'map',  map: '北京'}]中map对应上。