预览图

适合场景

使用了uniapp和Vue3并需要将图表展示在app端。
lime-chart插件地址

前提(我的废话，可以不看)：

在工作中遇到了需要在app端显示图表的情况，设计图如上。
这个效果很简单，仅仅用css就实现了。然而在后面的需求中，遇到了不得不使用图表的情况，那么就只能搬出来echart了(下文就拿这个简单的半环形做例子)。
在我编写代码的过程中，h5端按照我搜索出来别人的文章能够实现，当我信心十足在手机上查看时，发现图表并不能如我期待般展示，给我的只有一片空白。
我开始寻找解决方案，在插件市场以及官方文档找到了uchart 秋云chart 以及本文章所使用的lime-chart。
为什么使用了这个呢？因为uchart虽说是官方的，可已经很久没有维护了，秋云chart有点麻烦，最终选择了lime-chart。
lime-chart的官方示例只有vue2的，我使用的是3，2和3之间的写法有很大的区别，我找遍了全网也没有找到能成功运行的，我研究了好久，终于找出来了解决方法！(好耶
这个插件真的很不错，我不需要对之前的图表配置做改动，仅仅配置一些地方就兼容了，感谢作者！

html部分

重点是ref和finished事件。

<l-echart ref="mychart" @finished="init" custom-style="width: 300px; height: 300px"></l-echart>

引入图表及组件

我的图表在首页，需要频繁调用，我把echart挂在了App.vue里，因此需要用到getCurrentInstance。
当然调用echart还有别的方法，别的教程也有，根据自己的需求调整就好。

我这里是先intall了echart，然后再引入了lime，并没有遇到过lime文档所说的需要echart.esm.js的情况。如果需要，可在这里下载esm版本的echart文件，放到项目里并引入文件。

<script setup>
import {
	getCurrentInstance
} from 'vue';
// 引入l-echart
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';

const echarts = getCurrentInstance().appContext.config.globalProperties.$echarts;

配置图表参数

该图表其实是由两个bar重叠而成。

let chartObj = $ref(null), // 图表的实例对象，要与组件上的ref名称相对应
	mychart = $ref(null), // 存放echart的实例化对象
	option = $ref({
		backgroundColor: '#fff',
		title: [{
			text: '主標題占位',
			subtext: '副標題占位',
			bottom: '50%',
			x: 'center',
			// 主标题样式
			textStyle: {
				color: '#333',
				fontSize: 28
			},
			// 副标题样式
			subtextStyle: {
				color: '#999999',
				fontSize: 13,
				top: 'center'
			}
		}],
		legend: [{
		    // 取消图例上的点击事件
		    // （我这边需求不需要点击图表后高亮显示，因此配置了此项）
			selectedMode: false
		}],
		angleAxis: {
			show: false,
			max: 100 * 360 / 180, // -45度到225度，二者偏移值是270度除360度
			type: 'value',
			startAngle: 180, // 极坐标初始角度
			splitLine: {
				show: false
			}
		},
		barMaxWidth: 10, // 圆环宽度
		radiusAxis: {
			show: false,
			type: 'category',
		},
		// 圆环位置和大小
		polar: {
			center: ['50%', '50%'],
			radius: '120%'
		},
		series: [
	       // 上层蓝色圆环，展示数据
	       {
				type: 'bar',
				data: [{
					value: 100,
					itemStyle: {
						color: '#3675f6'
					},
				}],
				emphasis: {
					disabled: true
				},
				barGap: '-100%', // 柱间距离,上下两层圆环重合
				coordinateSystem: 'polar',
				roundCap: true, // 顶端圆角
				z: 3 // 圆环层级，同zindex
			},
			// 下层灰色圆环，显示最大值
			{ 
				type: 'bar',
				animation: false,  // 关闭动画效果
				data: [{
					value: 100,
					itemStyle: {
						color: '#e6e6e6'
					},
				}],
				emphasis: {
					disabled: true
				},
				barGap: '-100%',
				coordinateSystem: 'polar',
				roundCap: true,
				z: 1
			}
		]
	});

调用

init方法是组件的@finished的接收方法，无需再在生命周期里调用。
update用于更新图表数据，在里面写自己想要实现的需求直接调用即可。

    // 更新图表数据
    function update(chartTitle, ratio) {
		let chartOpt = option;
		chartOpt.title[0].text = chartTitle;
		chartOpt.series[0].data[0].value = ratio;
		// 防止数据更新不一致，可根据情况调整是否需要setTimeout
		setTimeout(() => {
			chartObj.setOption(chartOpt);
		}, 200)
	}

    // 初始化图表
	function init() {
		mychart.init(echarts, chart => {
			chart.setOption(option);
			chartObj = chart;
		});
	}
</script>

这样就大功告成啦！ ٩(๑′0`๑)۶