安装echarts
npm install echarts
在main.js写入
import echarts from 'echarts'
import 'echarts/map/js/china'
Vue.prototype.$echarts = echarts
map地图组件
<template>
<div class="chinaecharts">
<div id="mapChart" ref="mapChart" ></div>
</div>
</template>
<script>
export default {
name: 'ChinaEcharts',
methods: {
mapFn(){
// 基于准备好的dom,初始化echarts实例
// var mapChart = this.$echarts.init(this.$refs.mapChart);
var mapChart = this.$echarts.init(document.getElementById('mapChart'));
mapChart.setOption({
backgroundColor: '', //背景颜色
title: {
text: '你好啊中国',
subtext: '我来自中国',
color: '#fff',
fontSize:'14px',
// sublink: 'http://www.pm25.in',
x:'left',
},
//是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。
visualMap: {
orient: 'horizontal',
text:['低','高'],
min: 0, //最小值
max: 600, //最大值
calculable: false, //是否显示拖拽用的手柄(手柄能拖拽调整选中范围)。
inRange: {
color: ['#0F9D90', '#39B1A6', '#95DCD7', '#AEE7E4', '#D7FBFA'] //颜色
},
textStyle: {
color: '#000'
},
},
// 提示框,鼠标移入
tooltip:{
show:true, //鼠标移入是否触发数据
trigger: 'item', //出发方式
formatter:'{b}-销售数量:{c}'
},
//配置地图的数据,并且显示
series:[
{
name:'地图'