echarts-liquidfill(水球图)
vue项目里使用echarts-liquidfill(水球图)步骤echarts水球图并不在echarts常用图表里,是作为插件使用的,因此使用echarts水球图需要先安装echarts和水球图。npm install echarts --savenpm install echarts-liquidfill --save可以在vuemain.js中注册,也可以在单独使用的组件里注册。import
·
vue项目里使用echarts-liquidfill(水球图)步骤
echarts水球图并不在echarts常用图表里,是作为插件使用的,因此使用echarts水球图需要先安装echarts和水球图。
npm install echarts --save
npm install echarts-liquidfill --save
可以在vue main.js中注册,也可以在单独使用的组件里注册。
import echarts from 'echarts' //引入echarts
import 'echarts-liquidfill'
组件中使用(部分代码):
<template>
<div ref="hygrometer" :class="className">
</template>
props:{
className: {
type: String,
default: 'chart'
}
},
data() {
return {
chart: null
}
},
this.chart = echarts.init(this.$refs.hygrometer)
this.chart.setOption({
series: [{
type: 'liquidFill',
name: 'Liquid Fill',
radius: '80%',
data: [{
name: 'score',
direction: 'right',
value: 0.6,
itemStyle: {
normal: {
color: '#34cfe9'
}
}
}],
label: {
nomal: {
formatter: function(param) {
return param.value * 100
},
textStyle: {
color: '#34cfe9',
insideColor: '#ffffff',
fontSize: 50
}
}
},
outline: { // 是否显示外圈
show: false
}
}]
})
还有更多的功能可以参考以下地址:
vue使用水球图
参考地址:https://blog.csdn.net/focusmickey/article/details/109188774
ECharts绘制水球图
参考地址:https://blog.csdn.net/qq_22238629/article/details/80238868
如果使用过程中报错,应该是版本太高引起的,我这里使用的是2.0.6
更多推荐
已为社区贡献1条内容
所有评论(0)