uniapp中uCharts的使用

先看效果

注意前提条件【版本要求：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/#/