ucharts，数据交互

﹏ヽ暗。殇╰゛Y 2021-09-07 08:02 462阅读 0赞

<template>
    	<view>
    		<view class="ucharts-tit">kw.h</view>
    		<view class="qiun-charts">
    			<canvas canvas-id="ExtremunColumn" id="ExtremunColumn" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
    		</view>
    	</view>
    </template>
    
    <script> import uCharts from '@/components/u-charts/u-charts/u-charts.js'; var _self; var canvaColumn = null; export default { data() { return { cWidth: '', cHeight: '', pixelRatio: 1, serverData: '', back_id: this.backid, day_date: this.dayresult, day: [], name: '', event_hour: [], //小时 dayuser: [], } }, props: ['backid', 'dayresult'], watch: { backid(val) { this.event_hour = []; this.dayuser = []; this.getServerData() }, dayresult(val) { this.event_hour = []; this.dayuser = []; this.getServerData() }, }, beforeMount() { _self = this; this.cWidth = uni.upx2px(680); this.cHeight = uni.upx2px(420); this.getServerData(); }, methods: { getServerData() { this.$http.get('/power/day', { back_id: this.backid, day: this.daydate }).then(res => { if (res.data.result === 1) { let server = res.data.data; server.list.forEach(item => { name: item.back_name; this.dayuser.push( item.used ); this.event_hour.push( item.event_hour, ); }); let Column = { categories: [], //横轴 series: [{ name: '用电量', data: this.dayuser, color: '#047efd' }] }; Column.categories = this.event_hour; //横坐标值 // Column.series = ; //竖坐标值（每天电量） _self.showColumn("ExtremunColumn", Column); } else { uni.showToast({ icon: 'none', title:'图表暂无数据' }) } }) }, showColumn(canvasId, chartData) { canvaColumn = new uCharts({ $this: _self, canvasId: canvasId, type: 'column', legend: { show: true }, fontSize: 11, background: '#FFFFFF', pixelRatio: _self.pixelRatio, animation: true, categories: chartData.categories, series: chartData.series, enableScroll: true, //开启图表拖拽功能 xAxis: { disableGrid: true, fontSize: 11, gridType: 'dash', itemCount: 7, //x轴单屏显示数据的数量，默认为5个 scrollShow: true, //新增是否显示滚动条，默认false scrollAlign: 'left', //滚动条初始位置 scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF scrollColor: '#DEE7F7', //默认为 #A6A6A6 }, yAxis: { max: 300, splitNumber: 5, gridType: 'dash', gridColor: '#CCCCCC', dashLength: 5, splitNumber: 6, format: (val) => { return val.toFixed(0) } // splitNumber: 2, //横轴区间 }, dataLabel: false, width: _self.cWidth * _self.pixelRatio, height: _self.cHeight * _self.pixelRatio, extra: { column: { type: 'group', width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length } } }); }, //拖拽 touchColumn(e) { canvaColumn.scrollStart(e); }, moveColumn(e) { canvaColumn.scroll(e); }, touchEndColumn(e) { canvaColumn.scrollEnd(e); //下面是toolTip事件，如果滚动后不需要显示，可不填写 canvaColumn.showToolTip(e, { format: function(item, category) { return category + ' ' + item.name + ':' + item.data } }); }, } } </script>
    
    <style> .qiun-charts { width: 680upx; height: 420upx; background-color: #FFFFFF; } .charts { width: 680upx; height: 420upx; background-color: #FFFFFF; } </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hb3hpYW9oZWlf_size_16_color_FFFFFF_t_70]: /images/20210827/2caba029c75742af98da926329977d80.png