效果图
首先放盒子
<div class="wtChartBall_box">
<div class="d_flex">
<div id="wtChartBall" style="width: 220px; height: 200px" />
<div id="wtChartBall_2" style="width: 220px; height: 200px" />
</div>
<div class="d_flex">
<div id="wtChartBall_3" style="width: 220px; height: 200px" />
<div id="wtChartBall_4" style="width: 220px; height: 200px" />
</div>
</div>
然后代码部分
mounted() {
_self = this;
this.$nextTick(() => {
this.chartsBall1(); //图表
this.chartsBall2(); //图表
this.chartsBall3(); //图表
this.chartsBall4(); //图表
});
window.addEventListener("resize", function () {
delay(() => {
_self.myChart1.resize();
}, 300);
});
},
然后调取函数时传颜色和ID以及值
// 水滴图1
chartsBall1() {
this.chartsData(
"wtChartBall",
"rgba(37, 207, 240)",
"rgba(29, 123, 255)",
0.55
);
},
// 水滴图2
chartsBall2() {
this.chartsData(
"wtChartBall_2",
"rgba(255, 198, 56)",
"rgba(229, 124, 0)",
0.45
);
},
// 水滴图3
chartsBall3() {
this.chartsData(
"wtChartBall_3",
"rgba(37, 207, 240)",
"rgba(29, 123, 255)",
0.55
);
},
// 水滴图
chartsBall4() {
this.chartsData(
"wtChartBall_4",
"rgba(255, 122, 122)",
"rgba(255, 51, 85)",
0.45
);
},
最后配置项
chartsData(name, colo1, colo2, data) {
_self.myChart1 = this.$echarts.init(document.getElementById(name));
let option = {
// 图表主标题
title: {
text: "", // 主标题文本,支持使用 \n 换行
bottom: 60, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
left: "center", // 值: 'left', 'center', 'right' 同上
textStyle: {
// 文本样式
fontSize: 18,
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: "70%", // 水球图的半径
center: ["50%", "50%"], // 水球图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标
// 水填充图的形状 circle 默认圆形 rect 圆角矩形 triangle 三角形
// diamond 菱形 pin 水滴状 arrow 箭头状 还可以是svg的path
shape: "circle",
phase: 0, // 波的相位弧度 不设置 默认自动
direction: "right", // 波浪移动的速度 两个参数 left 从右往左 right 从左往右
outline: {
show: true,
borderDistance: 0, // 边框线与图表的距离 数字
itemStyle: {
opacity: 1, // 边框的透明度 默认为 1
borderWidth: 0, // 边框的宽度
shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
shadowColor: "#fff", // 边框的阴影颜色,'#134547'
borderColor: "#33C9F0", // 边框颜色 '#134547'
},
},
// 图形样式
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: colo2,
},
{
offset: 0,
color: colo1,
},
]), // 水球显示的背景颜色
opacity: 0.8, // 波浪的透明度
shadowBlur: 10, // 波浪的阴影范围
},
backgroundStyle: {
color: "#407bf3", // 水球未到的背景颜色
opacity: 0.2,
},
// 图形的高亮样式
emphasis: {
itemStyle: {
opacity: 0.8, // 鼠标经过波浪颜色的透明度
},
},
// 图形上的文本标签
label: {
color: "#fff",
position: ["50%", "50%"],
normal: {
position: ["50%", "80%"], // 设置标签显示的位置
textStyle: {
fontSize: 19, //修改字体大小
fontWeight: 500,
fontFamily: " DINPro-Medium, DINPro",
},
},
},
data: [data], // 系列中的数据内容数组
},
],
};
_self.myChart1.setOption(option);
},