uniapp-使用echarts中的复杂图表（雷达图）

前言：突然有这样雷达图表的需求，之前使用的秋云图表，一开始以为可以echarts原生配置，但是我看源码好像只支持app和h5端，（应该是这样的，如果说错了请评论告诉我…）然后果断放弃秋云，使用 echarts mpvue-echarts

第一步：

npm install echarts mpvue-echarts //安装插件

第二步：需要echarts的js样式
https://echarts.apache.org/zh/builder.html在这个链接里选择需要的图表样式及组件，下载下js文件，可以放入components文件中。
第三步：
文件引入并使用

<template>
	<view>
		<mpvue-echarts id="main" ref="mapChart" canvasId="main" @onInit="renderMap" />
	</view>		
</template>

<script>
import * as echarts from "../../../orderPackges/components/echarts.min.js"
import mpvueEcharts from "mpvue-echarts"
export default{
	data(){
		return{
			echarts,
		}
	},
	components: {
			mpvueEcharts
	},
	methods:{
		renderMap(e) {
				let {
					canvas,
					width,
					height
				} = e;
				echarts.setCanvasCreator(() => canvas);
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(chart);
				let that = this
				var optionMap = {}; // 在echarts调整好后的代码
				//初始化echarts实例
				chart.setOption(optionMap);
				this.$refs.mapChart.setChart(chart);
			},
	}
}
</script>

这时候运行代码是报错的，需要替换 node_modules/mpvue-echarts/src/echarts.vue里的代码
这个链接就是替换的代码

修改完毕后运行代码，不出意外还是会报错的，然后在55行加上以下代码，问题就可以解决。

this.$emit('onInit', {
	canvas: this.canvas, // 加上这行代码
	width: res.width,
	height: res.height
});

最后，再运行一下，不出意外图表就有了，如果有意外，请评论交流。

（注：引入图表还有个问题就是图表不会随着页面的滑动而滑动，解决办法是图表的父级元素不能有overflow:auto;height:100%样式…）