项目报表可视化

1.技术选型

• 3.0目前不稳定，且使用element ui 组件库
• 使用vue 2.6版本

vue add element

• vue 集成了element,使用按需加载

1.2 vue-charts图表组件介绍

推荐图表在简单场景中的使用

1.3 v-charts图表组件介绍

在使用echarts生成图表的时候，经常需要使用做繁琐的数据类型转化，修改复杂的配置项，v-charts的出现正是为了解决这个痛点。

• 文档

https://v-charts.js.org/#/

基于vue2.0 和echarts封装的v-charts图表组件，只需要同意提供一种对前后端都友好的数据格式设置简单的配置项，便轻松生成常见的图表。

• 按需加载

// vcharts.js
import Vue from "vue";
import VeLine from "v-charts/lib/line.common";
// 全局注册组件
Vue.component("ve-line", VeLine);

• 在页面中使用

2.使用mixins混入

• 注意：引用图表，这里不能用动态加载，否则刷新会包dom找不到

// 导出公共的组件 commonCardMixins.js

import CommonCard from "../components/commonCard";
export default {
  components: {
    CommonCard
  }
};

3.生成自定义图表

4.效果如下

`

image (1).png

5.provide-inject

机制：父组件通过provide函数将数据向所有子组件传入

// index主页面

provide () {
    // 传值
    return {
      // 父组件向下传递给子组件
      wordCloudFun: this.wordCloud,  // 传递数据
      LiquidFun: this.liquidData
    };
  },

• 看源码，vue init inject赋值 是在beforecreate 和create 之间
• 但实际上，我们获取词云图数据是在mounted 的时候，所以，我们要将provide传值以函数的形式

// index主页面
data(){
    return {
        wordCloud:[],  // 云数据
        liquidData:[] // 水球图数据
        }
},
methods: {
    getWorudeFun () {
      return this.wordCloud
    },
    getLiquidFun () {
      return this.liquidData
    }
  },
  provide () {
    // 传值
    return {
      // 父组件向下传递给子组件
      wordCloudFun: this.getWorudeFun,  // 传递函数
      LiquidFun: this.getLiquidFun
    };
  },

• 子组件

// wordCloud.vue
inject: ["wordCloudFun"], // 子组件接受父组件的词云数据
computed: {
    wordCloudData() {
      return this.wordCloudFun();
    },
    
data: this.wordCloudData,  // 赋值

• 优化写法
• mixins ：对于模块直接数据无关联的数据，只注重页面渲染，不关心业务逻辑

// commonDataMixin.js
export default {
  inject: ["wordCloudFun", "LiquidFun"],
  computed: {
    wordCloudData() {
      return this.wordCloudFun();
    },
    liquiData() {
      return this.LiquidFun();
    },
  },
};

• 页面引用

// wordCloud.vue
import commonDataMixins from '../../mixins/commonDataMixins'


mixins: [commonDataMixins],

• 公共处理函数数据

// 千分位 67,890,197
function format(v) {
  // ?先表示后面的表达式是正确的 ,后面表示3位数字 $直接到结尾都是这个逻辑
  const reg = /\d{1,3}(?=(\d{3})+$)/g;
  // 加逗号$&:获取到匹配的值，后面加任何想加的，比如,$&,:就是拿值加逗号
  return `${v}`.replace(reg, "$&,");
}

• 项目启动 core.js 报错原因
• core.js is not found

原因是用的最新的core.js，版本不一样，需要安装对应的旧版本，安装3.0之前的最新版本，就能解决问题
``