mr_web_back/src/components/Echarts/CountBox.vue

<template>
    <div class="top_box_pos">

        <div class="top_content_box">
            <div class="top_content_left_box">
                <div class="top_content_left_title_box">
                    <div class="top_content_left_title_img_box">
                        <img :src=props.img alt="">
                    </div>

                    <div class="top_content_left_title_text_box">
                        <div class="top_content_left_title_text_sub_title">{{ props.text }}</div>
                        <div class="top_content_left_title_text_title">{{ props.count }}</div>
                    </div>
                </div>
            </div>

            <div class="top_content_right_box">
                <div class="top_content_right_num_box">
                    <img v-if="props.percentage > 0" src="/img/home/上升.png" alt="">
                    <div class="top_content_right_num">{{ props.percentage }}%</div>
                </div>
                <div class="top_content_right_price">同昨日对比</div>
            </div>
        </div>

        <div class="top_line_box">
            <div class="mainBox" :id="'mainBox' + props.idx"></div>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';


const props = defineProps({
    // 数据
    data: {
        type: Array,
        default: [
            ['1', 500],
            ['2', 900],
            ['3', 460],
            ['4', 1150],
            ['5', 300],
            ['6', 1000],
            ['7', 400],
        ],
    },
    img: {
        type: String,
        default: null,
    },
    text: {
        type: String,
        default: null,
    },
    count: {
        type: Number,
        default: 0,
    },
    percentage: {
        type: Number,
        default: 0,
    },
    idx: {
        type: Number,
        default: 0,
    },
})

console.log(props.data,'this is data');


onMounted(async () => {
    await echartsInit()
})

onBeforeUnmount(() => {
    echarts.dispose(document.getElementById('mainBox' + props.idx));
});

// 数据预览 echarts 参数
let options = ref({
    xAxis: {
        type: 'category',
        boundaryGap: false,
        show: false,
        axisTick: {
            show: false // 不显示坐标轴刻度线
        },
        axisLine: {
            show: false, // 不显示坐标轴线
        },
        axisLabel: {
            show: false, // 不显示坐标轴上的文字
        },
        splitLine: {
            show: false // 不显示网格线
        },
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '30%'],
        show: false,
    },
    visualMap: {
        type: 'piecewise',
        show: false,
        // 淡化效果
        dimension: 0.1,
        // 最小值
        min: 0,
        seriesIndex: 1,
        pieces: [
            {
                gt: 1,
                lt: 3,
                color: 'rgba(0, 0, 180, 0.4)'
            },
            {
                gt: 5,
                lt: 7,
                color: 'rgba(0, 0, 180, 0.4)'
            }
        ]
    },
    series: [
        {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            showSymbol: true,

            lineStyle: {
                color: {
                    type: 'linear', // 线性渐变
                    x: 0.7,
                    y: 0,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0,
                        color: '#a5b9fe' // 0%处的颜色为淡橙色
                    }, {
                        offset: 1,
                        color: '#4e70df' // 100%处的颜色为橙色
                    }]
                },
                width: 3,
            },
            itemStyle: {
                color: {
                    type: 'linear', // 线性渐变
                    x: 0,
                    y: 0.8,
                    x2: 0,
                    y2: 0.4,
                    colorStops: [{
                        offset: 0,
                        color: '#ffffff' // 0%处的颜色为淡橙色
                    }, {
                        offset: 1,
                        color: '#e7f1ff' // 100%处的颜色为橙色
                    }]
                }
            },
            areaStyle: {},
            data: props.data
        }
    ]
})



// 顶部第一个盒子
async function echartsInit() {
    let myChart = echarts.getInstanceByDom(document.getElementById('mainBox' + props.idx)); //有的话就获取已有echarts实例的DOM节点。

    if (myChart == null) { // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById('mainBox' + props.idx));
    }

    options.value && myChart.setOption(options.value);
}
</script>


<style lang="less" scoped>
.mainBox {
    width: 450px;
    margin-top: -139px;
    margin-left: -45px;
    margin-top: -70px;
    height: 300px;
}

.top_box_pos {
    width: 350px;
    height: 250px;
    background-color: #ffffff;
    box-shadow: 0 0 30px 10px #f8f8fd;
    border-radius: 10px;
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    cursor: pointer;
}

.top_content_box {
    width: 100%;
    height: 40%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

// 顶部盒子左边
.top_content_left_box {
    width: 45%;
    height: 100%;
}

.top_content_left_title_box {
    width: 100%;
    height: 100%;
    padding: 20px 0 0 5px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 15px;
    margin-top: 5px;
}

.top_content_left_title_img_box {
    width: 35%;
    height: 60%;
    // overflow: hidden;
    margin-right: 10px;
}

.top_content_left_title_img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top_content_left_title_text_box {
    margin-top: 5px;
}

.top_content_left_title_text_title {
    font-weight: bold;
    font-size: 25px;
}

.top_content_left_title_text_sub_title {
    font-size: 15px;
    margin-top: 5px;
    font-weight: bold;
    color: #9aa4ba;
}

.top_content_right_box {
    width: 45%;
    height: 100%;
    padding: 23px 20px 0 0;
}

.top_content_right_price {
    display: flex;
    justify-content: end;
    margin-right: -10px;
    margin-bottom: 3px;
    font-size: 13px;

    font-weight: bold;
    color: #9ca1bb;
}

.Top_content_right_price {
    display: flex;
    justify-content: end;
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: bold;
    color: #9ca1bb;

}

.top_content_right_num_box {
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 18px;
}

.top_content_right_num_box img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    margin-right: 5px;
}


.top_line_box {
    width: 100%;
    height: 60%;
}
</style>