在这里插入图片描述
前言:突然有这样雷达图表的需求,之前使用的秋云图表,一开始以为可以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%样式…)

Logo

前往低代码交流专区

更多推荐