157 lines
3.2 KiB
Vue
157 lines
3.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';
|
|
import * as echarts from 'echarts';
|
|
|
|
const colorList = [
|
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(74, 194, 154, 1)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(189, 255, 243, 1)',
|
|
},
|
|
]),
|
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(247, 151, 30, 1)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(255, 210, 0, 1)',
|
|
},
|
|
]),
|
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(86, 204, 242, 1)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(47, 128, 237, 1)',
|
|
},
|
|
]),
|
|
];
|
|
const data = ref([
|
|
{ value: 40, name: '一级' },
|
|
{ value: 80, name: '二级' },
|
|
{ value: 120, name: '三级' },
|
|
]);
|
|
const option = reactive({
|
|
color: colorList,
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'funnel',
|
|
top: '11%',
|
|
left: 'center',
|
|
width: '40%',
|
|
sort: 'ascending',
|
|
gap: 8,
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
fontSize: 18,
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.8,
|
|
borderColor: 'rgba(9,20,36,0)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
});
|
|
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>
|