vue3+ts 封装echarts，根据tabs切换展示

已于 2024-07-17 17:23:32 修改
阅读量276 收藏
点赞数 3
文章标签： echarts 前端 javascript
于 2024-07-16 17:23:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68531033/article/details/140472090
版权 
 <div class="bottom">
                        <div class="topli">
                            <p>用电统计</p>
                            <div class="tabs">
                                <div class="tab" :class="{ active: active.tab1 === index }"
                                    v-for="(item, index) in tabsList1" :key="index" @click="changeTab(1, index)">
                                    {{ item.label }}
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <div id="sum-electricity" v-if="!loading.tab1 && active.tab1 === 0">
                                <TestEleChart pid="sum-electricity" title="月用电统计" :eleData="eleData"
                                    :eleXdata="eleXdata"></TestEleChart>
                            </div>
                            <div id="day-electricity" v-if="!loading.tab1 && active.tab1 === 1">
                                <TestEleChart pid="day-electricity" title="日用电统计" :eleData="eleData"
                                    :eleXdata="eleXdata"></TestEleChart>
                            </div>
                        </div>
                    </div>

                    <div class="sitestutus">
                        <div class="top">
                            <p>用水统计</p>
                            <div class="tabs">
                                <div class="tab" :class="{ active: active.tab2 === index }"
                                    v-for="(item, index) in tabsList" :key="index" @click="changeTab(2, index)">
                                    {{ item.label }}
                                </div>
                            </div>
                        </div>
                        <div class="sitebutom">
                            <div id="monthWate" v-if="!loading.tab2 && active.tab2 === 0">
                                <TestWaterChart pid="monthWate" title="月用水" :waterData="waterData"
                                    :waterXdata="waterXdata"></TestWaterChart>
                            </div>
                            <div id="dayWater" v-if="!loading.tab2 && active.tab2 === 1">
                                <TestWaterChart pid="dayWater" title="日用水" :waterData="waterData"
                                    :waterXdata="waterXdata"></TestWaterChart>
                            </div>

                        </div>
                    </div>

<script setup lang="ts">

// tabs切换

const tabsList = [

    { label: '日' },
    { label: '月' },
];

const tabsList1 = [

    { label: '日' },
    { label: '月' },
];

const active = ref({
    tab1: 0,
    tab2: 0,
});
const loading = ref({
    tab1: false,
    tab2: false,
});

const waterData = ref<number[]>([]);
const waterXdata = ref<string[]>([]);
const eleData = ref<number[]>([]);
const eleXdata = ref<string[]>([]);

// const loading = ref(false)
const fetchData = async (type: string, tabGroup: number) => {
    if (tabGroup === 1) {
        loading.value.tab1 = true;
        const store = siteStore();
        const res = await reqGetEleStatistics(store.curSite.id, type);
        eleXdata.value = res.data[type === 'day' ? 'elcWrDay' : 'elcWrMonth'].map((item: any) => item.createTime);
        eleData.value = res.data[type === 'day' ? 'elcWrDay' : 'elcWrMonth'].map((item: any) => item.value);
        if (eleData.value.length === 0) {
            eleXdata.value = ["无数据"];
            eleData.value = [0];
        }
        loading.value.tab1 = false;
    } else if (tabGroup === 2) {
        loading.value.tab2 = true;
        const store = siteStore();
        const res = await reqGetWaterStatistics(store.curSite.id, type);
        waterXdata.value = res.data[type === 'day' ? 'elcWrDay' : 'elcWrMonth'].map((item: any) => item.createTime);
        waterData.value = res.data[type === 'day' ? 'elcWrDay' : 'elcWrMonth'].map((item: any) => item.value);
        if (waterData.value.length === 0) {
            waterXdata.value = ["无数据"];
            waterData.value = [0];
        }
        loading.value.tab2 = false;
    }
};

const changeTab = async (tabGroup: number, index: number) => {
    if (tabGroup === 1) {
        active.value.tab1 = index;
        const type = index === 0 ? 'day' : 'month';
        await fetchData(type, tabGroup);
    } else if (tabGroup === 2) {
        active.value.tab2 = index;
        const type = index === 0 ? 'day' : 'month';
        await fetchData(type, tabGroup);
    }
};


// 初始化时获取数据
onMounted(async () => {
    await changeTab(1, active.value.tab1);
    await changeTab(2, active.value.tab2);
});

// scss
   .bottom {
                position: absolute;
                top: vh(635);
                width: vw(390);
                height: 400px;

                .topli {
                    display: flex;
                }

                p {

                    width: vw(435);
                    margin-left: vw(10);
                    line-height: vh(40);
                    color: #fff !important;
                   text-indent: 1rem;
                    font-weight: 700;
                    font-size: 25px;
                }

                #sum-electricity,
                #day-electricity {
                    width: vw(385);
                    height: vh(300);

                }

            }

            .sitestutus {
                position: absolute;
                top: vh(300);
                width: vw(385);
                height: 350px;


                p {
                    width: vw(435);
                    margin-left: vw(10);
                    line-height: vh(40);
                    color: #fff !important;
                    // background: linear-gradient(84deg, #1d4591 0%, rgba(57, 123, 243, 0) 100%) !important;
                    text-indent: 1rem;
                    font-weight: 700;
                    font-size: 25px;
                }

                .sitebutom {
                    color: #fff;
                    font-size: 20px;
                }

                #dayWater,
                #monthWate {
                    width: vw(385);
                    height: vh(300);

                }
            }

</script>

封装的 柱状图  组件 TestEleChart 

成品如图所示

<!-- 水电大屏用电趋势 -->
<template>
    <div>

    </div>
</template>

<script setup lang="ts">
import { nextTick, watch, computed, onMounted, ref, onUpdated, onBeforeUnmount } from 'vue';
import echarts from '@/assets/ts/echarts';
import { ZRColor } from 'echarts/types/dist/shared';
import useResizeChart from '@/components/CommonChart/hooks/useResizeChart';
import { color } from 'echarts';
import { EffectScatterChart } from 'echarts/charts';
echarts.use([EffectScatterChart]);

const props = defineProps({
    pid: {
        type: String,
        required: true,
    },
    title: {
        type: String,
        required: true,
    },
    // 饼图 颜色
    color: {
        type: Array as () => ZRColor[],
        default: [],
    },
    eleData: {
        type: Array,
        required: true,
    },
    // 横坐标值
    eleXdata: {
        type: Array,
        required: true,
    }
})

const sideData = props.eleData.map((item: any) => item + 7.5)

// nextTick(() => {
//     // 2. 容器
//     const container = document.querySelector('#' + props.pid) as HTMLElement;
//     if (container) renderChart(container);
// });
// // 3. 初始化 echarts 实例, 将配置添加给 echarts 实例
let myChart: echarts.ECharts | null = null;
// const renderChart = (container?: HTMLElement) => {
//     if (!myChart) {
//         myChart = echarts.init(container as HTMLElement);
//         // 自适应 chart
//         useResizeChart(container as HTMLElement, myChart as echarts.ECharts);
//     }

//     myChart.setOption(option);
// };
// 改进
const initChart = async () => {
    await nextTick();  // 确保 DOM 更新完成
    const container = document.querySelector('#' + props.pid) as HTMLElement;
    if (container) {
        myChart = echarts.init(container);
        // 自适应 chart
        // @ts-ignore
        useResizeChart(container as HTMLElement, myChart);
        renderChart();
    }
}


// 4.配置项
const renderChart = () => {
    if(!myChart) return;
    const option = {

        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            formatter: "{b} : {c}",
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            data: props.eleXdata,
            //坐标轴
            axisLine: {
                lineStyle: {
                    color: '#3eb2e8'
                }
            },
            //坐标值标注
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                }
            }
        },
        yAxis: {
            //坐标轴
            axisLine: {
                show: false
            },
            //坐标值标注
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                }
            },
            //分格线
            splitLine: {
                lineStyle: {
                    color: '#4784e8'
                }
            }
        },
        series: [{
            name: 'a',
            tooltip: {
                show: false
            },
            type: 'bar',
            // 柱子的宽度
            barWidth: 15,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#0B4EC3" // 0% 处的颜色
                    }, {
                        offset: 0.6,
                        color: "#138CEB" // 60% 处的颜色
                    }, {
                        offset: 1,
                        color: "#17AAFE" // 100% 处的颜色
                    }], false)
                }
            },
            data: props.eleData,
            barGap: 0
        }, {
            type: 'bar',
            barWidth: 8,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#09337C" // 0% 处的颜色
                    }, {
                        offset: 0.6,
                        color: "#0761C0" // 60% 处的颜色
                    }, {
                        offset: 1,
                        color: "#0575DE" // 100% 处的颜色
                    }], false)
                }
            },
            barGap: 0,
            data: sideData
        }, {
            name: 'b',
            tooltip: {
                show: false
            },
            type: 'pictorialBar',
            itemStyle: {
                borderWidth: 0,
                borderColor: '#0571D5',
                color: '#1779E0'
            },
            symbol: 'path://M 0,-10 l 110,0 l -12,85 l -110,0 z',
            // key[0]为盖子宽度 key[1]为倾斜程度 值小倾斜小
            symbolSize: ['23', '8'],
            // key[1] y轴
            symbolOffset: ['0', '-8'],
            //symbolRotate: -5,
            symbolPosition: 'end',
            data: props.eleData,
            z: 3
        }]

    };
    myChart.setOption(option);
}
onMounted(initChart);

onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});

watch(
  [() => props.eleData, () => props.eleXdata],
  () => {
    renderChart();
  },
  { deep: true }
);
</script>

<style scoped></style>

封装的 柱状图  组件 TestEleChart 

成品如图所示

<!-- 水务大屏柱状图 -->
<template>
    <div :id="props.pid" style="width: 100%; height: 100%;"></div>
  </template>

  <script setup lang="ts">
  import { nextTick, watch, ref, onMounted, onBeforeUnmount } from 'vue';
  import * as echarts from 'echarts';
  import { ZRColor } from 'echarts/types/dist/shared';
  import useResizeChart from '@/components/CommonChart/hooks/useResizeChart';

  const props = defineProps({
    pid: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    color: {
      type: Array as () => ZRColor[],
      default: () => [],
    },
    waterData: {
      type: Array,
      required: true,
    },
    waterXdata: {
      type: Array,
      required: true,
    }
  });

  let myChart: echarts.ECharts | null = null;

  const initChart = async () => {
    await nextTick();  // 确保 DOM 更新完成
    const container = document.querySelector('#' + props.pid) as HTMLElement;
    if (container) {
      myChart = echarts.init(container);
      // 自适应 chart
      // @ts-ignore
      useResizeChart(container as HTMLElement, myChart);
      renderChart();
    }
  };

  const renderChart = () => {
    if (!myChart) return;
    const option = {
      backgroundColor: "transparent",
      color: ["#3cefff"],
      tooltip: {},
      grid: {
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: props.waterXdata,
          axisTick: {
            alignWithLabel: true,
          },
          nameTextStyle: {
            color: "#82b0ec",
          },
          axisLine: {
            lineStyle: {
              color: "#82b0ec",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#82b0ec",
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#82b0ec",
            },
            formatter: "{value}%",
          },
          splitLine: {
            lineStyle: {
              color: "#0c2c5a",
            },
          },
          axisLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "",
          type: "pictorialBar",
          symbolSize: [20, 10],
          symbolOffset: [0, -5],
          symbolPosition: "end",
          z: 12,
          label: {
            show: true,
            position: "top",
            formatter: "{c}%",
          },
          data: props.waterData,
        },
        {
          name: "",
          type: "pictorialBar",
          symbolSize: [20, 10],
          symbolOffset: [0, 5],
          z: 12,
          data: props.waterData,
        },
        {
          type: "bar",
          itemStyle: {
            opacity: 0.7,
          },
          barWidth: "20",
          data: props.waterData,
          markLine: {
            silent: true,
            symbol: "none",
            label: {
              position: "middle",
              formatter: "{b}",
            },
            data: [
              {
                name: "目标值",
                yAxis: 80,
                lineStyle: {
                  color: "#ffc832",
                },
                label: {
                  position: "end",
                  formatter: "{b}\n {c}%",
                },
              },
            ],
          },
        },
        {
          type: "effectScatter",
          silent: true,
          tooltip: {
            show: false,
          },
          zlevel: 3,
          symbolSize: 10,
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
            color: "#3cefff",
            scale: 5,
          },
          itemStyle: {
            color: "#3cefff",
          },
          hoverAnimation: true,
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0,0,0,0,0,0],
        },
      ],
    };
    myChart.setOption(option);
  };

  onMounted(initChart);

  onBeforeUnmount(() => {
    if (myChart) {
      myChart.dispose();
      myChart = null;
    }
  });

  watch(
    [() => props.waterData, () => props.waterXdata],
    () => {
      renderChart();
    },
    { deep: true }
  );
  </script>

  <style scoped>
  /* 样式代码 */
  </style>

学习吖
关注
vite+vue3+ts从0到1搭建企业级项目
Allen-
08-29 685
vite+vue3+ts搭建一个企业级项目
Vue3+ElementPlus+TS
ianutt的博客
09-06 1359
Vue3
vue3 如何使用echars
yxrsssssss的博客
10-31 273
echars 的使用 在vue3 项目中
Vue3+TS中引入ECharts（按需引入，简单教程）
宝子的博客
06-15 9373
Vue3+TS的项目中使用ECharts。很简单的操作一看就会。
在vue3项目中使用el-tabs切换标签页时echarts图表显示不正确
最新发布
xllllll___的博客
06-01 1337
el-tabs标签页是用来分隔内容上有关联但是属于不同类别的数据集合。Tabs组件提供了选项卡功能，默认选中第一个标签页，也可以通过value属性来指定当前选中的标签页.此外，el-tabs还提供了tab-click方法，来实现切换标签也触发的事件。
vue3+Ts+Echarts 使用
apple_51417798的博客
02-05 3071
1、更改为cpm下载 2、为了减少体积和使用的便利，首先实现一个按需和全局的引入首先创建一个echarts.ts文件 3、在 mian.ts 中引入 4、我们在 App.vue 中使用 5、在需要的页面中使用。
vue3+ts 简单封装Echarts
weixin_43826851的博客
02-08 415
vue3+ts 简单封装Echarts
Vue3使用组件库的tab切换以及其他的切换，echarts图表，图表出现宽度压缩变窄的问题
qq_42859450的博客
10-18 867
echarts图表变形
Vue3+Vite+TS 快速搭建一套实用的脚手架
传说中的腿腿的博客
05-29 6168
Vue3出了已经有一段时间了，之前做的项目基本都是Vue2+webpack做的，正好现在马上要接一个新的项目，先手撸一套脚手架试试水~ 技术栈 开发工具：VSCode 代码管理：Git 前端框架：Vue3 构建工具：Vite 路由：vue-router 4x 状态管理：vuex 4x AJAX：axios UI库：element-plus 数据模拟：mockjs 代码规范：eslint 代码格式化：Prettier css预处理：sass
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（1）
TJ1532635942的博客
08-23 4497
本文编写的目的是为了基于vite、vue3、ts搭建开箱即用的前端应用框架模板，会实现axios、vue-router和pinia的封装和基本使用。
vue3 + ts 开发系统 -- table分页/一些小坑
qq_45428582的博客
02-20 1278
table组件分页封装 希望以表格方式展示列表数据，但数据量较大，应使用分页加载 Table组件和Pagination组件可以很方便实现这点，因有多组数据需要通过该方式加载，将其封装为TablePagination组件。 最初table以插槽形式注入，因为对于不同数据集来说，表格列必然不同，这与数据集，以及页面期望展示的数据相关，所以不采用table放在TablePagination中，props传入属性的形式。 后续发现Table数据是以props.data的方式传入，为了方便控制分页，将
vue3 实现一个tab切换组件
Angel_Tears_的博客
03-12 1532
3, 将bg大小进行调整 并移动到相应的位置。* 2. 获取元素的当前位置以及大小。// 没有找到值的时候找default。* 1. 找到相应的元素。文件: wqTabType。// wqTabs 元素。// 若没有找到tab。
Vue3+ts 封装echarts组件#记录
junsens的博客
04-08 776
Vue3+ts 封装echarts组件
在Vue3使用Echarts步骤
while1170的博客
03-02 930
7.在TS中创建一个onMounted初始化函数，一进入页面就会调用此函数;并在此调用定义的放图表的函数。也可在页面中单独引入使用：`import * as echarts from ‘echarts’
在Vue 3项目中使用 echarts
dangfulin的博客
05-01 3万+
记得第一次使用 echarts 还是2019年的时候，那时做的一个物联网项目云平台的前端需要一些数据可视化功能，经过一些对比后就使用了 echarts 。上手非常快，专业性也足够，因此在后来其他的一些项目中就多次用到它。 echarts 是百度基于 JavaScript 实现的一个开源可视化图表库，主要特点就是可视化类型丰富、动画炫酷、使用简单。 这个教程就简单演示如何在 Vue 3 项目中使用 echarts。 一，创建 Vue3 项目并安装 echarts npm 创建项目： npm create u
vue中切换tab时echart不显示或显示不正常
weixin_45654230的博客
02-21 2266
项目中在不同的tab中都使用了echart，但是在切换tab的时候发现第二个tab没有正常显示，通过排查代码和网上查阅才发现是因为element是通过display来控制tab的显示的，没有点击tab2的时候第二个echart图表的容器是。，解决思路：在渲染图表1的时候获取宽度，然后给图表2的宽度赋值，切换tab的时候设置$nextTick在下一次DOM更新的时候使用resize()函数重新渲染图表2。关键代码如下：（完整代码在最后）
Vue3中使用Echarts（Vue3+Ts）
qq_41634323的博客
06-01 2196
Vue3中使用Echarts（Vue3+Ts）
Vue3+Ts+Vite项目(第十二篇)——echarts安装与使用，vue3项目echarts组件封装
热门推荐
做笔记/记录遇到的前端bug
09-05 14万+
vue3项目引入echarts，安装echarts详细教程，vue3封装echarts组件
vue3+ts使用echarts
08-16
在Vue 3中，使用echarts的步骤如下： 1. 在App.vue文件中使用provide提供echarts实例。这可以在script标签中完成，示例如下： ```javascript <script setup lang="ts"> import * as echarts from "echarts"; import { provide } from "vue";
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值