放弃ECharts！3行代码DataV搞定Vue酷炫大屏，效率飙升300%！

1.数据可视化

数据可视化：将一堆枯燥的数据用图表的形式动态展示出来，让我们一眼就能看懂数据里面隐藏的信息。

前端常用的可视化组件有很多，比如百度开源的 Echarts、蚂蚁金服推出的AntV、阿里云推出的 DataV等等。

今天给大家介绍的是阿里云团队推出的 DataV。

官网：

css 复制代码

http://datav.jiaminghi.com/guide/

2.安装配置 DataV

所需环境：

本地已经安装 node，并且配置 npm
已经创建 Vue 项目

2.1 安装配置 DataV

使用 npm 安装 DataV：

css 复制代码

npm install @jiaminghi/data-view

在 main.js 文件中全局注册 DataV

2.2 项目报错解决方案

1.错误一

解决办法：

css 复制代码

/node_modules/jiaminghi/data-view/lib/components/decoration3/src/main.vue
/node_modules/jiaminghi/data-view/lib/components/decoration6/src/main.vue

将这两个文件中的 :key = 'i' 移动到 v-for 标签后面

2.错误二

**解决方案：**配置vite.config.js

css 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ command }) => {
  return {
    plugins: [vue()],
    build: {
      commonjsOptions: {
        include: [/node_modules/,]
      }
    },
    optimizeDeps: {
      include: [
        "@jiaminghi/c-render",
        "@jiaminghi/c-render/lib/plugin/util",
        "@jiaminghi/charts/lib/util/index",
        "@jiaminghi/charts/lib/util",
        "@jiaminghi/charts/lib/extend/index",
        "@jiaminghi/charts",
        "@jiaminghi/color"
      ]
    }
  }
})

3.DataV 核心知识点

3.1 边框组件

边框组件主要用于包裹内容区域

css 复制代码

<template>
  <div>
    <div class="header">
      <dv-border-box-1 title="内容区域标题1">
        <div class="content">这里是内容区域1</div>
      </dv-border-box-1>

      <dv-border-box-8 title="内容区域标题2">
        <div class="content">这里是内容区域2</div>
      </dv-border-box-8>

      <dv-border-box-12 title="内容区域标题3">
        <div class="content">这里是内容区域3</div>
      </dv-border-box-12>

      <dv-border-box-13 title="内容区域标题3">
        <div class="content">这里是内容区域4</div>
      </dv-border-box-13>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.header {
  width: 400px;
  height: 200px;
}
.content {
  padding: 40px;
}
</style>

所有边框均支持自定义颜色及背景色:

color: 自定义颜色
backgroundColor: 背景色

css 复制代码

<dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >dv-border-box-1</dv-border-box-1>

3.2 装饰组件

装饰组件主要用来点缀页面，达到增强视觉效果的作用。

css 复制代码

  <div>
    <dv-decoration-1 style="width: 200px; height: 50px" />
    <dv-decoration-6 style="width: 300px; height: 30px" />
    <dv-decoration-9 style="width: 150px; height: 150px">66%</dv-decoration-9>
    <dv-decoration-12 style="width: 150px; height: 150px" />
  </div>

所有装饰均支持自定义颜色:

css 复制代码

<dv-decoration-1 :color="['red', 'green']" />

3.3 图表

DataV 的图表是基于 Charts 进行封装，只需要将对应图表option数据传入组件即可：

使用案例：

css 复制代码

 <dv-charts :option="option" />

例如：

vue 复制代码

<template>
  <div>
    <dv-charts :option="option" />
  </div>
</template>
<script setup>
const option = {
  title: {
    text: "周销售额趋势",
  },
  xAxis: {
    name: "第一周",
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  },
  yAxis: {
    name: "销售额",
    data: "value",
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: "bar",
    },
  ],
};
</script>
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 600px;
}
</style>

具体 option 配置可以看 Charts 官网

css 复制代码

http://charts.jiaminghi.com/example/line.html

注：DataV 的图表功能基于 Charts 实现。而 Charts 其实是对 ECharts 进行了封装。

3.4 动态环图

css 复制代码

  <dv-active-ring-chart :config="config" style="width: 300px; height: 300px" />

例如：

css 复制代码

<template>
  <div id="container">
    <dv-active-ring-chart :config="config" style="width: 300px; height: 300px" />
  </div>
</template>
<script setup>
const config = {
  data: [
    {
      name: "杭州",
      value: 55,
    },
    {
      name: "嘉兴",
      value: 120,
    },
    {
      name: "绍兴",
      value: 78,
    },
  ],
};
</script>
<style lang="scss" scoped>
#container {
  background: #282c34;
  width: 500px;
  height: 300px;
}
</style>

3.5 胶囊柱图

ini 复制代码

<dv-capsule-chart :config="config" style="width:300px;height:200px" />

例如：

xml 复制代码

<template>
  <div id="container">
    <dv-capsule-chart :config="config" style="width: 300px; height: 200px" />
  </div>
</template>
<script setup>
const config = {
  data: [
    {
      name: "杭州",
      value: 55,
    },
    {
      name: "嘉兴",
      value: 120,
    },
    {
      name: "绍兴",
      value: 78,
    },
  ],
};
</script>
<style lang="scss" scoped>
#container {
  background: #282c34;
  width: 500px;
  height: 300px;
}
</style>

3.6 水位图

css 复制代码

<dv-water-level-pond :config="config" style="width: 150px; height: 200px" />

例如：

css 复制代码

<template>
  <div id="container">
    <dv-water-level-pond :config="config" style="width: 150px; height: 200px" />
  </div>
</template>
<script setup>
const config = {
  data: [100],
};
</script>
<style lang="scss" scoped>
#container {
  background: #282c34;
  width: 500px;
  height: 300px;
}
</style>

3.7 进度池

css 复制代码

<dv-percent-pond :config="config" style="width:200px;height:100px;" />

例如：

css 复制代码

<template>
  <div id="container">
    <dv-percent-pond :config="config" style="width: 200px; height: 100px" />
  </div>
</template>
<script setup>
const config = {
  value: 66,
};
</script>
<style lang="scss" scoped>
#container {
  background: #282c34;
  width: 500px;
  height: 300px;
}
</style>

3.8 飞线图

css 复制代码

 <dv-flyline-chart :config="config" style="width: 100%; height: 100%" />

例如：

css 复制代码

<template>
  <div id="container">
    <dv-flyline-chart :config="config" style="width: 100%; height: 100%" />
  </div>
</template>
<script setup>
const config = {
  centerPoint: [0.48, 0.35],
  points: [
    [0.52, 0.23],
    [0.43, 0.29],
    [0.59, 0.35],
    [0.53, 0.47],
    [0.45, 0.54],
    [0.36, 0.38],
    [0.62, 0.55],
  ],
};
</script>
<style lang="scss" scoped>
#container {
  background: #282c34;
  width: 500px;
  height: 300px;
}
</style>

3.9 数字翻牌器

css 复制代码

 <dv-digital-flop :config="config" style="width: 200px; height: 50px" />

例如：

css 复制代码

<template>
  <div id="container">
    <dv-digital-flop :config="config" style="width: 200px; height: 50px" />
  </div>
</template>
<script setup>
const config = {
  number: [123456],
  content: "{nt}个",
};
</script>
<style lang="scss" scoped>
#container {
  background: #282c34;
  width: 500px;
  height: 300px;
}
</style>

3.10 排名轮播表

css 复制代码

<dv-scroll-ranking-board :config="config" style="width:500px;height:300px" />

例如：

css 复制代码

<template>
  <div id="container">
    <dv-scroll-ranking-board :config="config" style="width: 500px; height: 300px" />
  </div>
</template>
<script setup>
const config = {
  data: [
    {
      name: "杭州",
      value: 120,
    },
    {
      name: "绍兴",
      value: 50,
    },
    {
      name: "湖州",
      value: 78,
    },
    {
      name: "嘉兴",
      value: 66,
    },
    {
      name: "台州",
      value: 80,
    },
    {
      name: "丽水",
      value: 45,
    },
    {
      name: "金华",
      value: 29,
    },
  ],
};
</script>
<style lang="scss" scoped>
#container {
  background: #282c34;
  width: 800px;
  height: 300px;
}
</style>

4.DataV 首页可视化实战

其实就是先布局，然后选择边框，最后选择图表，封装数据。

比如上面的例子中，页面分成了两部分：头部的标题和下面的图表内容。

然后图表内容部分使用 flex 布局，将页面分为 3 部分。

中间部分又使用了 flex 布局，将页面平均分为上下部分

完整代码：

css 复制代码

<template>
  <div class="main-container">
    <div class="title">知否技术-数据统计</div>
    <div class="content">
      <div class="left">
        <dv-border-box-3>
          <dv-capsule-chart
            :config="config"
            style="width: 98%; height: 30%; padding: 40px"
          />
          <dv-active-ring-chart
            :config="config1"
            style="width: 300px; height: 30%; margin: 0 auto"
          />
          <dv-capsule-chart
            :config="config"
            style="width: 98%; height: 30%; padding: 40px"
          />
        </dv-border-box-3>
      </div>
      <div class="center">
        <dv-border-box-11 title="总销量" class="item">
          <dv-digital-flop
            :config="config2"
            style="width: 600px; height: 200px; margin-top: 50px"
          />
          <dv-active-ring-chart
            :config="config1"
            style="width: 300px; height: 200px; margin: 0 auto"
          />
        </dv-border-box-11>
        <dv-border-box-8 title="dv-border-box-11" class="item">
          <dv-capsule-chart
            :config="config"
            style="width: 98%; height: 100%; padding: 40px"
          />
        </dv-border-box-8>
      </div>
      <div class="right">
        <dv-border-box-3 :reverse="true"
          ><dv-scroll-ranking-board
            :config="config3"
            style="width: 85%; height: 100%; margin-left: 40px"
        /></dv-border-box-3>
      </div>
    </div>
  </div>
</template>
<script setup>
const config = {
  data: [
    {
      name: "杭州",
      value: 167,
    },
    {
      name: "台州",
      value: 67,
    },
    {
      name: "嘉兴",
      value: 123,
    },
    {
      name: "金华",
      value: 55,
    },
    {
      name: "绍兴",
      value: 98,
    },
  ],
};
const config1 = {
  data: [
    {
      name: "杭州",
      value: 167,
    },
    {
      name: "台州",
      value: 67,
    },
    {
      name: "嘉兴",
      value: 123,
    },
    {
      name: "金华",
      value: 55,
    },
    {
      name: "绍兴",
      value: 98,
    },
  ],
};
const config2 = {
  number: [345312454154],
  content: "总销量：{nt}",
};
const config3 = {
  data: [
    {
      name: "南京",
      value: 167,
    },
    {
      name: "苏州",
      value: 67,
    },
    {
      name: "常州",
      value: 123,
    },
    {
      name: "镇江",
      value: 55,
    },
    {
      name: "连云港",
      value: 98,
    },
    {
      name: "扬州",
      value: 98,
    },
    {
      name: "淮安",
      value: 98,
    },
    {
      name: "南通",
      value: 98,
    },
  ],
};
</script>
<style lang="scss" scoped>
.main-container {
  width: 100%;
  height: 100vh;
  background: #282c34;
}
.title {
  height: 8vh;
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: white;
}
.content {
  display: flex;
  height: 92vh;
  align-items: left;
}
.left {
  flex: 1;
}
.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 92vh;
}
.center .item {
  flex: 1;
}

.right {
  flex: 1;
}
</style>