echarts 水球图 波浪动画不显示,没有报错,
echarts 水球图 波浪动画不显示,没有报错,
看一下版本 排查一下
//地址https://github.com/ecomfe/echarts-liquidfill
//<script src='echarts.js'></script>
//<script src='echarts-liquidfill.js'></script> //引入liquidFill,echarts
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".yesInternet"));
// 2.指定配置
const data = [yesInt];
var option = {
// x轴
xAxis: {
show: false, // 不显示
},
// y轴
yAxis: {
show: false, // 不显示
},
grid: {
top: '2.5%',
right: '40',
bottom: '2.5%',
left: 0,
},
series: [{
type: 'liquidFill',
radius: '96%', // 半径大小
center: ['50%', '50%'], // 布局位置
data: data, // 水球波纹值
color: ['#36A989'],//设置颜色系列
label: {
normal: {
// color: '#FC7272',
color: '#36A989',
textStyle: {
fontSize: 18
},
formatter: (params) => { //console.log(params)
let newValue = params.value * 100;
return newValue.toFixed(2) + '%\n联网车位数\n' + ToInt
}
}
},
outline: { // 轮廓设置
show: true,
borderDistance: 2, // 轮廓间距
itemStyle: {
// borderColor: '#294D99', // 轮廓颜色
borderColor: '#36A989', // 轮廓颜色
borderWidth: 4, // 轮廓大小
shadowBlur: 'none', // 轮廓阴影
}
},
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function () {
myChart.resize();
});
第一步:引入 JavaScript 文件
ECharts 的水球图是一个插件类型的图表。这意味着,在 ECharts 官网下载的完整版本将不包含水球图——这保证了不需要使用该图表的用户能够获得一个尽可能小的代码版本。使用时,需要在引入 echarts.js 之后,另外引入水球图对应的 echarts-liquidfill.js,可以在 GitHub 找到最新版本。
第二步:指定 DOM 元素作为图表容器
和创建 ECharts 的其他图表一样,我们需要指定 DOM 中的一个有高度和宽度的元素作为图表的容器——也就是图表将会绘制的位置。
var chart = echarts.init(document.getElementById('liquidfill-chart'));
第三步:设置水球图参数
和其他 ECharts 图表一样,水球图提供将系列的 type 指定为 'liquidFill'(注意大小写)来表明这是一个水球图类型。
一个简单的配置项可以是:
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3]
}]
};
chart.setOption(option);
这样,就能得到水球图效果了: