|
水球图组件封装
// 一、下载Echarts图表库和相关依赖文件（以下两种安装方式，可以随意选择）
// npm
npm i echarts@4
npm i echarts-liquidfill@2
// import echarts from 'echarts'
import 'echarts-liquidfill'
export default {
name: '',
props: {
one: {
type: Number,
default: 0
// required: true
}
},
data() {
return {
chartsLiquid: '' // 初始化图表
}
},
mounted() {
this.initLiquidEchart()
},
methods: {
initLiquidEchart() {
setTimeout(() => {
this.chartsLiquid = this.$echarts.init(this.$refs['liquidEchart'])
// 把配置和数据放这里
this.chartsLiquid.setOption({
series: [{
type: 'liquidFill',
radius: '90%',
data: [this.one / 100],
color: 'rgba(67,209,100,1)',
label: {
normal: {
color: '#000',
insideColor: 'transparent',
textStyle: {
fontSize: 16,
fontWeight: 'bold',
fontFamily: 'Microsoft YaHei'
}
}
},
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: 'rgba(67,209,100,1)',
borderWidth: 2
}
},
backgroundStyle: {
color: 'rgba(67,209,100,.3)'
}
}]
})
}, 50)
}
}
}
.liquidData {
width: 140px;
height: 140px;
}
|