效果：
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
