94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<template>
|
|
<div ref="chartsWarp" class="hot-charts">
|
|
<section class="_top_btns">
|
|
<span class="left_btn" @click="handleChange(-1)"></span>
|
|
<span class="right_btn" @click="handleChange(1)"></span>
|
|
{{ current.info.name }}
|
|
</section>
|
|
<custom-echart-triangle :chart-data="data" height="100%" :option="option" :active-index="current.info.level - 1" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
|
|
const data = ref([
|
|
{ value: 40, name: '一级', reaVal: '20', itemStyle: { color: '#56b1c0' } },
|
|
{ value: 80, name: '二级', reaVal: '30', itemStyle: { color: '#77c8ca' } },
|
|
{ value: 120, name: '三级', reaVal: '50', itemStyle: { color: '#7bb9cf' } },
|
|
]);
|
|
const option = reactive({});
|
|
onMounted(() => {});
|
|
|
|
const list = ref([
|
|
{
|
|
name: '茶叶',
|
|
value: '1',
|
|
level: 1,
|
|
},
|
|
{
|
|
name: '核桃',
|
|
value: '2',
|
|
level: 2,
|
|
},
|
|
{
|
|
name: '玉米',
|
|
value: '3',
|
|
level: 3,
|
|
},
|
|
]);
|
|
const current = reactive({
|
|
index: 0,
|
|
length: list.value.length - 1,
|
|
info: {
|
|
name: '茶叶',
|
|
value: '1',
|
|
level: 1,
|
|
},
|
|
});
|
|
function handleChange(n) {
|
|
if (current.index == 0 && n == -1) {
|
|
current.index = current.length;
|
|
} else if (current.index == current.length && n == 1) {
|
|
current.index = 0;
|
|
} else {
|
|
current.index += n;
|
|
}
|
|
current.info = list.value[current.index];
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.hot-charts {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
._top_btns {
|
|
position: relative;
|
|
height: 40px;
|
|
width: 30%;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
color: #fff;
|
|
line-height: 40px;
|
|
background: url('../../../assets/images/basic/tagBG-small.png') no-repeat center center / cover;
|
|
span {
|
|
display: block;
|
|
position: absolute;
|
|
top: 8px;
|
|
width: 24px;
|
|
height: 24px;
|
|
text-shadow: 2px 0px 10px 0px #01eeff;
|
|
}
|
|
.left_btn {
|
|
left: -10px;
|
|
background: url('../../../assets/images/basic/leftArrowIcon.png') no-repeat center center / cover;
|
|
}
|
|
.right_btn {
|
|
right: -10px;
|
|
background: url('../../../assets/images/basic/rightArrowIcon.png') no-repeat center center / cover;
|
|
}
|
|
}
|
|
}
|
|
</style>
|