index.vue文件
<view class="echarts-wrap">
? <mpvue-echarts :echarts="echarts" :onInit="handleInit" ref="echarts" />
</view>
<script>
import *as echartsfrom 'echarts/dist/echarts.simple.min'
import mpvueEchartsfrom 'mpvue-echarts'
let chart =null;
export default {
data () {
return {
? ? ? option:null,
? ? ? echarts
}
},
? components: {
mpvueEcharts
},
? onLoad(){
},
? onShow(){
this.getPie();
? },
? methods: {
? ? async getPie(){
let arr=[];
? ? ? const defaultResult =await this.$post('owner/orderStatisticsPiehCart', {
})
if(defaultResult){
let data=defaultResult.data;
? ? ? ? data.map(n=>{
arr.push({
value:n.orderCount,
? ? ? ? ? ? name:n.channelName,
? ? ? ? ? ? label:{
show:false
? ? ? ? ? ? },
? ? ? ? ? ? labelLine:{
show:false
? ? ? ? ? ? }
})
})
let brr=arr.sort(function (a,b) {
return b - a
}).slice(0,2);
? ? ? ? arr.map(m=>{
for(let i=0;i
if(brr[i].name == m.name){
m.label={
show:true
? ? ? ? ? ? ? }
m.labelLine={
show:true
? ? ? ? ? ? ? }
return m
}
}
})
//console.log(arr);
? ? ? ? this.initChart(arr)
}
},
? ? initChart (data) {
this.option = {
color:['#00b0ec','#e94f25','#CC9900','#FF6633','#660066','#990000','#FF9933','#6666FF','#663300','#999933','#339999','#663333','#663399','#00FFFF','#00CCFF','#00CC66','#0099FF','#003399','#666699','#6633CC'],
? ? ? ? tooltip: {
trigger:'item',
? ? ? ? ? formatter:"{c|{c}單}\n{b|}{per|omeya26%}"
? ? ? ? },
? ? ? ? backgroundColor:"#ffffff",
? ? ? ? series: [{
type:'pie',
? ? ? ? ? center: ['50%', '50%'],
? ? ? ? ? radius: ['15%', '30%'],
? ? ? ? ? label: {
normal: {
show:false,
? ? ? ? ? ? ? formatter:'{c|{c}單}\n\n{b|主胧}{per|qgsoy4k%}? ',
? ? ? ? ? ? ? rich: {
c: {
color:'#333',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? b:{
color:'#333',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? per: {
color:'#333',
? ? ? ? ? ? ? ? }
}
}
},
? ? ? ? ? labelLine: {
normal: {
show:false
? ? ? ? ? ? }
},
? ? ? ? ? data: data,
? ? ? ? }]
}
this.$refs.echarts.init()
},
? ? handleInit (canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
? ? ? ? height: height
})
canvas.setChart(chart)
chart.setOption(this.option)
return chart
},
}
}
</script>
