vue3之echarts柱状图-圆锥加自动轮播_vue3 echartas label轮播-CSDN博客

本文链接：https://blog.csdn.net/qq_40864647/article/details/145728326

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