效果：
image.png
image.png
image.png
image.png
實(shí)現(xiàn)步驟：
1.在插件市場(chǎng)下載插件叉袍，使用hbuilderx導(dǎo)入即可刽酱。https://ext.dcloud.net.cn/plugin?id=271
$L@T5PM17Q~`J$17PL4{D5F.png
image.png
2.新建vue文件棵里，無(wú)需引入。
源碼：
<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">
環(huán)形圖
</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">
區(qū)域圖
</view>
<view class="charts-box">
<qiun-data-charts type="area" :chartData="chartData" />
</view>
<view class="title">
散點(diǎn)圖
</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: "目標(biāo)值",
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的在線生成工具骏掀，選擇想要的效果會(huì)自動(dòng)生成下圖中的config-ucharts.js乔夯，然后就只需要把這個(gè)config-ucharts.js復(fù)制到項(xiàng)目中的config-ucharts.js中即可，非常的方便Ｄ┘觥！甲脏！https://demo.ucharts.cn/#/
image.png
image.png
