修改后的插件地址
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>
