讲在前
接下来，做一些图形，垒成网页，框架是vue，用js，css用tailwindcss。
一般大屏可视化这种，就一个页面，然后一个页面里面包括很多图形，就是这样。然后搞布局，一般左、中、右，左中右再分细细的小块。
图有这些：
1、横向 柱形
2、竖向 柱形
3、雷达
4、环形
5、关系
6、数据云
7、数据展示
8、地图可视化
做在中
装
起项目：
npm create vite@latest
装库（一个3d库echarts，一个跟后端交涉拿动态数据的工具axios）：
js
npm i --save echarts axiosvite
// 配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
<template>
// 自定义背景图片路径、背景图覆盖容器并居中、视口高度、白色文字、内边距5、弹性布局、溢出隐藏
<div
class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden">
// 左侧容器 占据剩余空间、右侧边距5、半透明深色背景、内边距3、垂直弹性
<div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
</div>
// 中间容器 占50%宽度、右侧外边距5、垂直弹性
<div class="w-1/2 mr-5 flex flex-col">
</div>
// 右侧容器 占据剩余空间、半透明深色背景、内边距3、垂直弹性
<div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
</div>
</div>
</template>引组件
js
<script setup>
// 横向 柱形
import HorizontalBar from './components/HorizontalBar.vue'
// 竖向 柱形
import VerticalBar from './components/VerticalBar.vue'
// 雷达
import RadarBar from './components/RadarBar.vue'
// 环形
import RadiusBar from './components/RadiusBar.vue'
// 关系
import Relation from './components/Relation.vue'
// 数据云
import WordCloud from './components/WordCloud.vue'
// 数据展示
import TotalData from './components/TotalData.vue'
// 地图可视化
import MapChart from './components/MapChart.vue'
</script>// src / api / data.js
js
放块
随便怎么放，觉得怎么舒服怎么来。左中右三块位置。
块
横向
js
<HorizontalBar class="h-1/3 box-border pb-4" :data="data.source" />
js
<template>
<!-- 图表容器，通过 ref 获取 DOM 元素 -->
<div ref="target" class="w-full h-full"></div>
</template>
<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 ：一个低代码框架，可以快速生成数据可视化的工具，非常适合非程序员快速搭建可视化界面 🔨💡。