npm安装依赖
npm install echarts-liquidfill
在用到需要的页面引入Echars
import echarts from 'echarts';
import echartsLiquidfill from 'echarts-liquidfill';
myEchars() {
let echarts = require('echarts');
//装水波图的盒子,注意必须的设置宽高
let myEchars = echarts.init(document.getElementById('echar')); let option = {
title: {
text: ''
},
series: [{
type: 'liquidFill',// 水波图
data: [ //可以有多个水波
{
value: 0.5,//所占比例 0-1
itemStyle: {
color: 'rgb(233,240,254)',//水波的颜色
}
}],
itemStyle: { color: "#fff" },//波线的阴影
backgroundStyle :{color:'#fff'},//球状的背景颜色
radius: '96%',//水波图的半径
outline: {
show: false //true显示水波图上的文字
},
label: {
show: false, //不能对水波图设置事件
},
}],
}
myEchars.setOption(option);//把水波图插入盒子中
window.onresize = myEchars.resize; //当盒子尺寸单位是rem或者百分比的时候设置echars可以根据窗口的大小来自适应
}
关于Echars的更多属性
我想把水波的颜色改成渐变色,但是找了好多方法都不可以,如果有谁设置渐变颜色成功了希望留言,多谢