如何使用秋云ucharts图新文档

一.下载依赖放进自己的项目里

2.在components里新建组件ChartsXX,就是你要引入到页面里的图表内容

<template>
	<view>
	<view class="charts-box">
	<!--qiun-data-charts就是你下载的那个组件,放在项目里使用:opts里的内容是我用来控制图表展示数据的，这里默认开启拖拽，不用可以删除掉disableScroll="true"-->
		<qiun-data-charts type="demotype" canvasId="chartData"
			:opts="{enableScroll:true,dataLabel:false,xAxis:{scrollShow:true,itemCount:12,disableGrid:true}}"
			:ontouch="true" :canvas2d="true" :chartData="chartData" :inScrollView="true" :disableScroll="true" />
	</view>
	</view>
</template>

2.1 这里的数据data，就是你插入数据的格式

<script>
	export default {
		name: "charts_qyxq",
		data() {
			return {
				//这一数据格式是折线图的数据格式，柱状图以及原型图数据格式不一致，具体参考官网的 数据代码data

				chartData: {
					categories: [],
					//我有今日功率和昨日功率这两块，所以我自己给写死了名字，如果数据返回，可以用数据渲染
					series: [{
							"name": "今日功率",
							"data": []
						},
						{
							"name": "昨日功率",
							"data": []
						}
					],
				},
			};
		},
		beforeMount() {
			this.getChartsData()
		},
		methods: {
			getChartsData() {
				// 昨日功率缓存数据
				let userDatezr = uni.getStorageSync('detailsuser-list')
				
				// 昨日功率
				this.lastevent_used = userDatezr.map(item => {
					return item.lastPt
				})

				// 今日功率
				this.event_used = userDatezr.map(item => {
					return item.pt
				})
				
				//  给图表的底轴时间渲染值
				this.chartData.categories = userDatezr.map(item => {
					return item.hour
				})
				//给图表的今日功率和昨日功率渲染值
				this.chartData.series[0].data = this.event_used
				this.chartData.series[1].data = this.lastevent_used
			}
		}
	}
</script>

<style>
	.charts-box {
		width: 100%;
		height: 200px;
	}
</style>