安装Echarts
npm install echarts --save
在阿里云可视化平台选择省市
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.840232667909365&lng=104.2822265625&zoom=4
下载需要的json文件到本地
image
HTML区域
<template>
<div>
<div style="width: 1000px; height: 800px" ref="chart"></div>
</div>
</template>
Script区域
<script>
const echarts = require("echarts");
import sdJson from "../../../public/山东省.json";
export default {
name: "Index",
data() {
return {};
},
mounted() {
this.initCharts();
},
methods: {
initCharts() {
let myChart = echarts.init(this.$refs.chart);
// 绘制图表
var option;
myChart.showLoading();
let geoJson = sdJson;
myChart.hideLoading();
echarts.registerMap("sd", geoJson);
myChart.setOption(
(option = {
// title: {
// text: "标题",
// subtext: "描述",
// },
tooltip: {
trigger: "item",
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// // dataView: { readOnly: false },//查看数据
// // restore: {},//刷新
// // saveAsImage: {},//保存图片
// },
// },
// visualMap: {
// min: 2000,
// max: 50000,
// text: ["High", "Low"],
// realtime: false,
// calculable: false,
// inRange: {
// color: ["lightskyblue", "yellow", "orangered"],
// },
// },
series: [
{
name: "山东省",
type: "map",
map: "sd",
label: {
show: true,
},
data: [
{ name: "济南市", value: 1 },
{ name: "青岛市", value: 1 },
{ name: "淄博市", value: 1 },
{ name: "枣庄市", value: 1 },
{ name: "东营市", value: 1 },
{ name: "烟台市", value: 1 },
{ name: "潍坊市", value: 1 },
{ name: "济宁市", value: 1 },
{ name: "泰安市", value: 1 },
{ name: "威海市", value: 1 },
{ name: "日照市", value: 1 },
{ name: "滨州市", value: 1 },
{ name: "德州市", value: 1 },
{ name: "聊城市", value: 1 },
{ name: "临沂市", value: 1 },
{ name: "菏泽市", value: 1 },
{ name: "莱芜市", value: 1 },
],
},
],
})
);
option && myChart.setOption(option);
},
},
};
</script>
