讲在前

接下来，做一些图形，垒成网页，框架是vue，用js，css用tailwindcss。

一般大屏可视化这种，就一个页面，然后一个页面里面包括很多图形，就是这样。然后搞布局，一般左、中、右，左中右再分细细的小块。

图有这些：

1、横向 柱形
2、竖向 柱形

3、雷达
4、环形

5、关系
6、数据云
7、数据展示

8、地图可视化

做在中

装

起项目：

npm create vite@latest

装库（一个3d库echarts，一个跟后端交涉拿动态数据的工具axios）：

js
 代码解读
复制代码
npm i --save echarts axios

vite

// 配src另起名为@

js
 代码解读
复制代码
export default defineConfig({
  // 插件配置
  plugins: [vue()], // 使用Vue插件
  
  // 模块解析配置
  resolve: {
    // 路径别名
    alias: {
      '@': './src' // 将@符号映射到src目录
    }
  },
  
  // 开发服务器配置
  server: {
    hmr: true // 启用热模块替换(HMR)功能
  }
})

axios

怎么写，网上一搜一大把，这样写，拿数据的，没这个不行：

js
 代码解读
复制代码
// utils/request.js
import axios from 'axios'

// 创建axios实例
const service = axios.create({
 baseURL: '后端接口的地址', // API基础路径（需替换为实际地址）
 timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
 (config) => {
  // 在请求头中添加token（认证用）实际项目中应从store或localStorage获取
  config.headers.token = 'token'
  return config // 必须返回配置
 },
 (error) => {
  return Promise.reject(error)
 }
)

// 响应拦截器
service.interceptors.response.use((response) => {
 const { success, message, data } = response.data
 if (success) {
  // 请求成功时，直接返回有效数据
  return data
 } else {
  return Promise.reject(new Error(message))
 }
})

// 导出配置好的axios实例
export default service

js
 代码解读
复制代码
// 写单独接口 放src/api/data.js里面
import request from '@/utils/request.js'

export const getData = () => {
 return request({
  url: '/data' // 跟上面的根路径相拼
 })
}

写

布局

js
 代码解读
复制代码
// App.vue

引组件

js
 代码解读
复制代码

// src / api / data.js

js
 代码解读
复制代码

放块

随便怎么放，觉得怎么舒服怎么来。左中右三块位置。

块

横向

js
 代码解读
复制代码
<HorizontalBar class="h-1/3 box-border pb-4" :data="data.source" />

js
 代码解读
复制代码


<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

// 定义组件接收的 props
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

// 使用模板引用获取 DOM 元素
const target = ref(null)

// ECharts 实例变量
let mChart = null

// 组件挂载后初始化图表
onMounted(() => {
  // 使用目标 DOM 元素初始化 ECharts 实例
  mChart = echarts.init(target.value)
  
  // 渲染图表
  renderChart()
  
  // 可选：添加窗口大小变化监听器，实现响应式
  window.addEventListener('resize', handleResize)
})

// 组件卸载时清理资源
onUnmounted(() => {
  if (mChart) {
    mChart.dispose()  // 销毁 ECharts 实例
    window.removeEventListener('resize', handleResize)  // 移除事件监听
  }
})

// 处理窗口大小变化，重新调整图表尺寸
const handleResize = () => {
  if (mChart) mChart.resize()
}

// 渲染或更新水平条形图
const renderChart = () => {
  // ECharts 配置选项
  const options = {
    // X 轴配置（数值轴）
    xAxis: {
      type: 'value',  // 数值类型
      show: false,    // 隐藏 X 轴线
      max: function(value) {
        return parseInt(value.max * 1.2) // 设置最大值，留出 20% 的余量防止柱子触顶
      }
    },
    
    // Y 轴配置（类目轴）
    yAxis: {
      type: 'category',  // 类目类型
      data: props.data.source.map(item => item.name),  // 从 props 获取类目数据
      inverse: true,     // 反转类目顺序
      axisLine: { show: false },  // 隐藏 Y 轴线
      axisTick: { show: false },  // 隐藏 Y 轴刻度
      axisLabel: { 
        color: '#9EB1C8'  // 设置标签颜色
      }
    },
    
    // 网格布局配置
    grid: {
      top: 0,    // 上边距
      right: 0,  // 右边距
      bottom: 0, // 下边距
      left: 0,   // 左边距
      containLabel: true  // 包含标签在内的布局计算
    },
    
    // 系列配置（实际的条形图）
    series: [{
      type: 'bar',  // 图表类型为条形图
      data: props.data.source.map(item => ({
        name: item.name,
        value: item.value
      })),
      showBackground: true,  // 显示背景条
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'  // 背景条颜色
      },
      itemStyle: {
        color: '#479AD3',    // 柱子颜色
        barBorderRadius: 5,   // 柱子圆角
        shadowColor: 'rgba(0, 0, 0, 0.3)',  // 阴影颜色
        shadowBlur: 5         // 阴影模糊度
      },
      barWidth: 12,  // 柱子宽度
      label: {
        show: true,       // 显示数值标签
        position: 'right', // 标签显示在右侧
        color: '#fff',    // 标签文字颜色
        formatter: '{c}'  // 标签内容格式（显示原始值）
      }
    }]
  }

  // 将配置应用到图表实例
  mChart.setOption(options)
}
script>

竖向

js
 代码解读
复制代码
  const options = {
    // X 轴现在作为类目轴（显示名称）
    xAxis: {
      type: 'category',  // 类目类型
      data: props.data.source.map(item => item.name),  // 类目数据
      axisLine: { show: false },  // 隐藏轴线
      axisTick: { show: false },  // 隐藏刻度
      axisLabel: {
        color: '#9EB1C8',  // 标签颜色
        rotate: 30  // 标签旋转角度（防止文字重叠）
      }
    },
    
    // Y 轴现在作为数值轴
    yAxis: {
      type: 'value',  // 数值类型
      show: false,    // 隐藏 Y 轴线
      max: function(value) {
        return parseInt(value.max * 1.2) // 留出顶部空间
      }
    },
    
    // 网格布局
    grid: {
      top: 20,    // 上边距稍大
      right: 0,
      bottom: 40, // 下边距留出标签空间
      left: 0,
      containLabel: true
    },
    
    // 柱状图系列配置
    series: [{
      type: 'bar',
      data: props.data.source.map(item => ({
        name: item.name,
        value: item.value
      })),
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle: {
        color: '#479AD3',
        barBorderRadius: [5, 5, 0, 0],  // 只设置顶部圆角
        shadowColor: 'rgba(0, 0, 0, 0.3)',
        shadowBlur: 5
      },
      barWidth: 20,  // 柱子稍宽
      label: {
        show: true,
        position: 'top',  // 标签显示在柱子顶部
        color: '#fff',
        formatter: '{c}'
      }
    }]
  }

竖向柱状其它的不变，改一下x和y即可。

结在后

写大屏，一般（页面 + axios），页面用库echarts，动态数据用axios去拿后端返出来的数据。

大屏可视化框架：echarts、dataV、antV。

antv细化：
G2：就像是 Echarts，提供了很多常见的图表，可以帮助你展示数据 📊。
S2：这个库把表格数据转化为更直观的图形化显示，让数据更加好理解 📈。
G6：用于展示数据之间的关系，比如画脑图或者展示复杂的数据结构 🧠🔗。
X6：是一个图形编辑工具，可以用来创建流程图、ER 图（实体关系图）等 📝🔧。
L7：专门用来处理地理空间数据的可视化，比如跟地图有关的功能 🌍📍。
F2：是 G2 在移动端的版本，帮助你在手机上展示数据图表 📱📊。
AVA：一个低代码框架，可以快速生成数据可视化的工具，非常适合非程序员快速搭建可视化界面 🔨💡。