uniapp 微信小程序 使用Echarts

echarts yekong

uniapp 微信小程序 使用Echarts

修改后的插件地址

uniapp echarts
备用下载地址
uniapp 微信小程序 使用Echarts

2022年07月28日

问题描述:使用v-if切换echarts会导致echarts无法显示
解决办法:在插件初始化时,延时20毫秒重新绘制就可以了

mounted() {
	var that = this;
	echarts.registerPreprocessor(option => {
		if (option && option.series) {
			if (option.series.length > 0) {
				option.series.forEach(series => {
					series.progressive = 0;
				});
			} else if (typeof option.series === 'object') {
				option.series.progressive = 0;
			}
		}
	});
	setTimeout(() => {
		that.initChart(that.option)
	}, 20)
},

原插件地址

插件地址

echarts定制

因为小程序有2M大小的限制,所以在开发时,我们可以定制一下echarts,去除我们不需要的功能,只保留我们需要的功能。以节省体积。
Echarts 在线定制 缩小echarts体积

使用代码

<template>
	<div class="bodyitem">
        <echarts class="uni-ec-canvas" ref="echarts" :option="option" canvasId="echarts"></echarts>
	</div>
</template>

<script>
	import {
		GetInPlantCarsInfo
	} from '@/config/api.js'
	export default {
		data() {
			return {
				option: {
					title: [{
						top: '38%',
						text: '150',
						x: 'center',
						textStyle: {
							fontSize: 24,
							color: '#151852',
						},
					}, {
						top: '50%',
						text: '总计 (辆)',
						x: 'center',
						textStyle: {
							fontSize: 13,
							color: '#9293AE'
						},
					}, ],
					color: ['#FC8B18', '#1890FF', '#2F53EB', '#52C41A'],
					tooltip: {
						trigger: 'item',
						show: true,
						formatter: '{b}\r\n{c0}人',
						axisPointer: {
							type: 'line',
							axis: 'x',
							label: {
								backgroundColor: '#000000'
							}
						}
					},
					grid: {
						left: '6%',
						right: '6%',
						top: '6%',
						bottom: '6%',
						containLabel: true
					},
					series: [{
						name: '厂内车辆分布',
						type: 'pie',
						smooth: true,
						radius: ['35%', '50%'],
						center: ['50%', '50%'],
						label: {
							normal: {
								fontSize: 12,
								color: 'auto',
								show: true,
								formatter: '{b}\n{d}% {c}辆'
							}
						},
						labelLine: {
							length: 10,
							length2: 1,
							smooth: true
						},
						data: []
					}]
				}
			}
		},

		components: {
			uniEcCanvas
		},
		mounted() {
			var that = this;
			this.CompanyId = uni.getStorageSync('uid')
			that.getdata()
		},
		methods: {
			getactive(item) {
				this.current = item
			},
			goPage(page) {
				uni.navigateTo({
					url: page
				})
			},
			getdata() {
				var that = this;
				console.log('获取数据')
				GetInPlantCarsInfo({
					AccountId: that.CompanyId
				}, {
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.Code == 200) {
						var list = []
						res.Data.Details.forEach((type) => {
							var data = {
								"name": type.Name,
								"value": type.Number
							}
							list.push(data)
						});
						console.log(list)
						console.log('数据')
						that.option.series[0].data = list
					}
				}).catch(err => {

				})
			}

		}
	}
</script>

其他相关问题

uniapp 微信小程序 Echarts formatter回调无效

喜欢