echarts安装:
npm install echarts --save
在main.js中引用
// 引入Echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
引入中国地图的js
require('echarts/map/js/china.js')
require('echarts/map/js/world.js')
可以去这里下载所需要的地图数据地理小工具
创建一个地图容器
js实现
mounted() {
this.getMapChart();
},
methods: {
// 地图
getMapChart() {
this.myChart = this.$echarts.init(document.getElementById("china_map"));
// 地图配置项
var option = {
tooltip: { //自定义鼠标悬停之后弹窗的样式
className: "custom-tooltip-bk-box",
triggerOn: "mousemove", // 鼠标移动时触发
axisPointer: {
type: "none",
},
// 鼠标移到图里面的浮动提示框
// formatter详细配置: https://echarts.baidu.com/option.html#tooltip.formatter
formatter(params, ticket, callback) {
// params.data 就是series配置项中的data数据遍历
let deptTotal, schoolTotal, studentTotal;
if (params.data) {
deptTotal = params.data.value;
schoolTotal = params.data.schoolTotal;
studentTotal = params.data.studentTotal;
} else {
// 为了防止没有定义数据的时候报错写的
deptTotal = 0;
schoolTotal = 0;
studentTotal = 0;
}
let htmlStr = `
河南:9
学校数量
27所
学生数量
6602个
`;
return htmlStr;
},
backgroundColor: "rgba(255,255,255,0)", //提示标签背景颜色
textStyle: { color: "#fff" }, //提示标签字体颜色
},
visualMap: [
{
//颜色的设置 dataRange
show: false,
itemSymbol: "circle",
left: 120,
top: 0,
splitList: [
{ start: 11, color: "lightskyblue", label: ">5000" },
{ start: 5, end: 10, color: "#F04B5F", label: "1000-500" },
{ start: 3, end: 4, color: "#1AABFF", label: "100-1000" },
{ start: 1, end: 2, color: "#FF9B50", label: "1-100" },
{ start: 0, end: 0, label: "暂无数据", color: "#196392" },
],
textStyle: {
color: "#fff",
},
},
],
// geo配置详解: https://echarts.baidu.com/option.html#geo
geo: {
// 地理坐标系组件用于地图的绘制
map: "china", // 表示中国地图
roam: false, // 是否开启鼠标缩放和平移漫游
// scaleLimit: { //滚轮缩放的极限控制
// min: 1,
// max: 2
// },
zoom: 1.05, // 地图放大
aspectScale: 0.9, //地图宽高比例
label: {
show: true,
textStyle: {
color: "#fff",
},
},
itemStyle: {
normal: {
areaColor: "#2862B3", //设置区域颜色
borderColor: "#8DC3F4", //设置各各省市边界颜色
shadowOffsetX: 6,
shadowOffsetY: 6,
shadowBlur: 10,
borderWidth: 1,
shadowColor: "RGBA(164, 211, 253, 0.2)",
},
emphasis: { //鼠标悬停之后显示的样式
color: "#ffffff",
areaColor: "#1B4FB6",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
series: [
{
name: "", // 浮动框的标题(上面的formatter自定义了提示框数据,所以这里可不写)
type: "map",
geoIndex: 0,
label: {
show: true,
},
// 这是需要配置地图上的某个地区的数据,根据后台的返回的数据进行拼接
data: [],
},
],
};
// 绘制图表
this.myChart.setOption(option);
}
}