效果图:
所需背景图:
<div class="divInformation">
<div class="divHeader">升学率统计</div>
<div class="cutLine"></div>
<div class="divComponent">
<div class="companyNumber">
<i class="el-icon-arrow-left" @click="changeLeft"></i>
<i class="el-icon-arrow-right" @click="changeRight"></i>
<div class="numberComponent" :style="testStyle">
<div
class="companyItem"
v-for="(item, index) in information.company"
:key="index"
>
{{ item.name }}
</div>
</div>
</div>
<div id="liquidChart"></div>
</div>
</div>
export default {
name: " ",
computed: {},
data() {
return {
currentIndex: 0,
testStyle: "",
information: {
company: [
{ name: "高中1" },
{ name: "高中2" },
{ name: "高中3" },
{ name: "高中4" },
],
},
optionData: [0.62, 0.68, 0.76, 0.73],
option: {
// 图表主标题
title: {
text: " ", // 主标题文本,支持使用 \n 换行
top: 5, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
left: "center", // 值: 'left', 'center', 'right' 同上
textStyle: {
// 文本样式
fontSize: 17,
fontWeight: 400,
color: "black",
},
},
// 提示框组件
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: "65%", // 水球图的半径
center: ["50%", "57%"], // 水球图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标
// 水填充图的形状 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: 3, // 边框的宽度
shadowBlur: 30, // 边框的阴影范围 一旦设置了内外都有阴影
shadowColor: " ", // 边框的阴影颜色,
borderColor: {
// 边框颜色
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, // 边框 0% 处的颜色
color: "rgba(69,73,240,0)",
},
{
offset: 1, // 边框 100% 处的颜色
color: "#4077eb",
},
],
},
},
},
// 图形样式
itemStyle: {
color: "#4077eb", // 水球显示的背景颜色
opacity: 0.7, // 波浪的透明度
shadowBlur: 10, // 波浪的阴影范围
shadowColor: "#4077eb",
},
backgroundStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: "rgba(69,73,240,0.2)", // 0% 处的颜色
},
{
offset: 0.5,
color: "rgba(69,73,240,0.2)", // 50% 处的颜色
},
{
offset: 1,
color: "rgba(69,73,240,0.8)", // 100% 处的颜色
},
],
}, // 水球未到的背景颜色
opacity: 0.5,
},
// 图形的高亮样式
emphasis: {
itemStyle: {
opacity: 0.8, // 鼠标经过波浪颜色的透明度
},
},
// 图形上的文本标签,在水波和背景前的文字颜色是不同的,可以通过 insideColor 设置水波处的文字颜色,color 设置背景处的文字颜色
label: {
normal: {
textStyle: {
color: "rgba(69,73,240, .6)",
fontSize: 30,
},
},
},
data: [0.62], // 系列中的数据内容数组
},
],
},
};
},
mounted() {
this.liquidChart = this.$echarts.init( document.getElementById("liquidChart") );
this.liquidChart.setOption(this.option);
},
created() {},
methods: {
changeLeft() {
if (this.currentIndex >= 1) {
this.currentIndex--;
this.testStyle = this.getTestStyle();
}
this.option.series[0].data = [this.optionData[this.currentIndex]]
this.liquidChart.clear();
this.liquidChart.setOption(this.option)
console.log(this.currentIndex);
},
changeRight() {
if (this.currentIndex < this.information.company.length - 1) {
this.currentIndex++;
} else if (this.currentIndex === this.information.company.length - 1) {
this.currentIndex = 0;
}
this.testStyle = this.getTestStyle();
this.option.series[0].data = [this.optionData[this.currentIndex]]
this.liquidChart.clear();
this.liquidChart.setOption(this.option)
},
getTestStyle() {
return `transform: translateX(${-25 * this.currentIndex}%);`;
},
},
};
.divInformation {
border-radius: 16px;
height: 32%;
width: 100%;
color: #ffffff;
background-color: rgba(15, 59, 78, 0.8);
}
.divHeader {
font-size: 18px;
padding: 10px 15px;
text-align: center;
font-weight: bold;
}
.cutLine {
width: 100%;
height: 5px;
background-image: linear-gradient(to right, #3633d8, #44bbf7);
}
.divComponent {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 99%;
height: calc(100% - 47px);
padding: 10px 15px;
align-items: center;
text-align: center;
}
.companyNumber {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
width: 100%;
height: 20%;
}
.el-icon-arrow-left {
cursor: pointer;
position: absolute;
left: 0;
top: 70%;
transform: translateY(-50%);
z-index: 999;
}
.el-icon-arrow-right {
cursor: pointer;
position: absolute;
right: 0;
top: 70%;
transform: translateY(-50%);
z-index: 999;
}
.numberComponent {
display: flex;
justify-content: space-between;
height: 20%;
width: 400%;
position: relative;
transition: all 0.9s;
font-size: 15px;
}
.companyItem {
display: inline-block;
width: 48%;
height: 100%;
margin: 0 1%;
font-size: 18px;
}
#liquidChart {
background: url(./animal.gif) no-repeat center bottom;
position: relative;
width: 100%;
height: 80%;
}