如何在Vue项目中使用Echarts水球图?
1、安装水球图所需的依赖包
// 一、下载Echarts图表库和相关依赖文件(以下两种安装方式,可以随意选择)
// npm
npm i -S echarts
npm i -S echarts-liquidfill
// yarn
yarn add echarts -S
yarn add echarts-liquidfill -S
// 二、在需要用到水球图的组件引用它们
// 1、引入echarts图表库
import * as echarts from 'echarts'
// 2、引入水球图的依赖文件
import 'echarts-liquidfill/dist/echarts-liquidfill.min.js'
2、绘制水球
// 这个方法定义好后,可以自行在需要用到的地方去引用这个方法
methods: {
drawWaterBubble () {
const myEcharts = echarts.init(this.$refs.innerCircle)
let options = {
series:[
{
type:'liquidFill',
outline: {
show: false
},
backgroundStyle: {
color: 'rgba(255, 255, 255, 0)'
},
shape: 'circle',
radius: '100%',
itemStyle: {
color: '#1890FF',
shadowBlur: 0,
opacity: .7
},
data:[0.35],
label: {
show: false
}
}
]
}
myEcharts.setOption(options)
}
}
3、运行效果