先看效果
注意前提条件【版本要求:HBuilderX 3.1.0+】
1、插件市场点击右侧绿色按钮【使用HBuilderX导入插件】,或者【使用HBuilderX导入示例项目】查看完整示例工程
2、依赖uniapp的vue-cli项目:请将uni-modules目录复制到src目录,即src/uni_modules。(请升级uniapp依赖为最新版本)
3、页面中直接按下面用法直接调用即可,无需在页面中注册组件qiun-data-charts
4、注意父元素class='charts-box’这个样式需要有宽高
插件地址:https://ext.dcloud.net.cn/plugin?id=271
页面代码
<template>
<view class="charts">
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
<view class="charts-box">
<qiun-data-charts type="pie" :chartData="chartData2" />
</view>
</view>
</template>
<script>
export default{
data(){
return {
chartData:{
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
series: [{
name: "目标值",
data: [35, 36, 31, 33, 13, 34]
}]
},
chartData2:{
series: [{
data: [
{
name: "一班",
value: 50
}, {
name: "二班",
value: 30
}, {
name: "三班",
value: 20
}, {
name: "四班",
value: 18
}, {
name: "五班",
value: 8
}
]
}]
}
}
},
}
</script>
<style lang="scss">
.charts{
.charts-box{
width: 600rpx;
height: 600rpx;
margin: 20rpx auto;
}
}
</style>
更多操作可以查看官网,在线生成工具和常见问题
地址:https://demo.ucharts.cn/#/