1.首先安装echart
2.引用
import echarts from ‘echarts’
Vue.prototype.$echarts = echarts;
3.引入地图数据 import worldJson from ‘echarts/map/json/world.json’
注意:name与你引入的echart库的map下word.js,保持一致
{ name: ‘United States’, value: 12247.116, selected: true},
遇到两个
{ name: ‘United States of America’, value: 12247.116, selected: true}
<template>
<div class="echart">
<div ref="worldDiv" style="width: 900px;height: 600px;"></div>
</div>
</template>
<script>
import worldJson from 'echarts/map/json/world.json'
export default {
name: 'World',
data() {
return {
option: {
title: {
text: 'World Population (2020)',
subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',
x: 'center',
y: 'top'
},
tooltip: {
trigger: 'item',
// formatter: function (params) {
// var value = (params.value + '').split('.');
// console.log('params',value)
// console.log('value', value)
// value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
// + '.' + value[1];
// return params.seriesName + '<br/>' + params.name + ' : ' + value;
// }
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
// dataRange: {
// min: 0,
// max: 1000000,
// text: ['High', 'Low'],
// realtime: false,
// calculable: true,
// color: ['orangered', 'yellow', 'lightskyblue']
// },
series: [
{
name: 'World Population (2010)',
type: 'map',
mapType: 'world',
roam: true,
mapLocation: {
y: 60
},
itemStyle: {
normal: {
label: {
show: false
},
areaColor: '#0D62AA',
borderColor: '#41c7db ',
borderWidth: 0,