一 下包导包(一般在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图)