1. 下載ECharts 插件
npm i echarts --save
2. 引入省市地圖
import echarts from 'echarts'
Vue.prototype.echarts = echarts
import '../node_modules/echarts/map/js/province/beijing.js' // 引入北京地圖數據
3. 模塊中佈局
<template>
<div class='container'>
<div class='mychart' id='mychart'></div>
</div>
</template>
4. 在組件JS中定義方法
<script>
export default {
data () {
return {}
},
mounted () {
this.myChart()
},
methods: {
myChart () {
// 基於準備好的dom，初始化echarts實例
let mychart = this.echarts.init(document.getElementById('mychart'))
// 監聽屏幕變化自動縮放圖表
window.addEventListener('resize', function () {
mychart.resize()
})
// 繪製圖表
mychart.setOption({
// 圖表主標題
title: {
// 文本
text: '北京',
// 值: 'top', 'middle', 'bottom' 也可以是具體的值或者百分比
top: 25,
// 值: 'left', 'center', 'right' 同上
left: 'center',
// 文本樣式
textStyle: {
// 字體大小
fontSize: 25,
// 字體粗細
fontWeight: 650,
// 字體顏色
color: '#fff'
}
},
// 提示框組件
tooltip: {
// 觸發類型, 數據項圖形觸發
trigger: 'item',
// 使用函數模板，傳入的數據值 ——> value: number | Array
formatter: function (val) {
return val.data.name + '<br>人口數量: ' + val.data.value + '萬'
}
},
// 視覺映射組件
visualMap: {
// continuous 類型爲連續型
type: 'continuous',
show: true, // 是否顯示 visualMap-continuous 組件 如果設置爲 false，不會顯示，但是數據映射的功能還存在
// 指定 visualMapContinuous 組件的允許的最小/大值 min/max 必須用戶指定
min: 0,
// min,max 形成了視覺映射的定義域
max: 400,
// 文本樣式
textStyle: {
// 字體大小
fontSize: 15,
// 字體顏色
color: '#fff'
},
// 拖拽時，是否實時更新
realtime: false,
// 是否顯示拖拽用的手柄
calculable: true,
// 定義在選中範圍中的視覺元素
inRange: {
// 圖元的顏色
color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5']
}
},
series: [
{
// 類型
type: 'map',
// 系列名稱，用於tooltip的顯示，legend 的圖例篩選 在 setOption 更新數據和配置項時用於指定對應的系列
map: '北京',
// 地圖類型
mapType: 'province',
// 是否開啓鼠標縮放和平移漫遊 默認不開啓
// 如果只想要開啓縮放或者平移，可以設置成 'scale' 或者 'move' 設置成 true 爲都開啓
roam: false,
// 定位 值: 'top', 'middle', 'bottom' 也可以是具體的值或者百分比
top: 70,
// 圖形上的文本標籤
label: {
show: false // 是否顯示對應地名
},
// 地圖區域的多邊形 圖形樣式
itemStyle: {
// 地圖區域的顏色 如果設置了visualMap, 這個屬性將不起作用
areaColor: '#7B68EE',
// 描邊線寬 爲 0 時無描邊
borderWidth: 0.5,
// 圖形的描邊顏色 支持的顏色格式同 color
borderColor: '#000',
// 描邊類型，默認爲實線，支持 'solid', 'dashed', 'dotted'
borderType: 'solid'
},
// 高亮狀態
emphasis: {
// 文本標籤
label: {
// 是否顯示標籤
show: true,
// 文字的顏色 如果設置爲 'auto'，則爲視覺映射得到的顏色，如系列色
color: '#fff'
},
// 圖形樣式
itemStyle: {
// 地圖區域的顏色
areaColor: '#FF6347'
}
},
// 地圖系列中的數據內容數組，數組項可以爲單個數值
data: [
{ name: '懷柔區', value: 38.4, lng: 116.63853, lat: 40.322563 },
{ name: '密雲區', value: 47.9, lng: 116.849551, lat: 40.382999 },
{ name: '昌平區', value: 196.3, lng: 116.237832, lat: 40.226854 },
{ name: '順義區', value: 102, lng: 116.663242, lat: 40.1362 },
{ name: '平谷區', value: 42.3, lng: 117.128025, lat: 40.147115 },
{ name: '門頭溝區', value: 30.8, lng: 116.108179, lat: 39.94648 },
{ name: '海淀區', value: 369.4, lng: 116.304872, lat: 39.96553 },
{ name: '石景山區', value: 65.2, lng: 116.229612, lat: 39.912017 },
{ name: '西城區', value: 129.8, lng: 116.372397, lat: 39.918561 },
{ name: '東城區', value: 90.5, lng: 116.42272, lat: 39.934579 },
{ name: '朝陽區', value: 395.5, lng: 116.449767, lat: 39.927254 },
{ name: '大興區', value: 156.2, lng: 116.348053, lat: 39.732833 },
{ name: '房山區', value: 104.6, lng: 116.149892, lat: 39.755039 },
{ name: '豐臺區', value: 232.4, lng: 116.293105, lat: 39.865042 }
]
}
]
})
// 定時顯示提示框和高亮效果
let index = -1
setInterval(function () {
// 隱藏提示框
mychart.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index
})
// 顯示提示框
mychart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index + 1
})
// 取消高亮指定的數據圖形
mychart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index
})
// 高亮指定的數據圖形
mychart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: index + 1
})
index++
if (index > cityArr.length - 1) {
index = -1
}
}, 2000)
}
}
}
</script>