当前位置：首页 > news >正文

uniapp小程序使用echarts

news 来源：原创 2025/4/24 10:56:30

1、引入插件

在Dcloud插件市场下载echarts插件：插件地址

2、页面使用简单示例：

<template><view class="pie-view flex-center"><view style="width: 100%; height: 600rpx"><l-echart ref="chartRef" @finished="init"></l-echart></view></view>
</template><script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
export default {components: {},data() {return {option: {color: ['#93beff', '#507afc', '#fac858'],tooltip: {trigger: 'item',formatter: '{a} {b}: {c} ({d}%)'},legend: {left: 'center',top: '0%',},series: [{type: 'pie',radius: '40%',avoidLabelOverlap: false,itemStyle: {normal: {label: {show: true,formatter: function (params) {const { name, value, percent } = params;return `${name}：\n\n${value} (${percent}%)`;}},}},labelLine: {show: true,length: 10,length2: 10},data: [{ value: 1, name: '已验收' },{ value: 2, name: '已整改' },{ value: 3, name: '未整改' },{ value: 4, name: '延期' },{ value: 5, name: '超期' }]}]},}},onLoad() {this.init();},mounted() {},methods: {async init() {// chart 图表实例不能存在data里const chart = await this.$refs.chartRef.init(echarts);chart.setOption(this.option);},}
}
</script><style scoped lang="scss">
.flex-center {display: flex;align-items: center;
}
.pie-view {padding-top: 30rpx;width: 100%;height: 640rpx;border-radius: 16rpx;background: #FFFFFF;box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.3);justify-content: center;
}
</style>

3. 完整教程可以直接看lime-echart: 百度图表 echarts，uniapp、taro 使用 echarts 图表，全面兼容各平台小程序、H5、APP、Nvue