datav+charts的使用-Vue 大屏数据展示组件库

最新推荐文章于 2024-09-15 07:08:44 发布

青铜级前端

最新推荐文章于 2024-09-15 07:08:44 发布

阅读量1.1w

点赞数 2

分类专栏： Vue项目

本文链接：https://blog.csdn.net/wangcongcsdn/article/details/106647927

版权

本文介绍了如何使用Datav和Charts这两个Vue组件库进行大屏数据展示。首先，通过访问datav官网获取资源，接着安装必要的插件。随后，在main.js文件中引入组件，并在Vue应用的页面中进行使用，其操作方式类似于ECharts。通过这样的步骤，可以实现丰富的大屏数据可视化效果。

摘要由CSDN通过智能技术生成

datav官网http://datav.jiaminghi.com/
先装这两个插件
在这里插入图片描述
然后在main.js中引用

import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

然后就可以在页面中使用了，chart和echart类似

<template>
  <div>
  这是datav组件
     <dv-border-box-10 class="panel_box" >
        <h2>柱形图-就业行业</h2>
        <div class="chart" id="container">图标</div>
      </dv-border-box-10>
  </div>
</template>
<script>
//先导入charts
import Charts from '@jiaminghi/charts'
export default {
  
  data () {
    return {
  
    };
  },
  created(){
  },
  mounted(){
  在mouted里面做了一个立即执行函数 ，防止里面的变量污染
    (function(){
    //下面和eacharts差不多
      const container =document.getElementById('container')

        const myChart = new Charts(container