> 技术文档 > uniapp小程序使用echarts_uniapp echarts

uniapp小程序使用echarts_uniapp echarts

1、引入插件

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

2、页面使用简单示例:

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);},}}.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;}

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