当前位置：首页 > news >正文

多个DataV遍历生成

news 2025/7/27 10:35:39

DataV是数据可视化工具 与Echart类似
相对Echart图标边框 装饰可选

官网DataV

在这里插入图片描述

安装

npm install @kjgl77/datav-vue3

main.ts

import DataVVue3 from '@kjgl77/datav-vue3'
app.use(DataVVue3)

多个DataV遍历生成

Vue3+vite+DataV为例:

在这里插入图片描述

<template><div w50rem h25rem flex="~ col" justify-center items-center bg-dark><!-- 使用 v-for 遍历 chartsData 数组 --><componentv-for="(chart, index) in chartsData":key="index":is="resolveComponent(chart.type)" :config="chart.config":style="chart.style"/><div pt5><button @click="addData">增加数据</button></div></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';// 定义默认样式
const defaultChartStyle = {width: '25rem',height: '15rem',
};// 动态解析组件类型
const resolveComponent = (type: string) => {switch (type) {case 'bar':return 'dv-active-ring-chart'; // 假设这是 DataV 提供的组件名case 'line':return 'dv-capsule-chart';// 可以添加更多类型的组件解析default:console.warn(`未知的组件类型: ${type}`);return null;}
};// 数据源，包含各个图表组件的配置
const chartsData = reactive([{type: 'line', // 这里定义了组件类型config: {data: [{ name: '南阳', value: 167 },{ name: '周口', value: 123 },{ name: '漯河', value: 3 },{ name: '郑州', value: 75 },{ name: '西峡', value: 66 },],axisColor: '#ffffff'},style: defaultChartStyle,},{type: 'bar',config: {data: [{ name: '南阳', value: 167 },{ name: '周口', value: 123 },{ name: '漯河', value: 98 },{ name: '郑州', value: 75 },{ name: '西峡', value: 66 },],colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],unit: '万元',},style: defaultChartStyle,},// 可以添加更多图表配置对象
]);// 添加新数据到当前图表（可以根据需要调整）
const addData = () => {const chartIndex = 0; // 假设我们只向第一个图表添加数据if (chartsData[chartIndex]) {const newDataPoint = {name: '测试' + Math.floor(Math.random() * 100),value: Math.floor(Math.random() * 100)};if (chartsData[chartIndex].type === 'line') {newDataPoint.value = [newDataPoint.value, chartsData[chartIndex].config.data.length + 1];}chartsData[chartIndex].config.data.push(newDataPoint);}
};
</script><style scoped>
.chart-container {margin-bottom: 1rem;}
</style>