Vue+ECharts4Taro3打造超炫数据仪表盘，轻松配置搞定监视屏幕

咱们说说怎么用 Vue 和 ECharts4Taro3 做出一款牛逼到爆的数据可视化仪表盘！这玩意儿在公司里用途超大~

搞定Taro3和Vue真是太容易了，安装过程一点都不难。只要使用npm/yarn这些超级无敌的工具来配置一下就行！

npm install -g @tarojs/cli
taro init myApp
cd myApp
npm install vue

想轻松搞掂Echarts4Taro3工具箱？这货能让你瞬间体验到Taro3强大的数据图表服务~放心，这玩意儿装起来轻而易举，一句话就行了～

npm install echarts-for-taro@next

咱先得去Websit3那搞定点儿事哈。别怕，跟着我做就行了。在”配置”里头找个叫”index.js”的玩意儿，改改就成。

别急着搞那个 Vue 加载，先去注册！按着教程走就好了～

module.exports = {
  // ...
  mini: {
 // ...
 webpackChain(chain) {
   chain.resolve.alias.set('@tarojs/components$', '@tarojs/components/dist-h5/vue3/index.js');
 },
  },
};

搞定！就得搞个监视屏幕才行！先用图示说明问题，比如饼图和柱状图，其他的我们慢慢想办法。

  


import { ref } from 'vue';
import { useReady, usePageEvent } from '@tarojs/taro';
import { ecCanvas } from 'echarts-for-taro';
export default {
  setup() {
 const ec = ref(null);
 useReady(() => {
   ec.value.init((canvas, width, height, dpr) => {
     const chart = echarts.init(canvas, null, {
       width: width,
       height: height,
       devicePixelRatio: dpr,
     });
     ec.value = chart;
     return chart;
   });
 });
 return {
   ec,
 };
  },
};

别错过游戏里的图表~除了可以看之外，还有好多好玩儿的互动功能等你挖掘。像这个柱状图，你轻轻一碰上面的数字，就能弹出更详细的内容感觉怎么样？

赶紧动手试试看！学会后就能变成行业大牛了~利用超级火爆的ECharts4Taro3，做出的动感十足的数据仪表板绝对让你眼前一亮！看看那些美轮美奂的画面，还能分享给别人。提高用户参与度小事儿一桩！觉得有收获的话就点赞收藏，咱们一起共同进步！遇到不懂就问我，有新的想法就说出来，随时留言千万别忘了告诉你的小伙伴们，让他们也来试试这神器！

import { ref } from 'vue';
import { useReady, usePageEvent } from '@tarojs/taro';
import { ecCanvas } from 'echarts-for-taro';
export default {
  setup() {
 const ec = ref(null);
 useReady(() => {
   ec.value.init((canvas, width, height, dpr) => {
     const chart = echarts.init(canvas, null, {
       width: width,
       height: height,
       devicePixelRatio: dpr,
     });
     ec.value = chart;
     return chart;
   });
   const options = {
     title: {
       text: '基础图表示例',
     },
     series: [
       {
         type: 'pie',
         data: [
           { value: 335, name: '直接访问' },
           { value: 310, name: '邮件营销' },
           { value: 234, name: '联盟广告' },
           { value: 135, name: '视频广告' },
           { value: 1548, name: '搜索引擎' },
         ],
       },
     ],
   };
   ec.value.setOption(options);
 });
 return {
   ec,
 };
  },
};