DataV 数据看板安装及使用

第一步：安装Vue/Cli

命令：

npm i -g @vue/cli

　　

第二部：创建Vue项目：

命令：

注：目录必须使用datav-开头

vue create datav-project

注：选择 Default ([Vue 2] label, eslint]) 配置 

创建完成之后，目录结构如下：

第三步：进入项目目录

命令：

cd datav-project

　　

第四步：安装组件库

4.1.安装datav库

命令：

npm install @jiaminghi/data-view
npm install@jiaminghi/charts
npm install @jiaminghi/c-render

charts 使用，参考：http://charts.jiaminghi.com/guide/

<script>
import Charts from '@jiaminghi/charts'
export default {
  name: 'PowerBoard',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const container = document.getElementById('container')
      const myChart = new Charts(container)
      myChart.setOption({
        title: 'My Chart'
      })
    }
  }
}
</script>

　　

　　　　

4.2.安装less库

命令：

npm install less less-loader --save-dev

　　

4.3.安装axios库

命令：

npm install axios -S

 

4.4.安装echarts库
命令：

npm install @jiaminghi/echarts

　　

4.5.安装router库
命令：

npm install vue-router

　　

第五步：配置、运行

注：在根目录下找到 vue.config.js 文件，关闭eslint校验，lintOnSave: false

参考：https://www.cnblogs.com/mahmud/p/17652229.html

 命令：

npm run serve

　　

第六步：开发环境发布

命令：

npm run build

第八步：

修改main.js

import Vue from 'vue'
import App from './App.vue'
import dataV from '@jiaminghi/data-view'
// 生产环境时设置为 false 以去除生产模式的消息提示
Vue.config.productionTip = false
Vue.use(dataV);
new Vue({
  render: h => h(App)
}).$mount('#app')

　　　　

第八步：源码下载：datav-project.rar

示例效果：

axios加载数据

import $ from 'jquery';
import axios from 'axios';
const res = await axios.get('https://localhost:44319/SpotCheckDatav/SpotCheck_TaskDatav');
export default {
  name: 'ScrollBoard',
  mounted() {
      this.fetchData();
  },
  methods :{
    async fetchData() {
      const resData = res.data;
      for (let i = 0; i < resData.length; i++) {
          this.config.data.push([resData[i].deviceName, resData[i].spotName, resData[i].spotState]);
      }
    }
  },
  data () {
    return {
      config: {
        header: ['设备', '点检人', '状态'],
        data: [],
        index: true,
        columnWidth: [50, 170, 300],
        align: ['center'],
        rowNum: 7,
        headerBGC: '#1981f6',
        headerHeight: 45,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
      }
    }
  }
}

　　  

DataV Vue2源码参考：https://github.com/DataV-Team/datav.jiaminghi.com/tree/master/demo/electronic-file/src

大屏数据展示组件库 （看板）
参考：http://datav.jiaminghi.com/
示例：
http://datav.jiaminghi.com/demo/manage-desk/index.html
https://lxxyslf.github.io/echarts/#/
https://datav-vue3-demo.netlify.app/
移动端
参考：https://vant-contrib.gitee.io/vant/