链接: 借鉴.
// An highlighted block <template> <div class="div"></div> </template> <script> import 'echarts/lib/component/geo' import echarts from 'echarts/lib/echarts' import JSON from 'echarts/map/json/341200' export default { data () { return { shTempData: [{ name: '安徽阜阳宝龙开闭所', value: [116, 33] }] } }, created () { console.log(echarts) console.log(JSON) }, methods: { }, mounted () { let myChart = echarts.init(document.querySelector('.div')) myChart.on('click', (params) => { // window.location.href = '/#/overview' console.log(11111) }) echarts.registerMap('阜阳市', JSON, { }) // 这个是关键，之前拿到的青州各街道数据 // console.log(JSON) let option = { geo: { map: '阜阳市', // js 地图包要和echarts.registerMap()里面的名字保持一致 type: 'map', // 地图 // mapType: '阜阳市', // 自定义地区要和echarts.registerMap()里面的名字保持一致 coordinateSystem: 'geo', roam: true, zoom: 1, zlevel: 2, // data: this.shTempData, // 圆点进度纬度 label: { // 显示地区名 normal: { show: true, // 提示内容 里面渲染的是data里面的数据 formatter: params => { return params.name }, position: 'top', // 提示方向 color: '#fff' }, emphasis: { show: true // 点 } }, itemStyle: { // 颜色配置 normal: { color: 'orangered', // 圆球拨动的颜色 borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 0.5, areaColor: '#021642' }, emphasis: { areaColor: 'orangered', // 滑过高亮颜色 borderColor: '#111' } // areaColor: '#021642' }, nameMap: { 阜南县: '阜南县', // 在画图时候起的名字和data的name这个对应 界首市: '界首市', 临泉县: '临泉县', 太和县: '太和县', 颍东区: '颍东区', 颍泉区: '颍泉区', 颍上县: '颍上县', 颍州区: '颍州区' } }, title: {// 提示标题 // text: '阜阳大数据人口流动分布图 ', x: 'center', roam: true }, // 提示框 tooltip: { trigger: 'item', formatter: function (data) { // return data.data.name + '异常人数：' + data.data.valuea } }, // 工具箱 // toolbox: { // show: true, // orient: 'vertical', // left: 'right', // top: 'center', // // 辅助线标志,分别是启用，删除上一条，删除全部,可设置更多属性 // feature: { // dataView: { readOnly: false }, // restore: {}, // saveAsImage: {} // } // }, // visualMap: { // min: 0, // max: 1, // text: ['异常', '正常'], // realtime: false, // calculable: true, // inRange: { // color: ['green', 'red'] // } // }, series: [ { name: ' ', type: 'effectScatter', // 涟漪动画 mapType: '阜阳市', // 自定义扩展图表类型 coordinateSystem: 'geo', roam: true, zoom: 1, zlevel: 2, symbol: 'circle', // 标记的图形。 symbolSize: 15, // 标记的大小。 rippleEffect: { period: 4, // 动画速度，值越小，动画越快 brushType: 'stroke' // 波纹的绘制方式 }, label: { normal: { show: true, // 提示内容 formatter: params => { return params.name }, position: 'top', // 提示方向 color: '#fff' }, emphasis: { show: true // 点 } }, itemStyle: { normal: { color: 'orangered', // 圆球拨动的颜色 borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 0.5, areaColor: '#021642' }, emphasis: { areaColor: 'orangered', // 滑过高亮颜色 borderColor: '#111' } // areaColor: '#021642' }, data: this.shTempData, // 在 type为'effectScatter'时就是圆点进度纬度 nameMap: { 阜南县: '阜南县', // 在画图时候起的名字和data的name这个对应 界首市: '界首市', 临泉县: '临泉县', 太和县: '太和县', 颍东区: '颍东区', 颍泉区: '颍泉区', 颍上县: '颍上县', 颍州区: '颍州区' } } ] } myChart.setOption(option) } } </script> <style> .div { width: 810px; height: 580px; margin: 0 auto; } </style>