China.js
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(["exports", "echarts"], factory);
} else if (
typeof exports === "object" &&
typeof exports.nodeName !== "string"
) {
factory(exports, require("echarts"));
} else {
factory({}, root.echarts);
}
})(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== "undefined") {
console && console.error && console.error(msg);
}
};
if (!echarts) {
log("ECharts is not Loaded");
return;
}
if (!echarts.registerMap) {
log("ECharts Map is not loaded");
return;
}
echarts.registerMap("china", {
/* 这里是GeoJSON数据放置位置 */
});
});
<template>
<div id="china_map_box">
<div id="china_map"></div>
</div>
</template>
<script>
import echarts from "echarts";
import "./china.js";
import { getCarStatus } from "../../../api/cockpit";
export default {
data() {
return {
//echart 配制option
options: {
tooltip: {
triggerOn: "mousemove", //mousemove、click
padding: 8,
borderWidth: 1,
borderColor: "#409eff", // 悬浮框的边框颜色
backgroundColor: "rgba(255,255,255,0.7)", // 悬浮框的背景色
textStyle: {
color: "#000000",
fontSize: 13,
}, // 悬浮框的文字设置
formatter: function (e, t, n) {
let data = e.data;
//模拟数据
// data.specialImportant = (Math.random() * 1000) | 0;
// data.import = (Math.random() * 1000) | 0;
// data.compare = (Math.random() * 1000) | 0;
// data.common = (Math.random() * 1000) | 0;
// data.specail = (Math.random() * 1000) | 0;
// let context = `
// <div>
// <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
// <p class="tooltip_style"><span class="tooltip_left">事件总数</span><span class="tooltip_right">${data.value}</span></p>
// <p class="tooltip_style"><span class="tooltip_left">特别重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p>
// <p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p>
// <p class="tooltip_style"><span class="tooltip_left">较大事件</span><span class="tooltip_right">${data.compare}</span></p>
// <p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p>
// <p class="tooltip_style"><span class="tooltip_left">特写事件</span><span class="tooltip_right">${data.specail}</span></p>
// </div>
// `;
let context = ` <div> <p><b style="font-size:15px;">${data.name}</b></p>
<p class="tooltip_style"><span class="tooltip_left">车辆总数:</span><span class="tooltip_right">${data.value}</span></p>
</div> `;
return context;
},
},
visualMap: {
show: true,
left: 26,
bottom: 40,
showLabel: true,
pieces: [
{
gte: 100,
label: ">= 1000",
color: "#1f307b",
},
{
gte: 500,
lt: 999,
label: "500 - 999",
color: "#3c57ce",
},
{
gte: 100,
lt: 499,
label: "100 - 499",
color: "#6f83db",
},
{
gte: 10,
lt: 99,
label: "10 - 99",
color: "#9face7",
},
{
lt: 10,
label: "<10",
color: "#bcc5ee",
},
],
textStyle: {
color: "#fff",
fontSize: 13,
},
},
geo: {
map: "china",
scaleLimit: {
min: 1,
max: 2,
},
zoom: 1,
top: 120,
label: {
normal: {
show: true,
fontSize: "14",
color: "rgba(0,0,0,0.7)", // 地图中省份的文字颜色
},
},
itemStyle: {
normal: {
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)", // 地图中各省边境分割线的颜色
},
emphasis: {
areaColor: "#f2d5ad", // 地图中省份 hover 时的颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0,
},
},
},
series: [
{
name: "车辆",
type: "map",
geoIndex: 0,
data: [],
},
],
},
//echart data
dataList: [
{
name: "南海诸岛",
value: 0,
eventTotal: 100,
specialImportant: 10,
import: 10,
compare: 10,
common: 40,
specail: 20,
},
{
name: "北京",
value: 0,
},
{
name: "天津",
value: 0,
},
{
name: "上海",
value: 0,
},
{
name: "重庆",
value: 0,
},
{
name: "河北",
value: 0,
},
{
name: "河南",
value: 0,
},
{
name: "云南",
value: 0,
},
{
name: "辽宁",
value: 0,
},
{
name: "黑龙江",
value: 0,
},
{
name: "湖南",
value: 0,
},
{
name: "安徽",
value: 0,
},
{
name: "山东",
value: 0,
},
{
name: "新疆",
value: 0,
},
{
name: "江苏",
value: 0,
},
{
name: "浙江",
value: 0,
},
{
name: "江西",
value: 0,
},
{
name: "湖北",
value: 0,
},
{
name: "广西",
value: 0,
},
{
name: "甘肃",
value: 0,
},
{
name: "山西",
value: 0,
},
{
name: "内蒙古",
value: 0,
},
{
name: "陕西",
value: 0,
},
{
name: "吉林",
value: 0,
},
{
name: "福建",
value: 0,
},
{
name: "贵州",
value: 0,
},
{
name: "广东",
value: 0,
},
{
name: "青海",
value: 0,
},
{
name: "西藏",
value: 0,
},
{
name: "四川",
value: 0,
},
{
name: "宁夏",
value: 0,
},
{
name: "海南",
value: 0,
},
{
name: "台湾",
value: 0,
},
{
name: "香港",
value: 0,
},
{
name: "澳门",
value: 0,
},
],
count: 0, // 全部车辆
};
},
methods: {
//初始化中国地图
initEchartMap() {
let mapDiv = document.getElementById("china_map");
let myChart = this.$echarts.init(mapDiv);
myChart.setOption(this.options);
},
//修改echart配制
setEchartOption() {
this.getCarStatus(); // 获取全部车辆
setTimeout(() => {
this.options.series[0]["data"] = this.dataList;
}, 200)
},
/**
* @Interface 获取全部车辆数据
* */
getCarStatus() {
getCarStatus().then((res) => {
if (res.code === 1) {
this.count = res.data.count;
this.dataList.forEach((item, index) => {
if (item.name === "江苏") {
item.value = res.data.count;
}
});
}
});
},
},
created() {
},
mounted() {
this.setEchartOption();
setTimeout(() => {
this.initEchartMap();
}, 500)
this.$nextTick(() => {
});
},
};
</script>
<style scoped>
#china_map_box {
height: 100%;
position: relative;
}
#china_map_box #china_map {
height: 100%;
}
#china_map_box .china_map_logo {
position: absolute;
top: 0;
left: 0;
width: 45px;
}
</style>
<style>
#china_map .tooltip_style {
line-height: 1.7;
overflow: hidden;
}
#china_map .tooltip_left {
float: left;
}
#china_map .tooltip_right {
float: right;
}
</style>