uni-app本身有很多基础的组件及标签，可以满足开发者在开发过程中的所需。
例如canvas绘制图形的标签等，如果简单的样式可以自己进行绘制，但如果需要复杂且多个图形展示时，我们可以在网上uni-app插件市场中https://ext.dcloud.net.cn/也有很多已经封装好的插件。
今天就以uCharts图标插件为例，做一个小的案例。

1.gif

首先进入下载地址下载插件：https://ext.dcloud.net.cn/plugin?id=271
如果已存在的项目中插入，直接使用HBuilderX打存在的项目即可

AA50ADB410814DC59A26524CB4735CB8.jpg

下载后会自动下载至指定文件夹中，并创建文件夹

FDD4E6AA3B9445E09A220FC0554BB07F.jpg

在需要使用的页面中引用并设置

<template>
    <view>
        <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
            <view class="qiun-title-dot-light">饼状图</view>
        </view>
        <view class="qiun-charts"> 
        <!-- 为了在不同的浏览器进行适配，写了两种兼容的写法，#ifdef MP-ALIPAY为了让后端语言进行识别 -->
            <!--#ifdef MP-ALIPAY -->
            <canvas canvas-id="canvasPie" id="canvasPie" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchPie($event,'canvasPie')"></canvas>
            <!--#endif-->
            <!--#ifndef MP-ALIPAY -->
            <canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie($event,'canvasPie')"></canvas>
            <!--#endif-->
        </view>
    </view>
</template>

<script>
    // 引入插件中的js文件
    import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js'
    // 定义全局变量
    var _self;
    var canvasObj = {}
    
    export default {
        // 引入uCharts 方法组件。
        data() {
            return {
                cWidth: '',
                cHeight: '',
                tips: '',
                pixelRatio: 1,
                serverData: '',
                itemCount: 30, //x轴单屏数据密度
                sliderMax: 50
            }
        },
        onLoad() {
            _self = this;
            //#ifdef MP-ALIPAY
            uni.getSystemInfo({  // 获取系统信息
                success: function(res) {
                    if (res.pixelRatio > 1) {
                        //正常这里给2就行，如果pixelRatio=3性能会降低一点
                        //_self.pixelRatio =res.pixelRatio;
                        _self.pixelRatio = 2;
                    }
                }
            });
            //#endif
            this.cWidth = uni.upx2px(750);
            this.cHeight = uni.upx2px(500);
        },
        onReady() {
            this.getServerData(); // 执行方法
        },
        methods: {
            getServerData() {
                uni.showLoading({  // 弹框
                    title: "正在加载数据..."
                })
                
                uni.request({  // 测试使用的请求接口
                    url: 'https://unidemo.dcloud.net.cn/hello-uniapp-ucharts-data.json',
                    data: {},
                    success: function(res) {
                        console.log(res, '请求接口获取到的res')
                        _self.fillData(res.data); // 将返回的数据作为参数，异步调用另一个方法
                    },
                    fail: () => {
                        _self.tips = "网络错误，小程序端请检查合法域名";
                    },
                    complete() {
                        uni.hideLoading();
                    }
                });
            },
            fillData(data) {
                console.log(data, '返回的数据作为参数data')
                this.serverData = data;
                this.tips = data.tips;
                this.sliderMax = data.Candle.categories.length; 
                // 扇形图参数初始
                let Pie = {
                    series: []
                };
                
                Pie.series = data.Pie.series;
                console.log(Pie.series, '扇形图参数Pie.series')
                
                this.showPie("canvasPie", Pie);  // 绘制扇形图方法
            },
            // 扇形图canvasId唯一标识, chartData数据
            showPie(canvasId, chartData) {
                // 调用封装的uCharts方法，配置参数后赋值给canvasObj[canvasId]对象
                canvasObj[canvasId] = new uCharts({
                    $this: _self,
                    canvasId: canvasId,
                    type: 'pie',
                    fontSize: 11,
                    padding:[15,15,0,15],
                    legend:{
                        show:true,
                        padding:5,
                        lineHeight:11,
                        margin:0,
                    },
                    background: '#FFFFFF',
                    pixelRatio: _self.pixelRatio,
                    series: chartData.series,
                    animation: false,
                    width: _self.cWidth * _self.pixelRatio,
                    height: _self.cHeight * _self.pixelRatio,
                    dataLabel: true,
                    extra: {
                        pie: {
                            lableWidth: 15
                        }
                    },
                });
            },
            // 点击事件
            touchPie(e,id) {
              canvasObj[id].showToolTip(e, {
                  format: function(item) {
                      return item.name + ':' + item.data
                  }
              });
            },
        }
    }
</script>

<style lang="scss">
    /* 通用样式 */
    .qiun-charts {
        width: 750upx;
        height: 500upx;
        background-color: #FFFFFF;
    }
    .charts {
        width: 750upx;
        height: 500upx;
        background-color: #FFFFFF;
    }
</style>