Vue+Echarts4Taro3打造多维度云图！轻松展示炫酷大数据

小伙伴们，你们是否想象过利用Vue和Echarts4Taro3来打造五光十色的云图？现如今，面对那些看得到却捉不住的庞大多维度大数据，想要展现的炫酷可是难如登天

光坐着可不行，赶快行动起来！首先，先搞一个 Vue 环境出来哈。怎么弄？Vue CLI 这货就是帮你建新项目的得力助手，然后把想要的东西加进去搞定就是！

小伙伴们，想不想让你的小程序里的ECharts数据看起来更加酷炫？那就赶快来安装Echarts4Taro3！这东西是用Taro框架做的小程序数据大管家~而且通过简单的npm命令就能搞定！最后再把这个神奇的工具添加到您的项目里就行了！

搞定！开始弄Vue组件看云图！但别急着手建立CloudMap.vue文件，先按这个顺序往下做：

搞定Echarts图表，小菜一碟！用getOption函数就能随心所欲地设定自己爱好的设置与数据喔~举个例子给你瞧瞧哈：

搞定了！直接用咱之前搞的那套CloudMap组件，接上父亲组件，把后台数据丢过去呗。

  

    
  


  import { ecBehavior } from 'echarts/dist/ec-taro3.umd.min.js';
  export default {
    data() {
      return {
        ec: {
          onInit: null
        }
      }
    },
    mounted() {
      this.ec.onInit = ecBehavior((canvas, width, height, dpr) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        chart.setOption(this.getOption());
        return chart;
      });
    },
    methods: {
      getOption() {
        // 在这里编写ECharts的配置项和数据
        return {
          // ...
        }
      }
    }
  }


  .cloud-map {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

看完这个教学，马上就会用Vue和Echarts4Taro3做出能让人大饱眼福的多维度数据云图了！准备好需要用的东西，搞个云图插件，填上对应的信息和数据就行了。最后就是放回到父组件里看看成果咋样，保证眼前一亮！

放心，这个指南只是给你个大体框架，具体怎么搞还得看你自己。当然咯，ECharts里面除了咱们之前聊到的那些图表类型和设定，还有各种花样等你去发现！想怎么玩就怎么玩，想怎么设计就怎么设计，让你的页面独具个性！

getOption() {
  return {
    series: [{
      type: 'wordCloud',
      sizeRange: [12, 60],
      rotationRange: [-90, 90],
      textStyle: {
        normal: {
          fontFamily: 'sans-serif',
          fontWeight: 'bolder',
          color: function () {
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
            ].join(',') + ')';
          }
        }
      },
      data: [
        { name: 'Vue', value: 10000 },
        { name: 'ECharts', value: 6181 },
        { name: 'Taro', value: 4386 },
        // ...
      ]
    }]
  }
}

希望这篇小文可以帮助你驾驭多维数据可视化，让你更熟知数据！加油，别轻易退缩！

参考链接：

  

    
  


  import CloudMap from './CloudMap.vue';
  export default {
    components: {
      CloudMap
    }
  }


  .app {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

Vue官方文档：[链接]

想用Vue+Echarts4Taro3做出炫酷的云图吗？快瞧这里：[链接]！反正试试又不花钱，大胆去搞！搞好后别忘记告诉我们留言区见！加油