0. 准备
- 安装echarts，
1.plugins/echart.js
import echarts from "echarts"
//不导入一下三个，地图显示不完全（不太理解，有理解的，请赐教）
import world from 'echarts/map/json/china.json'
import 'echarts/map/js/china'
echarts.registerMap('world', world)
const install = function (Vue, options) {
// 添加实例方法
Object.defineProperties(Vue.prototype, {
$myChart: {
get() {
return {
ChinaMap(id){
var myChart = echarts.init(document.getElementById(id));
var option = {
title: {
text: '中华人民共和国2110年13月平均降雨量',
subtext: '练习地图',
x: 'center'
},
tooltip: {
//提示框组件。
trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
},
visualMap: {
//颜色的设置 dataRange
x: 'left',
y: 'center',
splitList: [
{
start: 1500, color: '#4682B4' },
{
start: 900, end: 1500, color: 'lightskyblue' },
{
start: 310, end: 1000, color: '#FF7F50' },
{
start: 200, end: 300, color: ' #FF4500' },
{
start: 50, end: 200, color: 'lightcoral', label: '10 到 200（想念暴雨）' },
{
start: 0, end: 50, label: '<50 干巴巴', color: 'darkred' },
],
},
series: [
{
name: '降雨量（毫米）',
type: 'map',
mapType: 'china',
roam: true,//是否开启鼠标缩放和平移漫游
itemStyle: {
normal: {
//是图形在默认状态下的样式
label: {
show: true,//是否显示标签
textStyle: {
color: "rgb(249, 249, 249)"
}
}
},
emphasis: {
//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
label: {
show: true }
}
},
top: "3%",
data: [
{
name: '北京', value: 1122 },
{
name: '天津', value: Math.round(Math.random() * 2000) },
{
name: '上海', value: Math.round(Math.random() * 2000) },
{
name: '重庆', value: Math.round(Math.random() * 2000) },
{
name: '河北', value: 0 },
{
name: '河南', value: Math.round(Math.random() * 2000) },
{
name: '云南', value: 500 },
{
name: '辽宁', value: 305 },
{
name: '黑龙江', value: Math.round(Math.random() * 2000) },
{
name: '湖南', value: 200 },
{
name: '安徽', value: Math.round(Math.random() * 2000) },
{
name: '山东', value: Math.round(Math.random() * 2000) },
{
name: '新疆', value: 34 },
{
name: '江苏', value: Math.round(Math.random() * 2000) },
{
name: '浙江', value: Math.round(Math.random() * 2000) },
{
name: '江西', value: Math.round(Math.random() * 2000) },
{
name: '湖北', value: Math.round(Math.random() * 2000) },
{
name: '广西', value: Math.round(Math.random() * 2000) },
{
name: '甘肃', value: Math.round(Math.random() * 2000) },
{
name: '山西', value: Math.round(Math.random() * 2000) },
{
name: '内蒙古', value: Math.round(Math.random() * 2000) },
{
name: '陕西', value: Math.round(Math.random() * 2000) },
{
name: '吉林', value: Math.round(Math.random() * 2000) },
{
name: '福建', value: Math.round(Math.random() * 2000) },
{
name: '贵州', value: Math.round(Math.random() * 2000) },
{
name: '广东', value: Math.round(Math.random() * 2000) },
{
name: '青海', value: Math.round(Math.random() * 2000) },
{
name: '西藏', value: 2000 },
{
name: '四川', value: Math.round(Math.random() * 2000) },
{
name: '宁夏', value: Math.round(Math.random() * 2000) },
{
name: '海南', value: Math.round(Math.random() * 2000) },
{
name: '台湾', value: Math.round(Math.random() * 2000) },
{
name: '香港', value: Math.round(Math.random() * 2000) },
{
name: '澳门', value: Math.round(Math.random() * 2000) }
]
}
]
};
myChart.setOption(option);
},
}
}
}
})
}
//将封装好的插件导出
export default install
2.main.js
将写好的插件，添加到main.js
import echarts from './plugins/echart'
Vue.use(echarts)
3. 具体组件使用
<template>
<div>
<h2>引入Echart图表</h2>
<div id="main2" style="width: 600px; height: 600px ;"></div>
<hr>
</div>
</template>
<script>
export default{
mounted() {
this.$myChart.ChinaMap('main2')
},
}
</script>
小结：
- 参数的传递问题
- 地图显示不完全问题
tips：新人自学，敬请诸君，不吝赐教。