前端 利用Vue实现数据可视化 - 戴向天

大家好！我叫戴向天

QQ群：602504799

如若有不理解的，可加QQ群进行咨询了解

先进行展示效果吧

<!--
  数据可视化
-->
<template>
  <div class>
    <div class="flex-wrap m-t-10 flex" v-for="(item,key) in this.getDataInfo" :key="key">
      <span class="flex-s-0 p-l-20 p-r-10 height-30 fs-16 fon-wb flex flex-y-center">
        {
   
   {item.key}}:
        {
   
   {item.type === 'json'?'{':item.type === 'array'?'[':''}}
        <span
          v-if="item.type === 'json' || item.type === 'array'"
          class="m-l-30 bg-edit color-f cursor-pointer fs-12 width-40 fon-w3 flex flex-center p-tb-5 border-r-5 op-3 hover-op-10"
        >{
   
   {item.type}}</span>
      </span>
      <div
        class="m-l-30 m-t-10 flex-g-1"
        :class="(item.type === 'json' || item.type === 'array')&&'width_100'"
        v-if="item.type === 'json' || item.type === 'array'"
      >
        <yc-data-view :data="item.value" />
      </div>
      <span v-else-if="item.type === 'string'" class="fs-16 fon-w4  flex flex-y-center">
        "{
   
   {item.value}}",
        <span
          class="m-l-30 bg-edit color-f cursor-pointer fs-12 width-40 fon-w3 flex flex-center p-tb-5 p-lr-10 border-r-5 op-3 hover-op-10"
        >{
   
   {item.type}}</span>
      </span>
      <span v-else-if="item.type === 'number'" class="fs-16 fon-w4 color-edit flex flex-y-center">
        {
   
   {item.value}},
        <span
          class="m-l-30 bg-edit color-f cursor-pointer fs-12 width-40 fon-w3 flex flex-center p-tb-5 p-lr-10 border-r-5 op-3 hover-op-10"
        >{
   
   {item.type}}</span>
      </span>
      <div class="fon-wb p-lr-20">{
   
   {item.type === 'json'?'}'+(getDataInfo.length- 1 > key?',':''):item.type === 'array'?']'+(getDataInfo.length- 1 > key?',':''):''}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: ""
  },
  computed: {
    getDataInfo() {
      if (this.data) {
        return this.JSONToArray(this.data);
      } else {
        return [];
      }
    }
  }
};
</script>

getType 详细代码==> https://blog.csdn.net/weixin_41088946/article/details/91038867
JSONToArray文件

import JSPlugIn from './js-plugIn'

const JSONToArray = (json = {}) => {
  const arr = []

  for (let i in json) {
    const type = getType(json[i])
    arr.push({
      key: i,
      type,
      value: json[i]
    })
  }
  return arr;
}

export default JSONToArray

使用方法

data: {
        userInfo: {
          attr: {
            age: 18,
            sex: "男"
          },
          nickname: "戴向天",
          mobile: 15072939115,
          other: [{
            girl: '呆呆'
          }, 2, 3, 4, 5, 6]
        }
      }
<yc-data-view :data="data"></yc-data-view>