实现其实也简单，创建一个组件
<template> <div id="centerBottomMap"> <div class="bg-color-black"> <div class="d-flex pt-2 pl-2"> <span> <icon name="map" class="text-icon"></icon> </span> <span class="fs-xl text mx-2">用户所在城市分布</span> </div> <div class="d-flex ai-center flex-column body-box"> <centerMap :cdata="cdata"/> </div> </div> </div> </template> <script> import centerMap from '@/components/echart/centerMap' import {getUserCityData} from "@/api/statistics"; export default { data() { return { timing: null, cdata: {} } }, components: { centerMap }, mounted() { this.getData() }, beforeDestroy () { }, methods:{ getData() { //从后台获取用户城市分布数据 getUserCityData().then(res => { if (res.code === 0) { this.cdata = { regionCode: 'china', data: res.data } console.info(this.cdata) } }); } } } </script> <style lang="scss" scoped> #centerBottomMap { $box-height: 440px; $box-width: 100%; height: $box-height; width: $box-width; border-radius: 5px; padding: 0 16px; min-width: $box-width; .bg-color-black { padding: 5px; height: $box-height; width: $box-width; border-radius: 10px; } .text { color: #c3cbde; } .body-box { border-radius: 10px; overflow: hidden; .dv-cap-chart { width: 100%; height: 160px; } } } </style>
后台数据类似这样
以列表形式返回
然后我们再来看centerMap/index.vue
<template> <Echart :options="options" ref="map" height="410px" width="680px"/> </template> <script> import map from '@/common/map' export default { data() { return { length: 34, options: {}, }; }, props: { cdata: { type: Object, default: () => ({}) }, }, watch: { cdata: { handler (newData) { if (newData !== undefined && newData.data !== undefined) { let name = newData.regionCode let _data = newData.data let mapData = map.mapJson this.$echarts.registerMap(name, mapData); let cityCenter = {} let arr = mapData.features; //根据geo json获取省份中心点 arr.map((item) => { cityCenter[item.properties.name] = item.properties.centroid || item.properties.center; }); let data = []; _data.map((item) => { let name = item.name let value = item.value || 0 if (cityCenter[name]) { data.push({ name: name, value: cityCenter[name].concat(value), }); } }); console.info(data) this.length = data.length this.init(name, data); } }, immediate: true, deep: true } }, methods: { init(name, data) { let top = 30; let zoom = 1.15 let scale = 0.95 this.options = { backgroundColor: "rgba(0,0,0,0)", tooltip: { show: true, trigger: 'item', textStyle: { fontSize: 16, lineHeight: 22, }, formatter: function (params) { if (params.data) { return params.name + "：" + params.data["value"][2]; } else { return params.name; } }, backgroundColor: "rgba(0,0,0,.6)", borderColor: "rgba(147, 235, 248, .8)", textStyle: { color: "#FFF", }, position: point => { // 固定在顶部 return [point[0] + 5, point[1] - 20]; }, }, legend: { show: false, }, visualMap: { show: false, left: 0, bottom: 20, pieces: [ { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。 { gte: 600, lte: 999, label: "600-999个" }, { gte: 200, lte: 599, label: "200-599个" }, { gte: 50, lte: 199, label: "49-199个" }, { gte: 10, lte: 49, label: "10-49个" }, { lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。 ], inRange: { color: "#0782b7", }, /*inRange: { // 渐变颜色，从小到大 color: [ "#c3d7df", "#5cb3cc", "#8abcd1", "#66a9c9", "#2f90b9", "#1781b5", ], },*/ textStyle: { color: "#fff", }, }, geo: { map: name, roam: false, selectedMode: false, //是否允许选中多个区域 zoom: zoom, top: top, aspectScale: scale, //长宽比 show: true, }, series: [ { type: "map", map: name, aspectScale: scale, //长宽比 zoom: zoom, top: top, data: data, //数据 selectedMode: false, //是否允许选中多个区域 geoIndex: 1, //地图省份选中样式 emphasis: { label: { show: true, }, itemStyle: { areaColor: "#389BB7", // 背景色，默认是黄色 borderWidth: 1, }, }, //地图背景色 itemStyle: { color: "#47C1BF", areaColor: 'rgba(19,54,162, .5)', borderColor: 'rgba(0,242,252,.3)', borderWidth: 1, shadowBlur: 7, shadowColor: '#47C1BF', }, }, { data: data || [], type: "effectScatter", coordinateSystem: "geo", symbolSize: function (val) { val = val[2] || 0 if (val >= 5000) return 10; else if (val >= 1000) return 5; else if (val >= 800) return 4; else if (val >= 600) return 3; else if (val >= 400) return 2; else if (val >= 200) return 1; else if (val >= 1) return 0.5; else return 0; }, legendHoverLink: true, showEffectOn: "render", rippleEffect: { // period: 4, scale: 6, color: "rgba(255,255,255, 0.6)", brushType: "fill", }, //地图中心点显示样式 label: { show: false, formatter: (params) => { if (params.data) { return params.name + "：" + params.data["value"][2]; } else { return params.name; } }, fontSize: 11, offset: [0, 2], position: "bottom", textBorderColor: "#fff", textShadowColor: "#000", textShadowBlur: 10, textBorderWidth: 0, color: "#47C1BF", }, // colorBy: "data", itemStyle: { color: "rgba(255,255,255,1)", borderColor: "rgba(2255,255,255,2)", borderWidth: 4, shadowColor: "#47C1BF", shadowBlur: 10, } } ] } // 重新选择区域 this.handleMapRandomSelect(); }, // 开启定时器 startInterval() { const _self = this; const time = 3000; if (this.intervalId !== null) { clearInterval(this.intervalId); } this.intervalId = setInterval(() => { _self.reSelectMapRandomArea(); }, time); }, // 重新随机选中地图区域 reSelectMapRandomArea() { this.$nextTick(() => { try { let ref = this.$refs.map if (ref) { const map = ref.chart; let index = Math.floor(Math.random() * this.length); while (index === this.preSelectMapIndex || index >= this.length) { index = Math.floor(Math.random() * this.length); } map.dispatchAction({ type: 'mapUnSelect', seriesIndex: 0, dataIndex: this.preSelectMapIndex, }); map.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index, }); map.dispatchAction({ type: 'mapSelect', seriesIndex: 0, dataIndex: index, }); this.preSelectMapIndex = index; } } catch (error) { } }); }, handleMapRandomSelect() { this.$nextTick(() => { try { let ref = this.$refs.map if (ref) { const map = ref.chart; const _self = this; setTimeout(() => { _self.reSelectMapRandomArea(); }, 0); // 移入区域，清除定时器、取消之前选中并选中当前 map.on('mouseover', function (params) { clearInterval(_self.intervalId); map.dispatchAction({ type: 'mapUnSelect', seriesIndex: 0, dataIndex: _self.preSelectMapIndex, }); map.dispatchAction({ type: 'mapSelect', seriesIndex: 0, dataIndex: params.dataIndex, }); _self.preSelectMapIndex = params.dataIndex; }); // 移出区域重新随机选中地图区域，并开启定时器 map.on('globalout', function () { _self.reSelectMapRandomArea(); _self.startInterval(); }); this.startInterval(); } } catch (error) { } }); }, } } </script>
common/map.js 内容过长，节选展示
const mapJson={"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":820000,"name":"澳门","center":[113.54909,22.198951],"centroid":[113.566988,22.159307],"childrenNum":8,"level":"province","parent":{"adcode":100000},"subFeatureIndex":33,"acroutes":[100000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[113.554425,22.107489],[113.6037,22.132438],[113.575983,22.194513],[113.558736,22.212244],[113.53841,22.209473],[113.534715,22.174009],[113.554425,22.142416],[113.554425,22.107489]]],[[[113.586453,22.201162],[113.575983,22.201162],[113.575983,22.194513],[113.586453,22.201162]]]]}}]} export default {mapJson}
封装的echart组件echart/index.vue
<template> <div :id="id" :class="className" :style="{ height: height, width: width }" /> </template> <script> import tdTheme from './theme.json' // 引入默认主题 export default { name: 'echart', props: { className: { type: String, default: 'chart' }, id: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '2.5rem' }, options: { type: Object, default: ()=>({}) } }, data () { return { chart: null } }, watch: { options: { handler (options) { // 设置true清空echart缓存 this.chart.setOption(options, true) }, deep: true } }, mounted () { this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题 this.initChart(); }, beforeDestroy () { this.chart.dispose() this.chart = null }, methods: { initChart () { // 初始化echart this.chart = this.$echarts.init(this.$el, 'tdTheme') this.chart.setOption(this.options, true) } } } </script>
theme.json
{ "color": [ "#2d8cf0", "#19be6b", "#ff9900", "#E46CBB", "#9A66E4", "#ed3f14" ], "backgroundColor": "rgba(0,0,0,0)", "textStyle": {}, "title": { "textStyle": { "color": "#516b91" }, "subtextStyle": { "color": "#93b7e3" } }, "line": { "itemStyle": { "normal": { "borderWidth": "2" } }, "lineStyle": { "normal": { "width": "2" } }, "symbolSize": "6", "symbol": "emptyCircle", "smooth": true }, "radar": { "itemStyle": { "normal": { "borderWidth": "2" } }, "lineStyle": { "normal": { "width": "2" } }, "symbolSize": "6", "symbol": "emptyCircle", "smooth": true }, "bar": { "itemStyle": { "normal": { "barBorderWidth": 0, "barBorderColor": "#ccc" }, "emphasis": { "barBorderWidth": 0, "barBorderColor": "#ccc" } } }, "pie": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "scatter": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "boxplot": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "parallel": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "sankey": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "funnel": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "gauge": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "candlestick": { "itemStyle": { "normal": { "color": "#edafda", "color0": "transparent", "borderColor": "#d680bc", "borderColor0": "#8fd3e8", "borderWidth": "2" } } }, "graph": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" } }, "lineStyle": { "normal": { "width": 1, "color": "#aaa" } }, "symbolSize": "6", "symbol": "emptyCircle", "smooth": true, "color": [ "#2d8cf0", "#19be6b", "#f5ae4a", "#9189d5", "#56cae2", "#cbb0e3" ], "label": { "normal": { "textStyle": { "color": "#eee" } } } }, "map": { "itemStyle": { "normal": { "areaColor": "#f3f3f3", "borderColor": "#516b91", "borderWidth": 0.5 }, "emphasis": { "areaColor": "rgba(165,231,240,1)", "borderColor": "#516b91", "borderWidth": 1 } }, "label": { "normal": { "textStyle": { "color": "#000" } }, "emphasis": { "textStyle": { "color": "rgb(81,107,145)" } } } }, "geo": { "itemStyle": { "normal": { "areaColor": "#f3f3f3", "borderColor": "#516b91", "borderWidth": 0.5 }, "emphasis": { "areaColor": "rgba(165,231,240,1)", "borderColor": "#516b91", "borderWidth": 1 } }, "label": { "normal": { "textStyle": { "color": "#000" } }, "emphasis": { "textStyle": { "color": "rgb(81,107,145)" } } } }, "categoryAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#cccccc" } }, "axisTick": { "show": false, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "textStyle": { "color": "#fff" } }, "splitLine": { "show": false, "lineStyle": { "color": [ "#eeeeee" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)" ] } } }, "valueAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#cccccc" } }, "axisTick": { "show": false, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "textStyle": { "color": "#fff" } }, "splitLine": { "show": false, "lineStyle": { "color": [ "#eeeeee" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)" ] } } }, "logAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#cccccc" } }, "axisTick": { "show": false, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "textStyle": { "color": "#999999" } }, "splitLine": { "show": true, "lineStyle": { "color": [ "#eeeeee" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)" ] } } }, "timeAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#cccccc" } }, "axisTick": { "show": false, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "textStyle": { "color": "#999999" } }, "splitLine": { "show": true, "lineStyle": { "color": [ "#eeeeee" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)" ] } } }, "toolbox": { "iconStyle": { "normal": { "borderColor": "#999" }, "emphasis": { "borderColor": "#666" } } }, "legend": { "textStyle": { "color": "#fff" } }, "tooltip": { "axisPointer": { "lineStyle": { "color": "#ccc", "width": 1 }, "crossStyle": { "color": "#ccc", "width": 1 } } }, "timeline": { "lineStyle": { "color": "#8fd3e8", "width": 1 }, "itemStyle": { "normal": { "color": "#8fd3e8", "borderWidth": 1 }, "emphasis": { "color": "#8fd3e8" } }, "controlStyle": { "normal": { "color": "#8fd3e8", "borderColor": "#8fd3e8", "borderWidth": 0.5 }, "emphasis": { "color": "#8fd3e8", "borderColor": "#8fd3e8", "borderWidth": 0.5 } }, "checkpointStyle": { "color": "#8fd3e8", "borderColor": "rgba(138,124,168,0.37)" }, "label": { "normal": { "textStyle": { "color": "#8fd3e8" } }, "emphasis": { "textStyle": { "color": "#8fd3e8" } } } }, "visualMap": { "color": [ "#516b91", "#59c4e6", "#a5e7f0" ] }, "dataZoom": { "backgroundColor": "rgba(0,0,0,0)", "dataBackgroundColor": "rgba(255,255,255,0.3)", "fillerColor": "rgba(167,183,204,0.4)", "handleColor": "#a7b7cc", "handleSize": "100%", "textStyle": { "color": "#333" } }, "markPoint": { "label": { "normal": { "textStyle": { "color": "#eee" } }, "emphasis": { "textStyle": { "color": "#eee" } } } } }
main.js
// 按需引入vue-awesome图标 import Icon from 'vue-awesome/components/Icon'; import 'vue-awesome/icons/map.js'; import dataV from '@jiaminghi/data-view'; import Echart from './common/echart/index.vue' // 全局注册 Vue.component('icon', Icon); Vue.component("Echart", Echart) Vue.use(dataV); //引入echart //4.x 引用方式 //import echarts from 'echarts'; //5.x 引用方式为按需引用 //希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式 import * as echarts from 'echarts' //本例使用的是^5.4.0版本 Vue.prototype.$echarts = echarts
