echarts市级县城地图加散点(圆点)

链接: 借鉴.

// 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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！