templete中
<div ref="hazardratio" style="width:99%;height:260px;" ></div>
data中
data () {
return {
chart: null,
data: [],
pielegend: ['暂无数据'],
pieseriedata: [
{ value: 0, name: '暂无数据' }
]
}
},
methods中
piechart (pielegend, pieseriedata) {
return {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
y: '92%',
data: pielegend
},
series: [
{
center: ['50%', '45%'],
name: '隐患类别',
type: 'pie',
radius: '75%',
label: {
normal: {
show: true,
// position: 'inside',
formatter: '{b}{d}%', // 模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数据名,数据值,百分比。{d}数据会根据value值计算百分比
textStyle: {
align: 'center',
baseline: 'middle',
fontFamily: '微软雅黑',
fontSize: 15,
fontWeight: 'bolder'
}
}
},
data: pieseriedata,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
mounted中
this.$nextTick(() => {
this.chart = echarts.init(this.$refs.hazardratio)
var that = this
this.chart.setOption(that.piechart(that.pielegend, that.pieseriedata))
// on(window, 'resize', this.resize)
})
网友评论