vue3之echarts柱状图-圆锥加自动轮播

vue3之echarts柱状图-圆锥加自动轮播

效果：

版本
"echarts": "5.4.2"

核心代码：

<template>
    <div ref="echartRef" class="chart"></div>
    <svg>
        <linearGradient v-for="(item, i) in colors" :id="`lab${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
            <stop offset="38%" stop-color="#ffffff"></stop>
            <stop offset="100%" :stop-color="item"></stop>
        </linearGradient>
        <linearGradient v-for="(item, i) in colors" :id="`area${i}`" :key="`area${i}`" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="transparent"></stop>
            <stop offset="30%" :stop-color="item"></stop>
        </linearGradient>
    </svg>
</template>

<script setup lang="ts">
import { onMounted, reactive, onUnmounted, ref, nextTick } from 'vue';
import * as echarts from 'echarts';

// 颜色配置
const colors = ['rgba(255, 145, 56, 1)', 'rgba(252, 219, 31, 1)', 'rgba(91, 251, 223, 1)', 'rgba(16, 178, 255, 1)'];
const info = reactive({
    curData: [
        {
            name: '渝',
            value: '5978',
        },
        {
            name: '豫',
            value: '5806',
        },
        {
            name: '冀',
            value: '4947',
        },
        {
            name: '苏',
            value: '2942',
        },
        {
            name: '鲁',
            value: '2678',
        },
        {
            name: '晋',
            value: '2621',
        },
        {
            name: '陕',
            value: '1944',
        },
        {
            name: '鄂',
            value: '1551',
        },
        {
            name: '皖',
            value: '1387',
        },
    ],
});
let timer: any = null;
let myEchart: any = null;
const echartRef = ref(null);
const dataZoomEndValue = 4;
const option = ref(null);

onMounted(() => {
    initChart();
});

onUnmounted(() => {
    clearInterval(timer);
    timer = null;
});

const initChart = () => {
    if (echartRef.value && !myEchart) {
        myEchart = echarts.init(echartRef.value, '', { renderer: 'svg' });
        myEchart.on('mouseover', () => {
            endRoll();
        });
        myEchart.on('mouseout', () => {
            startRoll();
        });
    }
    getChartOptions();
};

// 结束滚动
const endRoll = () => {
    clearInterval(timer);
    timer = null;
};

// 开启滚动
const startRoll = () => {
    nextTick(() => {
        // 自动滚动
        if (info.curData.length > 5) {
            timer = setInterval(() => {
                if (option.value.dataZoom[0].endValue === info.curData.length) {
                    option.value.dataZoom[0].startValue = 0;
                    option.value.dataZoom[0].endValue = dataZoomEndValue;
                } else {
                    option.value.dataZoom[0].startValue += 1;
                    option.value.dataZoom[0].endValue += 1;
                }
                myEchart.setOption(option.value);
            }, window.config.chartRollTime);
        }
    });
};

const getChartOptions = () => {
    endRoll();
    const sortData = info.curData.sort((a: any, b: any) => b.value - a.value);
    const xData = sortData.map((item: { name: string }) => item.name);
    const fontSize = 14;
    const topFontSize = 12;
    const symbolSizeW = 60;
    const laboff = -20;
    option.value = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
            },
            formatter: (par: any) => {
                return `${par[0].name}:${par[0].value}`;
            },

            textStyle: {
                fontSize,
            },
        },
        xAxis: {
            data: xData,
            show: true,
            type: 'category',
            axisLabel: {
                fontFamily: 'HONOR Sans CN',
                color: 'rgba(238, 246, 255, 1)',
                fontSize,
                padding: [0, 0, 0, 0],
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(186, 215, 255, 1)',
                    opacity: 0.5,
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        yAxis: {
            type: 'value',
            show: true,
            splitNumber: 5,
            min: 0,
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#BAD7FF',
                    opacity: 0.1,
                },
            },
            axisLabel: {
                color: '#EEF6FF',
                fontSize,
                padding: [0, 0, 0, 0],
            },
        },
        grid: {
            left: 0,
            right: 10,
            top: 20,
            bottom: 30,
            containLabel: true,
        },
        series: [
            {
                type: 'pictorialBar',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                data: sortData.map((item: { value: string }, index: number) => {
                    const curColor = index < 4 ? colors[index] : colors[3];
                    const num = index < 4 ? index : 3;
                    return {
                        value: item.value,
                        symbolSize: [symbolSizeW, '100%'],
                        symbolPatternSize: 100,
                        symbolOffset: [0, 2],
                        itemStyle: {
                            color: `url(#area${num})`,
                            opacity: 0.5,
                            borderColor: curColor,
                            borderWidth: 3,
                        },
                        emphasis: {
                            itemStyle: {
                                color: `url(#area${num})`,
                            },
                        },

                        label: {
                            show: true,
                            position: 'top',
                            offset: [0, 0],
                            textStyle: {
                                color: '#FFFFFF',
                                fontSize,
                                fontWeight: '500',
                                fontFamily: 'DINPro',
                            },
                        },
                    };
                }),
            },
            {
                type: 'pictorialBar',
                symbol: 'rect',
                symbolRepeat: false,
                symbolSize: [0, 0],
                symbolMargin: 1,
                data: sortData.map((item: any, i: number) => {
                    const num = i < 4 ? i : 3;
                    return {
                        value: item.value,
                        label: {
                            show: true,
                            position: 'bottom',
                            offset: [0, laboff],
                            formatter: (par: any) => {
                                return `TOP${par.dataIndex + 1}`;
                            },

                            fontSize: topFontSize,
                            fontFamily: 'DINPro',
                            color: `url(#lab${num})`,
                            fontStyle: 'italic',
                            fontWeight: '600',
                        },
                    };
                }),
            },
        ],
        dataZoom: [
            {
                show: false,
                xAxisIndex: 0,
                startValue: 0,
                endValue: dataZoomEndValue,
            },
            {
                type: 'inside',
                show: true,
                xAxisIndex: [0],
                start: 0, // 默认为1
                end: 50,
            },
        ],
    };
    myEchart.setOption(option.value);
    startRoll();
};
</script>

<style scoped lang="scss">
.chart {
    width: 380px;
    height: 180px;
}
</style>