ucharts动态渲染数据

原创

已于 2022-07-20 10:57:42 修改 · 8.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2020-02-28 19:48:25 首次发布

本文介绍了如何在Vue.js中引入ucharts，包括直接作为插件引入和组件方式引入。重点在于将ucharts封装为组件，并在父组件通过props传递数据，由于props值的初次更新不实时，需通过watch监听并重新赋值调用子组件的渲染方法。

ucharts引入方式分两种

第一种按插件的例子引入

<view class="qiun-columns">
	<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
		<view class="qiun-title-dot-light">基本折线图</view>
	</view>
	<view class="qiun-charts" >
		<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
	</view>
</view>

这种方式的缺点是如果体格页面需要多个图表该页面重复代码非常多看起来比较恼火

第二种就是以组件的方式引入了

基本思路就是把ucharts要用到的统计图封装成组件然后引到父组件中

demo

 <view class="lineBroken">
 	<view class="flowPassenger">
 		<em></em><text>进店客流</text><text class="seeDetail" @click="intShopRanking">查看详情</text><view style="width: 46rpx;"><image src="../static/img/triangleArrow.svg" mode="aspectFit"></image></view>
 	</view>
 	<view class="lineChart">
 		<view class="histogram_chart">
 		    <canvas
 		        :canvasId="canvasId"
 		        id="canvasId"
 		        disable-scroll="true"
 		        :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
 		        @touchstart="touchstart"
 		        @touchmove="touchmove"
 		        @touchend="touchend"
 		    />
 		    <slot />
 		</view>
 	</view>
 </view>

<script>
	import uCharts from '../js_sdk/u-charts/u-charts/u-charts.js'; //可以优化放全局 uCharts ==>使用全局
	const lineCharts = {
   
   },
	optionAs = {
   
   };
	export default {
   
   
		name: 'LineChart',
		props: {
   
   
			dataAs: {
   
   
				//数据
				type: Object,
				default: () => ({
   
   })
			},
			basicAs: {
   
   
				////通用基础项设置
				type: Object,
				default: () => ({
   
   })
			},
			xAxisAs: {
   
   
				//xAxis YAxis等轴线基础设置(圆环饼图无轴线无需设置)
				type: Object,
				default: () => ({
   
   })
			},
			yAxisAs: {
   
   
				//xAxis YAxis等轴线基础设置(圆环饼图无轴线无需设置)
				type: Object,
				default: () => ({
   
   })
			},
			legendAs: {
   
   
				//图例设置
				type: Object,
				default: () => ({
   
   })
			},
			extraAs: {
   
   
				//详情请看 http://doc.ucharts.cn/1172130
				type: Object,
				default: () => ({
   
   })
			},
			width: {
   
   
				//图标宽度
				type: Number,
				default: 750
			},
			height: {
   
   
				//图标高度
				type: Number,
				default: 500
			},
			labelKey: {
   
   
				type: String,
				default: 'categories'
			},
			valueKey: {
   
   
				type: String,
				default: 'series'
			},
			canvasId: {
   
   
				type: String,
				default: `line_canvas_${
   
   Math

最低0.47元/天解锁文章