Project development: With the development of society, the visualization of some data has also increased. I will provide you with a set of source codes of China map and world map developed by Echarts map that I used in the development of Vue project ;
Step 1: ---Download
Download version: lower than version 5.x - version 5.x does not carry a map (cnpm install --save [email protected])
Check whether the download has china (China map), world (world map)
Step 2: --- Configuration
Introduce Echarts and its china (map of China) and world (world map) into man.js--after this step is completed, the map can be directly used in a single component
//echarts & 地图
// 引入echarts以及中国地图china.js
import * as echarts from 'echarts';
import '../node_modules/echarts/map/js/china'; //引入中国地图
import '../node_modules/echarts/map/js/world.js' // 引入世界地图
Vue.prototype.$echarts = echarts;
* I developed the plug-in through vue Address: ( development plug-in ) directly mounted on vue for repeated direct use and maintenance
//引入自己弄的echarts
import Echarts from "./plugins/echarts"
import '../node_modules/echarts/map/js/china'; //引入中国地图
import '../node_modules/echarts/map/js/world.js' // 引入世界地图
Vue.use(Echarts)
Step 3: Create plugins in the src directory to place echarts graphics in this file
Step 4: This file is used to place echarts instances for reuse and later maintenance (other echarts graphics can also be the same)
source code:
//引入echarts
import echarts from "echarts";
const install = function (Vue) {
//Object对象方法 : Es5提供:defineProperties
Object.defineProperties(Vue.prototype, {//Vue.prototype挂在vue原型身上
$charts: {
get() {
return {
//中国地图
chinaMap: function (id, data) {
// var dom = document.getElementById(id);
// var myChart = echarts.init(dom);
var myCharts = echarts.init(document.getElementById(id))
var option = {
//映射-颜色值
visualMap: [
{
// 连续形 continuous
// 分段型 piecewise
type: "piecewise", //分段
//配置颜色区间值
pieces: [
{
min: 0,
max: 0,
color: "#f6f6f6"
},
{
min: 1,
max: 10,
color: "#fab27b"
},
{
min: 10,
max: 100,
color: "#FE9E83"
},
{
min: 100,
max: 500,
color: "#E55A4E"
},
{
min: 500,
max: 10000,
color: "#4F070D"
},
]
}
],
//提示信息
tooltip: {
formatter(data) {
return "<div><p>" + data.name + "-" + data.value + "人" + "</p></div>"
}
},
series: [{
name: '省',
type: 'map', //配置图表类型
map: 'china', //中国地图
roam: false, //是否允许自动播放
zoom: 1.2, //地图缩放比例
// aspectScale: 0.75,
label: { //配置字体
normal: {
show: true,
textStyle: {
fontSize: 8, //字体大小
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal: { //配置地图样式
areaColor: 'rgba(0,255,236,0)',
borderColor: 'rgba(0,0,0,0.2)',
},
//配置阴影
emphasis: {
areaColor: '#d1c7b7', //选中颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20, //模糊程度
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: data
}]
}
myCharts.setOption(option);
},
//世界地图
worldMap: function (id, data) {
var dom = document.getElementById(id);
var myChart = echarts.init(dom);
var option = {
//映射-颜色值
visualMap: [
{
// 连续形 continuous
// 分段型 piecewise
type: "piecewise", //分段
//配置颜色区间值
pieces: [
{
min: 0,
max: 0,
color: "#f6f6f6"
},
{
min: 1,
max: 100,
color: "#fab27b"
},
{
min: 100,
max: 1000,
color: "#faa755"
},
{
min: 1000,
max: 10000,
color: "#f58220"
},
{
min: 10000,
max: 100000,
color: "#f26522"
},
{
min: 100000,
max: 1000000, color: "#b4534b"
},
{
min: 1000000,
max: 10000000,
color: "#8c531b"
}
]
}
],
//提示信息
tooltip: {
formatter(data) {
return "<div><p>" + data.name + "-" + data.value + "人" + "</p></div>"
}
},
series: [{
name: '世界地图',
type: 'map', //配置图表类型
map: 'world', //中国地图
roam: false, //是否允许自动播放
zoom: 1.2, //地图缩放比例
// aspectScale: 0.75,
label: { //配置字体
normal: {
show: false, //控制名字是否显示
textStyle: {
fontSize: 8, //字体大小
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal: { //配置地图样式
areaColor: 'rgba(0,255,236,0)',
borderColor: 'rgba(0,0,0,0.2)',
},
//配置阴影
emphasis: {
areaColor: '#d1c7b7', //选中颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20, //模糊程度
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: data,
// nameMap:datad
}]
}
myChart.setOption(option);
}
}
}
}
})
}
export default install
Step 5: Call and pass parameters in the component
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="中国地图" name="chinaMap">
<div id="chinaMap"></div>
</el-tab-pane>
<el-tab-pane label="世界地图" name="worldMap">
<div id="worldMap"></div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
//中国地图数据
TlisData: [
{
name: "北京",
value: Math.round(Math.random() * 500),
}
],
//世界地图数据
WorldData: [{ name: "Afghanistan", value: 28397.812 }],
activeName: "chinaMap",
};
},
mounted() {
// this.$charts.line("line");
// this.$charts.worldMap("worldMap");
// console.log(this.$charts.line);
//中国地图处理数据
let chinaMapdata = [];
for (let i = 0; i < this.TlisData.length; i++) {
let temp = {
name: this.TlisData[i].name,
value: this.TlisData[i].value,
itemStyle: {
normal: {
areaColor: this.setColor(this.TlisData[i].value),
},
},
};
chinaMapdata.push(temp);
}
this.$charts.chinaMap("chinaMap", chinaMapdata);
//世界地图处理数据
let worlds = [];
for (let i = 0; i < this.WorldData.length; i++) {
var temp = {
name: this.WorldData[i].name,
value: this.WorldData[i].value,
};
worlds.push(temp);
}
this.$charts.worldMap("worldMap", worlds);
},
methods: {
//处理颜色方法
setColor(value) {
let currentColor = "";
switch (true) {
case value == 0:
currentColor = "#fff";
break;
case value > 0 && value < 10:
currentColor = "#FDFDCF";
break;
case value >= 10 && value < 100:
currentColor = "#FE9E83";
break;
case value >= 100 && value < 500:
currentColor = "#E55A4E";
break;
case value >= 500 && value < 10000:
currentColor = "#4F070D";
break;
}
return currentColor;
},
//点击tab切换打印
handleClick(tab, event) {
// console.log(tab, event);
},
},
};
</script>
<style>
#chinaMap {
width: 400px;
height: 400px;
}
#worldMap {
width: 500px;
height: 500px;
}
</style>
Rendering diagram: (this contribution shows the data in this area with the included area)
1. Map of China
2: World map
Welcome everyone to supplement the deficiencies, this source code is presented, I wish you a further improvement in technology;