e-cahr的地图组件封装(浙江省为例)
需要额外引入地区的js文件 js 文件在你node—module的e-char包里就可以找到,json和js格式都有
<style lang="less"> .o-echarts { min-width: 30px; min-height: 30px; width: 100%; height: 100%; } </style> <template> <div :id="id" class="o-echarts"></div> </template> <script> import echarts from "echarts" import JSON from "./zhejiang.json" export default { props: { dataMap: {}, maxNumber: { type: String, default: "0", }, }, name: "echart-map", data() { return { id: "echarts_" + new Date().getTime() + Math.floor(Math.random() * 1000), echartObj: null, option: { title: { text: "", top: "3%", left: "5%", textStyle: { fontSize: 18, fontWeight: 300, color: "#b6d7ff", }, }, tooltip: { padding: 0, backgroundColor: "transparent", formatter: (params) => { return ` <div style="height:50px;width:100px;background:black;color:white;font-size:14px;opacity: 0.6;line-height:50px;text-align:center;">园区数量:${params.data.obj.a}</div> ` }, }, legend: { orient: "vertical", top: "9%", left: "5%", icon: "circle", data: [], selectedMode: "single", selected: {}, itemWidth: 12, itemHeight: 12, itemGap: 30, inactiveColor: "#b6d7ff", textStyle: { color: "#ec808d", fontSize: 14, fontWeight: 300, padding: [0, 0, 0, 15], }, }, visualMap: { min: 0, max: 10, show: false, splitNumber: 5, inRange: { color: [ "#FACD91", "#74DFB2", "#81D3F8", "#768FDE", "#e9969f", ].reverse(), }, textStyle: { color: "#fff", }, }, geo: { map: "浙江", label: { normal: { show: true, color: "#000", }, emphasis: { show: true, color: "#fff", }, }, roam: false, itemStyle: { normal: { areaColor: "#8db200", borderColor: "#6367ad", borderWidth: 1, }, emphasis: { areaColor: "#feb6aa", // hover效果 }, }, left: "5%", right: "5%", top: "5%", bottom: "5%", }, series: [ { name: "", type: "map", geoIndex: 0, // 不可缺少,否则无tooltip 指示效果 data: [], }, ], }, } }, watch: { maxNumber: { handler(val) { this.option.visualMap.max = val this.echartObj = echarts.init(document.getElementById(this.id)) echarts.registerMap("浙江", JSON) this.echartObj.setOption(this.getOptions(), true) this.echartObj.on("click", function (params) { console.log(params) //逻辑控制----联动事件,触发父组件的事件 }) this.echartObj.clear() this.echartObj.setOption(this.getOptions()) }, deep: true, }, }, mounted() { window.addEventListener("resize", () => { if (this.echartObj && this.echartObj.resize) { this.echartObj.resize() //地图重置 } }) }, methods: { getOptions() { this.setOptions( "series", (() => { const arr = [] arr.push({ //添加市级数组 name: "", type: "map", geoIndex: 0, // 不可缺少,否则无tooltip 指示效果 data: this.getSeriesData(true), }) return arr })() ) return this.option }, getSeriesData(item) { //设置每块市级信息 return item ? JSON.features.map((item) => { return { name: item.properties.name, value: this.getvalue(item.properties.name), obj: { a: this.getobj(item.properties.name), }, } }) : [] }, setOptions(objKey, objVal) { if ( this.option[objKey] && typeof this.option[objKey] === "object" && !Array.isArray(this.option[objKey]) ) { this.option[objKey] = Object.assign(this.option[objKey], objVal) } else { this.option[objKey] = objVal } this.$set(this.option, objKey, this.option[objKey]) }, getvalue(item) { //返回地图热力信息--用于地图颜色识别 for (var i = 0; i < this.dataMap.length; i++) { if (this.dataMap[i].name == item) { return this.dataMap[i].number } } }, getobj(item) { //返回提示框信息--鼠标移入效果 for (var i = 0; i < this.dataMap.length; i++) { if (this.dataMap[i].name == item) { return this.dataMap[i].number } } }, }, } </script>