vue中使用echarts-liquidfill实现水球图
先看效果图echarts-liquidfill查看官方文档安装npm install echarts --savenpm install echarts-liquidfill --savevue main.js 中注册import echarts from 'echarts'//引入echartsimport 'echarts-liquidfill'组件中使用<template><
·
先看效果图
echarts-liquidfill查看官方文档
安装
npm install echarts --save
npm install echarts-liquidfill --save
vue main.js 中注册
import echarts from 'echarts' //引入echarts
import 'echarts-liquidfill'
组件中使用
<template>
<div style="width:400px;height:400px;" ref="hygrometer"></div>
</template>
<script>
export default {
data() {
},
mounted() {
this.drawLiquidfill()
},
methods: {
drawLiquidfill(){
// 基于准备好的dom,初始化echarts实例
let hygrometer = this.$echarts.init(this.$refs.hygrometer)
// 使用指定的配置项和数据显示图表
hygrometer.setOption({
tooltip: {
show: true
},
series: [{
name: '睡了',
type: 'liquidFill',
radius: '200px',
data: [0.6],
label: {
normal: {
color: '#27e5f1',
insideColor: '#fff',
textStyle: {
fontSize: 40,
fontWeight: 'bold',
}
}
},
color: [{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 1,
color: ['#6a7feb'], // 0% 处的颜色
}, {
offset: 0,
color: ['#27e5f1'], // 100% 处的颜色
}],
global: false // 缺省为 false
}],
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: '#27e5f1',
borderWidth: 3
}
}
}]
})
}
}
}
}
</script>
附: v-charts
中也有水球图https://v-charts.js.org/#/liquidfill
更多推荐
已为社区贡献31条内容
所有评论(0)