将vue我的项目外面通过引入echarts，实现简略地图数据渲染，代码非凡中央通过正文表明
留神：
装置 cnpm i echarts -S 4.9.0
最新的5.0引入形式不一样，如果间接应用cnpm i echarts -S会装置最新的版本，引入形式也要追随文档更改
main.js
import echarts from 'echarts'Vue.prototype.$echarts = echarts 主页面：
<template> <div id="china_map" :style="{ width: width, height: '400px' }"></div></template><script> import china from "echarts/map/json/china.json"; //中国地图echarts.registerMap("china", china);export default { name: "index", props: { className: { type: String, default: "chart", }, width: { type: String, default: "100%", }, }, data(){ } mounted() { this.setMapData(); }, methods: { // 地图 setMapData() { // 初始化echarts实例 #D8E9FD this.chinachart = echarts.init(document.getElementById("china_map")); // 进行相干配置 this.chartOption = { tooltip: { // 鼠标移到图外面的浮动提示框 // formatter具体配置： https://echarts.baidu.com/option.html#tooltip.formatter formatter(params, ticket, callback) { // params.data 就是series配置项中的data数据遍历 let localValue, perf, downloadSpeep, usability, point; if (params.data) { localValue = params.data.value; perf = params.data.perf; downloadSpeep = params.data.downloadSpeep; usability = params.data.usability; point = params.data.point; } else { // 为了避免没有定义数据的时候报错写的 localValue = 0; perf = 0; } let htmlStr = ` <div style='font-size:18px;'> ${params.name}</div> <p style='text-align:left;margin-top:-4px;'> 我的项目数量：${localValue}<br/> 占比：${perf}<br/> </p> `; return htmlStr; }, backgroundColor: "#ff7f50", //提醒标签背景色彩 textStyle: { color: "#fff" }, //提醒标签字体色彩 }, visualMap: { show: true, bottom: 60, right: 200, text: ["高", "低"], // min:0, // precision:0, itemHeight: 200, color: [ "#5475f5", "#9feaa5", "#85daef", "#74e2ca", "#e6ac53", "#9fb5ea", ], }, // geo配置详解： https://echarts.baidu.com/option.html#geo geo: { // 天文坐标系组件用于地图的绘制 map: "china", // 示意中国地图 // roam: true, // 是否开启鼠标缩放和平移漫游 zoom: 1.2, // 以后视角的缩放比例（地图的放大比例） label: { // show: true }, itemStyle: { // 地图区域的多边形 图形款式。 normal: { //未选中的状态 borderColor: "#ffffff", areaColor: "#D8E9FD", //背景色彩 label: { // show: true, //显示名称 }, }, emphasis: { //选中的状态 // 高亮状态下的多边形和标签款式 shadowBlur: 20, shadowColor: "rgba(0, 0, 0, 0.5)", borderColor: "#fff", areaColor: "#DA3A3A", }, }, }, series: [ { name: "地图", // 浮动框的题目（下面的formatter自定义了提示框数据，所以这里可不写） type: "map", geoIndex: 0, label: { show: true, }, // 这是须要配置地图上的某个地区的数据，依据后盾的返回的数据进行拼接（上面是我定义的假数据） data: [ { name: "北京", value: 599, // 我的项目数量 perf: "60%", // 我的项目占比 }, { name: "上海", value: 142, perf: "40%", }, { name: "黑龙江", value: 44, perf: "1%", }, { name: "新疆", value: 999, perf: "70%", }, ], }, ], }; // 应用刚指定的配置项和数据显示地图数据 this.chinachart.setOption(this.chartOption); }, }}</script>