这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战
类似下面的水波图的使用。主要是正常的水波图的使用和做到径向渐变最主要的代码使用了new echarts.graphic.RadialGradient来做重新设置水波图的背景颜色
1、首先安装"echarts-liquidfill": "^2.0.6",
npm install echarts-liquidfill
2、在使用的页面引入
import 'echarts-liquidfill'
3、使用案例
rectifyChart(id, data) {
let wavesColor = [], radiusColor = []
wavesColor = [{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ offset: 0, color: '#54ca3c' },
{ offset: 1, color: '#2EC7CF' },
],
}]
radiusColor = [
{ offset: 0, color: '#54ca3c' },
{ offset: 1, color: '#2EC7CF' },
]
var dom = document.getElementById(id)
var myChart = echarts.init(dom);
var value = data / 100;
var valueText = data + '%'
var option = {
title: {
show: true,
text: valueText,
x: 'center',
y: '35%',
itemGap: 0,
textStyle: {
fontSize: 20,
fontWeight: 'bold',
lineHeight: 30,
color: '#fff'
},
},
polar: {
radius: ['85%', '83%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
clockwise: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
type: 'liquidFill',
radius: '78.1%',
center: ['50%', '50%'],
color: wavesColor,
data: [value, value], // data个数代表波浪数
backgroundStyle: {
borderWidth: 0,
borderColor: 'rgba(55, 211, 255, 0.42)',
color: 'rgba(12, 41, 49, 0)',
},
label: {
normal: {
formatter: '',
},
},
outline: {
show: false,
},
},
{
name: '',
type: 'bar',
roundCap: true,
z: 2,
barWidth: 12,
showBackground: false,
backgroundStyle: {
color: '#15181e',
},
data: [100],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color:
new echarts.graphic.LinearGradient(0, 0, 0.5, 1, radiusColor),
},
},
},
],
};
myChart.setOption(option);
},
第二种 带径向渐变的颜色背景的
做到径向渐变最主要的代码就是下面这个，使用了new echarts.graphic.RadialGradient来做重新设置水波图的背景颜色
backgroundStyle: {
borderWidth: 0,
// borderColor: 'rgba(55, 211, 255, 0.42)',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5,
[{offset: 0,color: 'rgb(24,43,99)'},{offset: 0.5,color: 'rgb(24,43,99)'},{offset: 1,color: baColor}]
),
},
rectifyChart(id, data) {
let wavesColor = [], radiusColor = [],baColor=''
if (id === 'notRectificationOvertime') {
wavesColor = [{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ offset: 0, color: '#EB3B5A' },
{ offset: 1, color: '#FE9C5A' },
],
}]
radiusColor = [
{ offset: 0, color: '#EB3B5A' },
{ offset: 1, color: '#FE9C5A' },
]
baColor='rgba(254, 156, 90,.5)'
} else if (id === 'notRectification') {
wavesColor = [{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#FA8231' },
{ offset: 1, color: '#FFD14C' },
],
}]
radiusColor = [
{ offset: 0, color: '#FA8231' },
{ offset: 1, color: '#FFD14C' },
]
baColor='rgba(255, 209, 76,.5)'
} else if (id === 'RectificationOvertime') {
wavesColor = [{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ offset: 0, color: '#395CFE' },
{ offset: 1, color: '#2EC7CF' },
],
}]
radiusColor = [
{ offset: 0, color: '#395CFE' },
{ offset: 1, color: '#2EC7CF' },
]
baColor='rgba(46, 199, 207,.5)'
}else if (id === 'RectificationTimely') {
wavesColor = [{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ offset: 0, color: '#54ca3c' },
{ offset: 1, color: '#2EC7CF' },
],
}]
radiusColor = [
{ offset: 0, color: '#54ca3c' },
{ offset: 1, color: '#2EC7CF' },
]
baColor='rgba(84, 202, 60,.5)'
}
var dom = document.getElementById(id)
var myChart = echarts.init(dom);
var value = data / 100;
var valueText = data + '%'
var option = {
title: {
show: true,
text: valueText,
x: 'center',
y: 'center',
itemGap: 0,
textStyle: {
fontSize: 18,
fontWeight: 'bold',
lineHeight: 30,
color: '#fff'
},
},
polar: {
radius: ['85%', '83%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
clockwise: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
type: 'liquidFill',
radius: '78.1%',
center: ['50%', '50%'],
color: wavesColor,
data: [value, value], // data个数代表波浪数
backgroundStyle: {
borderWidth: 0,
// borderColor: 'rgba(55, 211, 255, 0.42)',
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5,
[{offset: 0,color: 'rgb(24,43,99)'},{offset: 0.5,color: 'rgb(24,43,99)'},{offset: 1,color: baColor}]
),
},
label: {
normal: {
formatter: '',
},
},
outline: {
show:false
},
},
{
name: '',
type: 'bar',
roundCap: true,
z: 2,
// barWidth: 12,
showBackground: false,
backgroundStyle: {
color: '#15181e',
},
data: [100],
coordinateSystem: 'polar',
itemStyle: {
normal: {
// color:new echarts.graphic.LinearGradient(0, 0, 0.5,1, radiusColor),
color:'rgb(24,43,99)',
},
},
},
],
};
myChart.setOption(option);
},
