先看效果图
点击后发生改变
开始上代码
html部分
<div class="left-circle">
<div class="whole-circle" ref="wholeCircle"></div>
<div class="whole-list">
<ul>
<li v-for="(item, index) in newArr" :key="index">
<div
class="icon"
:class="{ iconactived: spanIndex.indexOf(index) > -1 }"
:style="{ background: item.text }"
@click="changeCicle(item, index)"
></div>
<span class="name">{{ item.name }}</span>
<span class="value">{{ item.value }}</span>
<span class="unit">单 <span>|</span></span>
<span class="type">{{ item.type }}</span>
</li>
</ul>
</div>
</div>
css部分代码
.left-circle {
display: flex;
padding-left: 92px;
.whole-circle {
width: 60%;
height: 100%;
}
.whole-list {
width: 40%;
height: 100%;
ul {
li {
display: flex;
align-items: center;
padding: 20px 10px;
span {
margin: 0 10px;
}
.icon {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
}
.iconactived {
background: #cccccc !important;
}
.name {
font-size: 22px;
font-weight: 500;
color: #3aaeff;
}
.value {
font-size: 38px;
font-weight: bold;
color: #ffffff;
}
.type {
color: #00d9ff;
font-size: 30px;
font-weight: bold;
}
.unit {
display: flex;
margin: 0;
font-size: 22px;
font-weight: 300;
color: #ffffff;
span {
opacity: 0.3;
margin: 0 2px;
}
}
}
}
}
}
vue3.0JS部分关键代码
关于ref这个响应式引用可以看官网带 ref 的响应式变量
import { ref } from "vue"; //需要引入ref相应变量
setup() {
const wholeCircle = ref(null);
const isactive = ref(0); //选中切换的名字
const spanIndex = ref([]); //选中icon的数组
const dataList = [
{ value: 758, name: "付款", type: "30%" },
{ value: 425, name: "接单", type: "20%" },
{ value: 565, name: "发货", type: "10%" },
{ value: 6452, name: "揽收", type: "15%" },
{ value: 4905, name: "签收", type: "6%" },
{ value: 547, name: "撤单", type: "4%" }
];
const color = [
{ text: "#52ca8d" },
{ text: "#06bdf6" },
{ text: "#116fee" },
{ text: "#6e68fd" },
{ text: "#9229fd" },
{ text: "#fdac50" }
];
const newArr = dataList.map((item, index) => {
return { ...item, ...color[index] };
});
let arr = [...newArr];
const changeCicle = (item, index) => {
let arrIndex = spanIndex.value.indexOf(index);
if (arrIndex > -1) {
spanIndex.value.splice(arrIndex, 1);
arr.splice(index, 0, item);
} else {
spanIndex.value.push(index);
arr = arr.filter(res => {
return res.name != item.name;
});
}
//let myChart = echarts.init(wholeCircle.value);
//let bar = orderEcharts.wholeCircle(arr);
//myChart.setOption(bar);
};
return {
wholeCircle,
dataList,
isactive,
newArr,
changeCicle,
spanIndex
};
}