- echarts的地图展示,并且带有下钻到下级市区
vue.js里面操作echarts
//vue里面修改模板
<template>
<div id="china_map_box">
<el-row>
<el-col :span="24">
<span
class="span_city"
v-for="(item, index) in cityTypeList"
:key="index"
@click="setMap(index)"
>{{ item }}/</span
>
</el-col>
</el-row>
<div id="china_map" style="height: 450px"></div>
</div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
import "@/assets/mapJson/china.js";
import { cityMap as cityMapX } from "@/assets/map/china-main-city-map.js";
export default {
data() {
return {
fristname: "",
cityTypeList: ["全国"], //保存的层级信息
mydata: [
{ name: "北京", value: "1000" },
{ name: "天津", value: "3000" },
{ name: "上海", value: "1200" },
{ name: "重庆", value: this.randomData() },
{ name: "河北", value: this.randomData() },
{ name: "河南", value: this.randomData() },
{ name: "云南", value: this.randomData() },
{ name: "辽宁", value: this.randomData() },
{ name: "黑龙江", value: this.randomData() },
{ name: "湖南", value: this.randomData() },
{ name: "安徽", value: this.randomData() },
{ name: "山东", value: this.randomData() },
{ name: "新疆", value: this.randomData() },
{ name: "江苏", value: this.randomData() },
{ name: "浙江", value: this.randomData() },
{ name: "江西", value: this.randomData() },
{ name: "湖北", value: this.randomData() },
{ name: "广西", value: this.randomData() },
{ name: "甘肃", value: this.randomData() },
{ name: "山西", value: this.randomData() },
{ name: "内蒙古", value: this.randomData() },
{ name: "陕西", value: this.randomData() },
{ name: "吉林", value: this.randomData() },
{ name: "福建", value: this.randomData() },
{ name: "贵州", value: this.randomData() },
{ name: "广东", value: this.randomData() },
{ name: "青海", value: this.randomData() },
{ name: "西藏", value: this.randomData() },
{ name: "四川", value: this.randomData() },
{ name: "宁夏", value: this.randomData() },
{ name: "海南", value: this.randomData() },
{ name: "台湾", value: this.randomData() },
{ name: "香港", value: this.randomData() },
{ name: "澳门", value: this.randomData() },
],
optionMap: {
backgroundColor: "#FFFFFF",
tooltip: {
triggerOn: "mousemove", //mousemove、click
trigger: "item",
padding: 8,
borderWidth: 1,
borderColor: "#409eff",
backgroundColor: "rgba(255,255,255,0.7)",
textStyle: {
color: "#000000",
fontSize: 13,
},
formatter: function (e, t, n) {
// console.log(e, t, n);
let data = e.data;
let context = `
<p><b style="font-size:15px;">${e.name}</b> (2021年第一季度)</p>
`;
return context;
},
},
//左侧小导航图标
visualMap: {
show: true,
left: 26,
bottom: 40,
showLabel: true,
pieces: [
{
gte: 500000,
label: ">= 500000以上",
color: "#27BC7F",
},
{
gte: 10000,
lt: 49999,
label: "10000 - 49999",
color: "#52C999",
},
{
gte: 5000,
lt: 9999,
label: "5000 - 9999",
color: "#7DD7B2",
},
{
gte: 1000,
lt: 4999,
label: "1000 - 4999",
color: "#A9E4CC",
},
{
gte: 1,
lt: 999,
label: "1-999",
color: "#D4F2E5",
},
{
lt: 0,
label: "0",
color: "#E2E7E5",
},
],
},
//配置属性
series: [
{
name: "数据",
type: "map",
map: "china",
roam: true,
label: {
normal: {
show: true, //省份名称
},
emphasis: {
// color:'green',
// show: false,
},
},
itemStyle: {
normal: {
borderWidth: 0.5, //区域边框宽度
borderColor: "#009fe8", //区域边框颜色
areaColor: "#ffefd5", //区域颜色
},
},
data: [], //数据
},
],
},
};
},
methods: {
randomData() {
return Math.random() * 10000;
},
setMap(index) { // 《这个是顶部显示的 类似面包屑》
var myChart = echarts.init(document.getElementById("china_map"));
let name = this.cityTypeList[index];
console.log(name);
if (name != "全国") {
let cityName = cityMapX[name];
var appData = require(`@/assets/map/${cityName}`);
echarts.registerMap(name, appData);
this.optionMap.series[0]["map"] = name;
} else {
this.optionMap.series[0]["map"] = "china";
this.setEchartOption();
}
this.cityTypeList.splice(index + 1);
myChart.setOption(this.optionMap, true);
},
init() {
//初始化echarts实例
let _this = this;
var myChart = echarts.init(document.getElementById("china_map"));
myChart.on("click", function (params) {
// let cityName = cityMap.cityMap[params.name];
// var appData = require(`@/assets/mapJson/${cityName}`);
let cityName = cityMapX[params.name];
console.log(cityName);
if (!cityName) {
return;
}
var appData = require(`@/assets/map/${cityName}`);
_this.cityTypeList.push(params.name);
_this.optionMap.series[0]["map"] = params.name;
echarts.registerMap(params.name, appData);
// _this.optionMap.series[0]["data"] = _this.mydatacity; 数据展示
myChart.setOption(_this.optionMap, true);
});
//使用制定的配置项和数据显示图表
myChart.setOption(this.optionMap);
},
setEchartOption() {
this.optionMap.series[0]["data"] = this.mydata;
},
},
created() {
this.setEchartOption();
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
.span_city {
font-size: 15px;
font-weight: 520;
cursor: pointer;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
margin-right: 5px;
&:hover {
color: #32be84;
text-decoration: #7dd7b2;
}
}
.row_item {
i{
color: #8c8c8c !important;
}
& > span {
width: 130px;
text-align: right;
/* float: inherit; */
display: inline-block;
margin-right: 5px;
}
.nums_all {
margin-top: 10px;
display: inline-block;
span {
background: #f2f7f7;
font-size: 12px;
padding: 2px 4px;
border: 1px solid #ebebeb;
}
}
}
</style>
//上面就是页面上echarts的配置
数据文件存放地址 提取码:zzta
文件的引入方式是你自己的文件存放相对位置,差不多就完了可以初步显示。
需要注意的点
- 文件的引用位置,写你自己的位置
- china-main-city-map.js文件的编号对应json文件
- series:[{ roam: true}] //是否允许 地图的缩放
- 文件的加载最好采用动态加载 require(
@/assets/map/${cityName}
) - myChart.setOption(_this.optionMap, true); 第二个参数表示是否重新绘制画布,允许缩放的时候这个加上挺重要的!
差不多就这样完成基本设置
效果如图:
这样就完成了地图下钻展示了,颜色的不同是因为传给地图data的数据,要有对应的省市区的值才会显示。