预览图
适合场景
使用了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`๑)۶