uniapp中 秋云uCharts图表组件 基础使用

官方文档：秋云uCharts图表组件
1、导入到对应项目中

根目录会多出文件夹uni_modules

柱状图基础使用

完整代码：

<template>
	<view>
	  <view class="charts-box">
	    <qiun-data-charts type="column" :chartData="chartData" />
	  </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]
			      },
			      {
			        name:'完成量',
			        data:[18, 27, 21, 24, 6, 28]
			      }
			    ]
			},
		}
	},
} 
</script>
<style>
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box{
	  width: 100%;
	  height:300px;
	}
</style>

2、折线图
将上面结构中type改为line就是折线图type="line"

更多介绍见官方文档