pie 画图
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
chartData: {
type: Object,
required: true
},
fontsizeratio: {
type: Number,
default: 16
}
},
data () {
return {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler (val) {
this.setOptions(val)
}
},
fontsizeratio: {
deep: true,
handler (val) {
}
}
},
mounted () {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy () {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart () {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions ({ highMeasureRate, normalMeasureRate, lowMeasureRate } = {}) {
this.chart.setOption({
tooltip: {
trigger: 'item',
textStyle: {
color: '#333'
},
padding: [5, 10],
backgroundColor: '#fff',
formatter: function (params, ticket, callback) {
var res = params.name + ' : ' + params.percent.toFixed(2) + '%'
return res
}
},
grid: {
top: 0,
left: 0,
bottom: 0,
right: 0
},
series: [
{
type: 'pie',
radius: ['25%', '40%'],
avoidLabelOverlap: true,
top: 10 * this.fontsizeratio,
bottom: 10 * this.fontsizeratio,
minAngle: 25,
minShowLabelAngle: 25,
itemStyle: {
borderRadius: 10,
borderColor: 'rgb(15, 19, 33)'
},
emphasis: {
label: {
show: true,
fontSize: '15',
fontWeight: 'bold'
}
},
label: {
show: true,
position: 'outside',
formatter: function (params, ticket, callback) {
var arr = [
'{percent|' + params.percent.toFixed(2) + '%' + '}',
'{name|' + params.name + '}'
]
return arr.join('\n')
},
rich: {
percent: {
fontSize: 25 * this.fontsizeratio,
color: 'white',
fontWeight: 'bold',
lineHeight: 35 * this.fontsizeratio
},
name: {
fontSize: 16 * this.fontsizeratio,
color: 'white'
}
}
},
labelLine: {
length: 15 * this.fontsizeratio,
length2: 20 * this.fontsizeratio,
lineStyle: {
color: '#fff'
}
},
data: [
{
value: 96.69,
name: '高血糖比例',
itemStyle: {
color: 'rgba(240,12,12,1)'
}
},
{
value: 1.81,
name: '正常值比例',
itemStyle: {
color: 'rgba(13,214,103,1)'
}
},
{
value: 1.5,
name: '低血糖比例',
itemStyle: {
color: 'rgba(24,133,242,1)'
}
}
],
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
})
}
}
}
</script>