2023-04-23
水球图的使用及报错处理
1.使用
（1）安装依赖：npm install echarts --save
npm install echarts-liquidfill --save
（如果已经安装过echarts,第一步跳过）
（2）在main.js或者需要使用的组件中引入
import echarts from 'echarts' //引入echarts
import 'echarts-liquidfill' //引入水球图
（3）在组件中使用
例：shuiqiu () {
var myChart2 = echarts.init(document.getElementById('shuiqiu'))
var value = 0.45
var value1 = 0.76
var data = [0.45, 0.76]
var option = {
backgroundColor: '#0F224C',
title: [
{
text: '本年收缴率',
x: '22%',
y: '70%',
textStyle: {
fontSize: 14,
fontWeight: '100',
color: '#5dc3ea',
lineHeight: 16,
textAlign: 'center'
}
},
{
text: '本月收缴率',
x: '73%',
y: '70%',
textStyle: {
fontSize: 14,
fontWeight: '100',
color: '#5dc3ea',
lineHeight: 16,
textAlign: 'center'
}
}
],
series: [
{
type: 'liquidFill',
radius: '47%',
center: ['25%', '45%'],
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#446bf5'
},
{
offset: 1,
color: '#2ca3e2'
}
],
globalCoord: false
}
],
data: [value, value], // data个数代表波浪数
backgroundStyle: {
borderWidth: 1,
color: 'RGBA(51, 66, 127, 0.7)'
},
label: {
normal: {
textStyle: {
fontSize: 50,
color: '#fff'
}
}
},
outline: {
// show: false
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#112165'
}
}
},
{ // 第二个球的填充
type: 'liquidFill',
radius: '47%',
center: ['75%', '45%'],
color: [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#2aa1e3'
},
{
offset: 1,
color: '#08bbc9'
}
],
globalCoord: false
}
],
data: [value1, value1], // data个数代表波浪数
backgroundStyle: {
borderWidth: 1,
color: 'RGBA(51, 66, 127, 0.7)'
},
label: {
normal: {
textStyle: {
fontSize: 28,
color: '#fff'
}
}
},
outline: {
// show: false
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#112165'
}
}
}
]
}
myChart2.setOption(option)
window.addEventListener('resize', function () {
myChart2.resize()
})
},
（4）关于使用报错：
原因：echarts与echarts-liquidfill版本不匹配
echarts4.x 版本 适用于 echarts-liquidfill2.x.x版本，echarts5.x 版本 适用于 echarts-liquidfill3.x.x版本
解决：去项目中package.json中查看版本
第一种:卸载echarts-liquidfill 重新安装匹配版本的在echarts-liquidfill
第二种：简单粗暴，package.json中将echarts-liquidfill改为匹配版本，删除node_models中的echarts-liquidfill包，重新npm install
