echarts 饼图移动端_echarts饼图在vue项目中实现

一 下包导包(一般在vue中是全局注册)

二 准备容器 给宽高

三 在vue的data数据模型中 指定图表的配置项和数据

// echart数据

option: {

tooltip: {

trigger: 'item',

formatter: '{a}
{b}: {c} ({d}%)'

},

legend: {

orient: 'vertical',

left: 10,

top: 40,

data: ['人民币', '美元','港币','欧元','日元']

},

series: [

{

name: '资产',

type: 'pie',

radius: ['70%', '90%'],

avoidLabelOverlap: false,

label: {

show: false,

position: 'center'

},

emphasis: {

label: {

show: true,

fontSize: '30',

fontWeight: 'bold'

}

},

data: [

{ value: 335, name: '人民币' },

{ value: 310, name: '美元' },

{ value: 310, name: '港币' },

{ value: 310, name: '欧元' },

{ value: 310, name: '日元' },

],

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

},

normal: {

color: function(params) {

//自定义颜色

var colorList = [

'#019e97',

'#FF4500',

'#FFA500',

'#33ff33',

'#4B0082',

]

return colorList[params.dataIndex]

}

}

}

}

]

}

四 在接口拿数据并处理数据

created() {

this.getCurrentRate() // 执行1

let setTimeId = setTimeout(()=>{ // 执行2

this.$axios.post( POST_ASSETSOVERIEWQRY ).then(res=>{

if(res._RejCode === "000000"){

// 处理echarts数据

this.RmbToatlAmt=(+res.RmbToatlAmt).toFixed(2)

this.USDToatlAmt=(+res.USDToatlAmt*this.USDSaleRate).toFixed(2)

///

this.option.series[0].data[4].value = this.JPYToatlAmt

this.$nextTick(() => { // 执行3

this.setChart()

})

}

})

clearTimeout(setTimeId)

},1000)

},

五 画!!!

methods:{

setChart(){

let toatlAmtChart = this.$echarts.init(document.getElementById('toatlAmt')) // 基于准备好的dom，初始化echarts实例

toatlAmtChart.setOption(this.option) // 使用刚指定的配置项和数据显示图表

},

}

关键在于 方法的执行顺序问题

用 setTimeout来限制 执行2 要晚于 执行1 后才执行

执行3要确保所有数据回来后才执行dom生成(也就是画echarts图)