分享3个超级炫酷的可视化大屏模板

项目模板基于 Vue 和 ECharts，内置了世界地图、中国地图、人体脑图、折线图、柱状图、环形图、饼状图、雷达图等模块。开发者可以根据需求自由添加或删除模块，满足多样化的可视化展示需求。

数据修改：

你可以在 /components 文件夹下的 .vue 文件中，将模拟数据替换为真实数据。以下是数据模拟的示例代码：

setData(type) { 
  let arr = [];
  switch (type) {
    case 'x':  // 设置横坐标为时间数据
      for (let i = 0; i < this.selectRangeDate.length; i++) {
        arr.push(this.selectRangeDate[i][0] + '.' + this.selectRangeDate[i][1] + '.' + this.selectRangeDate[i][2]);
      }
      break;
    case 's': // 模拟访问次数数据
      for (let i = 0; i < this.selectRangeDate.length; i++) {
        arr.push((Math.random() * 6).toFixed(0));
      }
      break;
    case 'n':  // 模拟访问人数数据
      for (let i = 0; i < this.selectRangeDate.length; i++) {
        arr.push((Math.random() * 600).toFixed(0));
      }
      break;
  }
  return arr;
}

项目截图：

####page1

####page2

####page3

项目依赖：

"dependencies": {
  "core-js": "^3.6.5",
  "echarts": "^5.2.2",
  "iview": "^3.1.3",
  "vue": "^2.6.11",
  "vue-router": "^3.2.0"
}

项目安装步骤：

1. 安装依赖：

   npm install
   

2. 启动项目：

   npm run serve
   

GitHub 项目地址: https://github.com/bym110/vue-echarts

在线演示地址: https://bym110.github.io/vue-echarts/preview

tags: 可视化|模板|ECharts|Vue|数据|项目|模块|依赖|安装