安裝
npm install echarts
npm install echarts-liquidfill
全局引入
import * as echarts from "echarts";
import "echarts-liquidfill";
代碼實現(xiàn)
<template>
<div :class="className" :style="{ minHeight: height, width: width }"/>
</template>
<script>
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
chartData: {
type: Array,
default: () => [0]
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '85px'
},
barWidth: {
type: Number,
default: 34
},
labelShow: {
type: Boolean,
default: true
}
},
data() {
return {
chart: null
}
},
created() {
},
watch: {
chartData() {
this.initChart()
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = this.$echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
text: '未處理',
left: 'center',
top: 28,
textStyle: {
color: '#ffffff',
fontWeight: '500',
fontSize: 14
}
},
series: [
{
name: '水球圖',
type: 'liquidFill',
radius: '80%',
center: ['50%', '55%'],
waveAnimation: 10, // 動畫時長
amplitude: 3, // 振幅
data: this.chartData,
label: {
normal: {
position: ['50%', '70%'],
color: '#FFFFFF', //中間字體的顏色
textStyle: {
fontSize: 14,
fontWeight: 500
}
}
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#1890FF' // 0% 處的顏色
},
{
offset: 1,
color: '#1EE7E7' // 100% 處的顏色
}
],
global: false // 缺省為 false
}
}
},
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: '#35A6BB', //外邊的圈的顏色
borderWidth: 2
}
},
backgroundStyle: {
color: '#02427D'
}
}
]
})
}
}
}
</script>
