多个DataV遍历生成

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 数组 -->
    <component
      v-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>