echarts 实现各种图表

地图（china map）

// html
<div ref="fillcontainer">
	<div id="fundPosition"></div>
</div>

//js
<script>
import echarts from 'echarts'; // 引入echarts插件
import '../../../node_modules/echarts/map/js/china.js'; // 引入china map数据
import '../../../node_modules/echarts/theme/roma.js' // 引入主题颜色

export default {
   
	data () {
   
		return {
   
			chart: null
		}
	},
	mounted () {
   
		this.$nextTick(function() {
   
			this.$refs.fillcontainer.style.height = (document.body.clientHeight - 160) + 'px';
			this.drawMap('fundPosition') // 传入id
			var that = this;
			var resizeTimer = null;
			// 保证页面在放大或缩小时，也能动态显示数据
			window.onresize = function () {
   
				if (resizeTimer) clearTimeout(resizeTimer);
				resizeTimer = setTimeout(function () {
   
					that.$refs.fillcontainer.style.height = (document.body.clientHeight 160) + 'px';
					that.drawMap('fundPosition');
				}, 100)
			}
		})
	},
	methods: {
   
		randomData () {
   
			return Math.round(Math.random() * 1000000);
		}
		drawMap(id) {
   
			if (this.chart && this.chart.dispose) {
   
				this.chart.dispose(); // 释放图表
			}
			this.chart = echarts.init(document.getElementById(id), "roma") // 第一个参数是ID名，第二个参数是主题色
			this.chart.setOption({
    // 配置图表
				title: {
   
					text: '2021年全国各省份投资情况',
					subtext: '单位/万元',
					left: 'center'
				},
				tooltip: {
   
					trigger: 'item'
				},
				legend: {
   
					orient: 'vertical',
					left: 'left',
					data: ['总投资额']
				},
				visualMap: {
   
					min: 0,
					max: 1200000,
					left: 'left',
					top: 'bottom',
					text: ['高', '低'], // 文本 默认为数值
					calculable: true
				},
				toolbox: {
   
					show: true,
					orient: 'vertical',
					left: 'right',
					top: 'center',
					feature: {
    // 功能按钮
						dataView: {
   readOnly: false}, // 数据视图
						restore: {
   }, // 还原
						saveAsImage: {
   } // 保存为图片
					}
				},
				series: [
					{
   
						name: '总投资额',
						type: 'map',
						mapType: 'china',
						roam: false,
						label: {
   
							normal:{
   
								show: true
							},
							emphasis: {
   
								show: true
							},
							data:[
                            {
   name: '北京',value: this.randomData() },
                            {
   name: '天津',value: this.randomData() },
                            {
   name: '上海',value: this.randomData() },
                            {
   name: '重庆',value: this.randomData() },
                            {
   name: '河北',value: this.randomData() },
                            {
   name: '河南',value: this.randomData() },
                            {
   name: '云南',value: this.randomData() },
                            {
   name: '辽宁',value: this.randomData() },
                            {
   name: '黑龙江',value: this.randomData() },
                            {
   name: '湖南',value: this.randomData() },
                            {
   name: