uniapp ucharts统计图的使用

效果：

image.png
image.png
image.png
image.png

实现步骤：

1.在插件市场下载插件，使用hbuilderx导入即可。https://ext.dcloud.net.cn/plugin?id=271

$L@T5PM17Q~`J$17PL4{D5F.png
image.png

2.新建vue文件，无需引入。

源码：

<template>
    <view class="box">
        <view class="title">
            饼图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="pie" :chartData="pieData" />
        </view>
        <view class="title">
            玫瑰图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="rose" :chartData="pieData" />
        </view>
        <view class="title">
            环形图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="ring" :chartData="pieData" />
        </view>
        <view class="title">
            柱状图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="column" :chartData="chartData" :ontouch="true" />
        </view>
        <view class="title">
            折线图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="line" :chartData="chartData" :ontouch="true" />
        </view>
        <view class="title">
            区域图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="area" :chartData="chartData" />
        </view>
        
        <view class="title">
            散点图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="scatter" :chartData="chartData" />
        </view>
        <view class="title">
            词云图
        </view>
        <view class="charts-box">
            <qiun-data-charts type="word"  background="#000" :chartData="wordData" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                chartData:{
                  categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2020", "2021"],
                  series: [{
                    name: "目标值",
                    data: [36, 31, 33, 13, 34, 40, 34, 40]
                  }, {
                    name: "完成量",
                    data: [27, 21, 24, 6, 26, 30, 28, 30]
                  }]
                },
                pieData: {
                    "series":[
                        {"name":"一班","data":50},
                        {"name":"二班","data":30},
                        {"name":"三班","data":20},
                        {"name":"四班","data":18},
                        {"name":"五班","data":8},
                    ],
                },
                wordData: {
                    "series":[
                        {"name":"跨全端图表","textSize":25},
                        {"name":"微信小程序","textSize":20},
                        {"name":"支付宝小程序","textSize":20},
                        {"name":"百度小程序","textSize":20},
                        {"name":"QQ小程序","textSize":20},
                        {"name":"头条小程序","textSize":20},
                        {"name":"抖音小程序","textSize":20},
                        {"name":"360小程序","textSize":20},
                        {"name":"跨全端","textSize":10},
                        {"name":"跨全端","textSize":12},
                        {"name":"跨全端","textSize":10},
                        {"name":"跨全端","textSize":12},
                        {"name":"跨全端","textSize":10},
                        {"name":"跨全端","textSize":12},
                        {"name":"跨全端","textSize":10},
                        {"name":"跨全端","textSize":12},
                    ],
                }
            }
        },
        methods: {
            
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        padding: 30rpx;
        .title {
            font-size: 32rpx;
            font-weight: bold;
        }
        .charts-box{
          width: 100%;
          height:300px;
        }
    }
</style>

具体配置的修改在config-ucharts.js

image.png

如果不知道怎么配置，可以参考ucharts的在线生成工具，选择想要的效果会自动生成下图中的config-ucharts.js，然后就只需要把这个config-ucharts.js复制到项目中的config-ucharts.js中即可，非常的方便！！！https://demo.ucharts.cn/#/

image.png
image.png

![KF(CZD(P3UU}4X}N1L9RCG.png