vue中使用echarts-liquidfill实现水波图
先看效果图：
第一步：在package.json中添加依赖
"echarts": "^4.4.0",
"echarts-liquidfill": "^2.0.5",然后 npm i 注意：先安装低版本的echarts-liquidfill，之前试了3.0以上的版本会报错，echarts版本可随意
第二步：在main.js中引入echarts和echarts-liquidfill
import echarts from 'echarts'
import 'echarts-liquidfill'
Vue.prototype.$echarts = echarts ;
第三步：使用
html：
css：
#chartmainbar1,
#chartmainbar2,
#chartmainbar3 {
width: 150px;
height: 150px;
float:left;
}（1）在methods中封装加载水波图的函数（因为我需要加载三个，因此封装了一下）
直接复制就行：
liquidCharts(id, data, borderC, color0, color100) {
let dom = document.getElementById(id);
let myChart = this.$echarts.init(dom);
let app = {};
let option = null;
option = {
// 图表主标题
title: {
show:false,
text: "槽使用情况",
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: "10px",
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: "0px",
// itemGap设置主副标题纵向间隔，单位px，默认为10，
itemGap: 30,
backgroundColor: "#fff",
// 主标题文本样式设置
textStyle: {
fontSize: 16,
fontWeight: "500",
color: "#fff"
}
// 副标题文本样式设置
},
// 提示框组件
tooltip: {
trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
textStyle: {
color: "#fff" // 文字颜色
},
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
// 水球图: {a}（系列名称），{b}（无），{c}（数值）
// 使用函数模板 传入的数据值 -> value: number|Array,
formatter: function(value) {
return value.seriesName + ": " + value.data * 100 + "%";
}
},
series: [
{
type: "liquidFill",
name: "已用槽", // 系列名称，用于tooltip的显示，legend 的图例筛选
radius: "89%", // 水球图的半径
center: ["52%", "55%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
// 水填充图的形状 circle 默认圆形 rect 圆角矩形 triangle 三角形
// diamond 菱形 pin 水滴状 arrow 箭头状 还可以是svg的path
shape: "circle",
phase: 0, // 波的相位弧度 不设置 默认自动
direction: "right", // 波浪移动的速度 两个参数 left 从右往左 right 从左往右
outline: {
show: true,
borderDistance: 0, // 边框线与图表的距离 数字
itemStyle: {
opacity: 0.9, // 边框的透明度 默认为 1
borderWidth: 2, // 边框的宽度
shadowBlur: 14, // 边框的阴影范围 一旦设置了内外都有阴影
shadowColor: "#fff", // 边框的阴影颜色,
borderColor: borderC // 边框颜色
}
},
// 图形样式
// itemStyle: {
// color: borderC, // 水球显示的背景颜色
// opacity: 0.4, // 波浪的透明度
// shadowBlur: 10 // 波浪的阴影范围
// },
backgroundStyle: {
color: "#fff" // 水球未到的背景颜色
},
// 图形的高亮样式
emphasis: {
itemStyle: {
opacity: 1 // 鼠标经过波浪颜色的透明度
}
},
// 图形上的文本标签
label: {
fontSize: 26,
fontWeight: 400,
color: borderC
},
color: [
{
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: color0 // 0% 处的颜色
},
{
offset: 0,
color: color100 // 100% 处的颜色
}
],
global: false // 缺省为 false
}
],
data: data // 系列中的数据内容数组
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
},调用：
drawLine: function() {
//基于准本好的DOM，初始化echarts实例
this.liquidCharts(
"chartmainbar1", //参数1 id:加载的dom元素的id
this.data1, //参数2 data:加入的数据,例如：[0.6]表示60%
["#FE916F"], //参数3 borderD:边框颜色
["rgba(249, 146, 113, 0.8)"], //参数4 color0:设置渐变色--水波图0%处的颜色
["rgba(255, 255, 255, 1)"] //参数5 color100:设置渐变色--水波图100%处的颜色
);
this.liquidCharts(
"chartmainbar2",
this.data1,
["#68CDE8"],
["rgba(87, 190, 211, 0.8)"],
["rgba(255, 255, 255, 1)"]
);
this.liquidCharts(
"chartmainbar3",
this.data1,
["#B59CE2"],
["rgba(184, 169, 213, 0.8)"],
["rgba(255, 255, 255, 1)"]
);
},（2）mounted函数，调用加载并设置echarts图自适应：
mounted() {
this.drawLine();
this.resizeEcharts = () => {
this.$echarts.init(document.getElementById("chartmainbar1")).resize();
this.$echarts.init(document.getElementById("chartmainbar2")).resize();
this.$echarts.init(document.getElementById("chartmainbar3")).resize();
};
window.addEventListener("resize", this.resizeEcharts);
},更多参数配置请移步官网吧：https://gallery.echartsjs.com/explore.html#tags=liquidFill~sort=rank~timeframe=all~author=all
以上代码直接复制粘贴就行，有问题的小伙伴评论区见~~