第一步 打开Echarts社区 并找到水球图区
第二步
// 注意版本号,Echarts4 对应 echarts-liquidfill
// echarts-liquidfill@3 与 echarts@5 兼容
// echarts-liquidfill@2 与 echarts@4 兼容
import * as echarts from 'echarts'; import 'echarts-liquidfill'
第三步 引入包
//用 * as 将多个导出的echarts对象放入到一个变量中
import * as echarts from 'echars'
import 'echarts-liquidfill'
第四步 找一个差不多的开始配置,我这里将我试出来的配置效果注释出来
option = {
series: [{
type: 'liquidFill', // 类型为水球图
data: [value1, value2], // data的个数代表波浪数
radius: '75%', // 半径
center: ['50%', '50%'], // 圆心位置
color: ['#2397f6'], //水体颜色
backgroundStyle: { //背景样式
color: '#ffccaa' //背景颜色
},
label: {
normal: {
formatter: value //球心数据
textStyle: { //数据样式
fontSize: 41,
color: "#7AABFA",
}
}
},
outline: {
//show: true, //是否显示一个固定的边框样式,很丑
itemStyle: { //球的边框样式设置
borderWidth: 1, //边框宽度
borderColor: '#eee' //边框颜色
},
},
}
]
}