devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ECharts 数据可视化大屏项目学习_用ucharts制作大屏

作者：爱喝兽奶帝天荒 | 2024-07-09 06:04:49

赞

踩

用ucharts制作大屏

ECharts 数据可视化大屏项目学习

可视化大屏项目b站学习视频https://www.bilibili.com/video/BV1yu411E7cm?p=2&vd_source=75e802e2bcd560c954f9ac55668a5935

一、步骤

1、创建一个文件夹存放该项目的代码文件，打开VScode，点击打开文件夹，打开刚刚创建的文件夹。

2、打开终端（快捷键ctrl+`）

3、创建项目

npm create vite@latest

4、安装依赖

npm i

5、运行程序，打开网页，查看效果

npm run dev

6、查看tailwindcss教程，导入tailwindcss

https://tailwindcss.com/

ctrl+c关掉终端的运行项目，输入命令，导入tailwindcss

  1. npm install -D tailwindcss postcss autoprefixer
  2. npx tailwindcss init -p

7、修改tailwind.config.js

  1. content: [
  2.     "./index.html",
  3.     "./src/**/*.{vue,js,ts,jsx,tsx}",
  4.   ],

8、修改style.css

  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;

9、修改App.vue

  1. <template>
  2.   <div class="text-red-600 text-3xl">hello tailwind</div>
  3. </template>
  4. <script setup></script>
  5.  
  6. <style lang="scss" scoped></style>

成功导入tailwindcss

10、导入项目所需的资料

11、修改App.vue

  1. <template>
  2.   <div>
  3.     <!-- 自定义背景,背景bg,[]中放置图片路径 -->
  4.     <div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden">
  5.       <!-- 左 -->
  6.       <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
  7.         
  8.       </div>
  9.       <!-- 中 -->
  10.       <div class="w-1/2 mr-5 flex flex-col">
  11.         
  12.       </div>
  13.       <!-- 右 -->
  14.       <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
  15.         
  16.       </div>
  17.     </div>
  18.     
  19.   </div>
  20. </template>
  21. <script setup>
  22.  
  23. </script>
  24. <style lang="scss" scoped>
  25. </style>

  1. <template>
  2.   <div>
  3.     <!-- 自定义背景,背景bg,[]中放置图片路径 -->
  4.     <div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden">
  5.       <!-- 左 -->
  6.       <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
  7.         <!-- 横向柱状图 -->
  8.         <HorizontalBar/>
  9.         <!-- 雷达图 -->
  10.         <RadarBar/>
  11.         <!-- 关系图 -->
  12.         <Relation class="h-1/3"/>
  13.       </div>
  14.       <!-- 中 -->
  15.       <div class="w-1/2 mr-5 flex flex-col">
  16.         <!-- 数据总览图 -->
  17.         <ToatlData/>
  18.         <!-- 地图可视化 -->
  19.         <MapChart/>
  20.       </div>
  21.       <!-- 右 -->
  22.       <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
  23.         <!-- 竖向柱状图 -->
  24.         <VerticalBar/>
  25.         <!-- 环形图 -->
  26.         <RingBar/>
  27.         <!-- 文档云图 -->
  28.         <WordCloud/>
  29.       </div>
  30.     </div>
  31.     
  32.   </div>
  33. </template>
  34. <script setup>
  35. import HorizontalBar from './components/HorizontalBar.vue';
  36. import RadarBar from './components/RadarBar.vue';
  37. import Relation from './components/Relation.vue';
  38. import ToatlData from './components/TotalData.vue';
  39. import MapChart from './components/MapChart.vue';
  40. import VerticalBar from './components/VerticalBar.vue';
  41. import RingBar from './components/RingBar.vue';
  42. import WordCloud from './components/WordCloud.vue';
  43. </script>
  44. <style lang="scss" scoped>
  45. </style>

  1. <template>
  2.   <div>
  3.     <!-- 自定义背景,背景bg,[]中放置图片路径 -->
  4.     <div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden">
  5.       <!-- 左 -->
  6.       <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
  7.         <!-- 横向柱状图 -->
  8.         <HorizontalBar class="h-1/3 box-border pb-4"/>
  9.         <!-- 雷达图 -->
  10.         <RadarBar class="h-1/3 box-border pb-4"/>
  11.         <!-- 关系图 -->
  12.         <Relation class="h-1/3"/>
  13.       </div>
  14.       <!-- 中 -->
  15.       <div class="w-1/2 mr-5 flex flex-col">
  16.         <!-- 数据总览图 -->
  17.         <ToatlData class="bg-opacity-50 bg-slate-800 p-3"/>
  18.         <!-- 地图可视化 -->
  19.         <MapChart class="bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1"/>
  20.       </div>
  21.       <!-- 右 -->
  22.       <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
  23.         <!-- 竖向柱状图 -->
  24.         <VerticalBar class="h-1/3 box-border pb-4"/>
  25.         <!-- 环形图 -->
  26.         <RingBar class="h-1/3 box-border pb-4"/>
  27.         <!-- 文档云图 -->
  28.         <WordCloud class="h-1/3"/>
  29.       </div>
  30.     </div>
  31.     
  32.   </div>
  33. </template>
  34. <script setup>
  35. import HorizontalBar from './components/HorizontalBar.vue';
  36. import RadarBar from './components/RadarBar.vue';
  37. import Relation from './components/Relation.vue';
  38. import ToatlData from './components/TotalData.vue';
  39. import MapChart from './components/MapChart.vue';
  40. import VerticalBar from './components/VerticalBar.vue';
  41. import RingBar from './components/RingBar.vue';
  42. import WordCloud from './components/WordCloud.vue';
  43. </script>
  44. <style lang="scss" scoped>
  45. </style>

12、定时获取数据

安装axios

npm i --save axios@1.4.0 echarts@5.4.2

创建文件夹

创建request.js

  1. import axios from 'axios'
  2.  
  3. const service = axios.create({
  4. 	baseURL: 'https://api.imooc-web.lgdsunday.club/api',
  5. 	timeout: 5000
  6. })
  7.  
  8. // 请求拦截器
  9. service.interceptors.request.use(
  10. 	(config) => {
  11. 		config.headers.icode = 'input you icode'
  12. 		return config // 必须返回配置
  13. 	},
  14. 	(error) => {
  15. 		return Promise.reject(error)
  16. 	}
  17. )
  18.  
  19. // 响应拦截器
  20. service.interceptors.response.use((response) => {
  21. 	const { success, message, data } = response.data
  22. 	//   要根据success的成功与否决定下面的操作
  23. 	if (success) {
  24. 		return data
  25. 	} else {
  26. 		return Promise.reject(new Error(message))
  27. 	}
  28. })
  29.  
  30. export default service

13、创建visualization.js定义请求接口，数据请求模块

import request from '@/utils/request.js'

import './api/visualization.js'

14、修改vite.config.js

  1. resolve: {
  2.     alias: {
  3.       '@': '/src'
  4.     }
  5.   },
  6.   server: {
  7.     hmr: true
  8.   }

修改visualization.js

  1. export const getVisualization = () => {
  2. 	return request({
  3. 		url: '/visualization'
  4. 	})
  5. }

修改App.vue

import { getVisualization } from './api/visualization.js'

  1. import { ref } from 'vue'
  2. // 获取数据
  3. const data = ref(null)
  4. // 定义方法
  5. const loadData = async () => {
  6.   // 触发方法
  7. 	data.value = await getVisualization()
  8.   // 打印
  9. 	console.log(data.value)
  10. }
  11. // 调用
  12. loadData()

15、数据动态变化，获取数据

  1. setInterval(() => {
  2. 	loadData()
  3. }, 3000)

此时，以获取到数据

16、echarts的使用

https://echarts.apache.org/handbook/zh/get-started/

echarts使用的基本结构

17、绘制图

词云图需安装wordcloud

npm i --save echarts-wordcloud@2.1.0

数据展示图需安装countup.js

npm i --save countup.js@2.6.2

二、代码

App.vue

  1. <template>
  2.   <div>
  3.     <!-- 自定义背景,背景bg,[]中放置图片路径 -->
  4.     <div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden" v-if="data">
  5.       <!-- 左 -->
  6.       <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
  7.         <!-- 横向柱状图 -->
  8.         <HorizontalBar class="h-1/3 box-border pb-4" :data="data.regionData"/>
  9.         <!-- 雷达图 -->
  10.         <RadarBar class="h-1/3 box-border pb-4" :data="data.riskData"/>
  11.         <!-- 关系图 -->
  12.         <Relation class="h-1/3" :data="data.relationData"/>
  13.       </div>
  14.       <!-- 中 -->
  15.       <div class="w-1/2 mr-5 flex flex-col">
  16.         <!-- 数据总览图 -->
  17.         <ToatlData class="bg-opacity-50 bg-slate-800 p-3" :data="data.totalData"/>
  18.         <!-- 地图可视化 -->
  19.         <MapChart class="bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1" :data="data.mapData"/>
  20.       </div>
  21.       <!-- 右 -->
  22.       <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
  23.         <!-- 竖向柱状图 -->
  24.         <VerticalBar class="h-1/3 box-border pb-4" :data="data.serverData"/>
  25.         <!-- 环形图 -->
  26.         <RingBar class="h-1/3 box-border pb-4" :data="data.abnormalData"/>
  27.         <!-- 文档云图 -->
  28.         <WordCloud class="h-1/3" :data="data.wordCloudData"/>
  29.       </div>
  30.     </div>
  31.     
  32.   </div>
  33. </template>
  34. <script setup>
  35. import HorizontalBar from './components/HorizontalBar.vue';
  36. import RadarBar from './components/RadarBar.vue';
  37. import Relation from './components/Relation.vue';
  38. import ToatlData from './components/TotalData.vue';
  39. import MapChart from './components/MapChart.vue';
  40. import VerticalBar from './components/VerticalBar.vue';
  41. import RingBar from './components/RingBar.vue';
  42. import WordCloud from './components/WordCloud.vue';
  43. import { getVisualization } from './api/visualization.js'
  44. import { ref } from 'vue'
  45. // 获取数据
  46. const data = ref(null)
  47. // 定义方法
  48. const loadData = async () => {
  49.   // 触发方法
  50. 	data.value = await getVisualization()
  51.   // 打印
  52. 	console.log(data.value)
  53. }
  54. // 调用
  55. loadData()
  56. // 数据动态变化，间隔一定时间统计一次数据
  57. setInterval(() => {
  58. 	loadData()
  59. }, 3000)
  60. </script>
  61. <style lang="scss" scoped>
  62. </style>

HorizontalBar.vue

  1. <template>
  2.   <!-- 承载当前echarts的容器 -->
  3.   <div>
  4.     <div>【大区数据信息】</div>
  5. 		<div ref="target" class="w-full h-full"></div>
  6.   </div>
  7. </template>
  8. <script setup>
  9. import { onMounted, ref, watch } from 'vue'
  10. import * as echarts from 'echarts'
  11. // 接收
  12. const props = defineProps({
  13. 	data: {
  14. 		type: Object,//数据类型
  15. 		required: true
  16. 	}
  17. })
  18. // 打印
  19. console.log(props.data)
  20. // 1.初始化echarts实例
  21. // 获取 dom 实例
  22. const target = ref(null)
  23.  
  24. // echarts 实例变量
  25. let mChart = null
  26. // 在 mounted 生命周期之后，实例化 echarts
  27. onMounted(() => {
  28. 	mChart = echarts.init(target.value)
  29. 	// 渲染 echarts
  30. 	renderChart()
  31. })
  32. // 渲染图表
  33. const renderChart = () => {
  34. 	const options = {
  35.     // 添加属性
  36. 		// X 轴展示数据
  37. 		xAxis: {
  38. 			// 数据展示
  39. 			type: 'value',
  40. 			// 不显示轴
  41. 			show: false,
  42. 			// 最大值（防止触顶）
  43. 			max: function (value) {
  44. 				// 取整
  45. 				return parseInt(value.max * 1.2)
  46. 			}
  47. 		},
  48. 		// Y 轴展示选项
  49. 		yAxis: {
  50. 			type: 'category',
  51. 			// 根据根据服务端数据筛选
  52. 			data: props.data.regions.map((item) => item.name),
  53. 			// 反向展示
  54. 			inverse: true,
  55. 			// 不展示轴线
  56. 			axisLine: {
  57. 				show: false
  58. 			},
  59. 			// 不展示刻度
  60. 			axisTick: {
  61. 				show: false // 取消 Y 轴刻度
  62. 			},
  63. 			// 文字色值
  64. 			axisLabel: {
  65. 				color: '#9EB1C8'
  66. 			}
  67. 		},
  68. 		// echarts 网格绘制的位置，对应 上、右、下、左
  69. 		grid: {
  70. 			top: 0,
  71. 			right: 0,
  72. 			bottom: 0,
  73. 			left: 0,
  74. 			// 计算边距时，包含标签
  75. 			containLabel: true
  76. 		},
  77. 		// 柱形图核心配置
  78. 		series: [
  79. 			{
  80. 				// 图表类型
  81. 				type: 'bar',
  82. 				// 数据筛选
  83. 				data: props.data.regions.map((item) => ({
  84. 					name: item.name,
  85. 					value: item.value
  86. 				})),
  87. 				// 显示背景
  88. 				showBackground: true,
  89. 				// 背景色
  90. 				backgroundStyle: {
  91. 					color: 'rgba(180, 180, 180, 0.2)'
  92. 				},
  93. 				// 每个轴的样式
  94. 				itemStyle: {
  95. 					color: '#479AD3', // 设置柱子的颜色
  96. 					barBorderRadius: 5, // 设置柱子的圆角
  97. 					shadowColor: 'rgba(0, 0, 0, 0.3)', // 设置柱子的阴影颜色
  98. 					shadowBlur: 5 // 设置柱子的阴影模糊大小
  99. 				},
  100. 				// 轴宽度
  101. 				barWidth: 12,
  102. 				// 轴上的字体
  103. 				label: {
  104. 					show: true,
  105. 					// 设置标签位置为右侧
  106. 					position: 'right',
  107. 					textStyle: {
  108. 						// 设置标签文本颜色
  109. 						color: '#fff'
  110. 					}
  111. 				}
  112. 			}
  113. 		]
  114. 	}
  115.  
  116. 	mChart.setOption(options)
  117. }
  118.  
  119. // 监听数据的变化，重新渲染图表
  120. watch(
  121. 	() => props.data,
  122. 	() => {
  123. 		renderChart()
  124. 	}
  125. )
  126. </script>
  127. <style lang="scss" scoped>
  128. </style>

MapChart.vue

  1. <template>
  2. 	<div>
  3. 		<div ref="target" class="w-full h-full"></div>
  4. 	</div>
  5. </template>
  6.  
  7. <script setup>
  8. import { onMounted, ref } from 'vue'
  9. import * as echarts from 'echarts'
  10. import mapJson from '@/assets/MapData/china.json'
  11.  
  12. const props = defineProps({
  13. 	data: {
  14. 		type: Object,
  15. 		required: true
  16. 	}
  17. })
  18.  
  19. const target = ref(null)
  20. let mChart = null
  21. onMounted(() => {
  22. 	mChart = echarts.init(target.value)
  23. 	renderChart()
  24. })
  25.  
  26. const renderChart = () => {
  27. 	// echarts 渲染
  28. 	echarts.registerMap('china', mapJson)
  29.  
  30. 	let options = {
  31. 		// 时间线，提供了在多个 ECharts option 间进行切换
  32. 		timeline: {
  33. 			// 数据
  34. 			data: props.data.voltageLevel,
  35. 			// 类目轴
  36. 			axisType: 'category',
  37. 			// 自动切换
  38. 			autoPlay: true,
  39. 			// 间隔时间
  40. 			playInterval: 3000,
  41. 			// 位置
  42. 			left: '10%',
  43. 			right: '10%',
  44. 			bottom: '0%',
  45. 			width: '80%',
  46. 			// 轴的文本标签
  47. 			label: {
  48. 				// 默认状态
  49. 				normal: {
  50. 					textStyle: {
  51. 						color: '#ddd'
  52. 					}
  53. 				},
  54. 				// 高亮状态
  55. 				emphasis: {
  56. 					textStyle: {
  57. 						color: '#fff'
  58. 					}
  59. 				}
  60. 			},
  61. 			// 文字大小
  62. 			symbolSize: 10,
  63. 			// 线的样式
  64. 			lineStyle: {
  65. 				color: '#555'
  66. 			},
  67. 			// 选中点的样式
  68. 			checkpointStyle: {
  69. 				borderColor: '#888',
  70. 				borderWidth: 2
  71. 			},
  72. 			// 控件样式
  73. 			controlStyle: {
  74. 				// 上一步按钮
  75. 				showNextBtn: true,
  76. 				// 下一步按钮
  77. 				showPrevBtn: true,
  78. 				// 默认样式
  79. 				normal: {
  80. 					color: '#666',
  81. 					borderColor: '#666'
  82. 				},
  83. 				// 高亮样式
  84. 				emphasis: {
  85. 					color: '#aaa',
  86. 					borderColor: '#aaa'
  87. 				}
  88. 			}
  89. 		},
  90. 		// 柱形图右侧展示
  91. 		baseOption: {
  92. 			grid: {
  93. 				right: '2%',
  94. 				top: '15%',
  95. 				bottom: '10%',
  96. 				width: '20%'
  97. 			},
  98.  
  99. 			// 中国地图
  100. 			geo: {
  101. 				// 展示
  102. 				show: true,
  103. 				// 中国地图
  104. 				map: 'china',
  105. 				// 开启缩放
  106. 				roam: true,
  107. 				// 初始缩放
  108. 				zoom: 0.8,
  109. 				// 中心点
  110. 				center: [113.83531246, 34.0267395887],
  111. 				// 默认状态的省份样式
  112. 				itemStyle: {
  113. 					normal: {
  114. 						// 边框色值
  115. 						borderColor: 'rgba(147, 235, 248, 1)',
  116. 						// 边框宽度
  117. 						borderWidth: 1,
  118. 						// 区域颜色
  119. 						areaColor: {
  120. 							// 经向色值
  121. 							type: 'radial',
  122. 							x: 0.5,
  123. 							y: 0.5,
  124. 							r: 0.5,
  125. 							colorStops: [
  126. 								// 0% 处的颜色
  127. 								{
  128. 									offset: 0,
  129. 									color: 'rgba(147, 235, 248, 0)'
  130. 								},
  131. 								// 100% 处的颜色
  132. 								{
  133. 									offset: 1,
  134. 									color: 'rgba(147, 235, 248, .2)'
  135. 								}
  136. 							],
  137. 							// 缺省为 false
  138. 							globalCoord: false
  139. 						}
  140. 					},
  141. 					// 鼠标移入的色值
  142. 					emphasis: {
  143. 						areaColor: '#389BB7',
  144. 						borderWidth: 0
  145. 					}
  146. 				}
  147. 			}
  148. 		},
  149. 		// 绑定时间轴的多个图表
  150. 		options: []
  151. 	}
  152.  
  153. 	// 为每一年度的图表添加数据
  154. 	props.data.voltageLevel.forEach((item, index) => {
  155. 		options.options.push({
  156. 			// 背景色
  157. 			backgroundColor: '#142037',
  158. 			title: [
  159. 				// 主标题，对应地图
  160. 				{
  161. 					text: '2019-2023 年度数据统计',
  162. 					left: '0%',
  163. 					top: '0',
  164. 					textStyle: {
  165. 						color: '#ccc',
  166. 						fontSize: 30
  167. 					}
  168. 				},
  169. 				// 副标题，对应柱形图
  170. 				{
  171. 					id: 'statistic',
  172. 					text: item + '年数据统计情况',
  173. 					right: '0%',
  174. 					top: '4%',
  175. 					textStyle: {
  176. 						color: '#ccc',
  177. 						fontSize: 20
  178. 					}
  179. 				}
  180. 			],
  181. 			// X 轴配置
  182. 			xAxis: {
  183. 				// 数据轴
  184. 				type: 'value',
  185. 				// 脱离 0 值比例
  186. 				scale: true,
  187. 				// 位置
  188. 				position: 'top',
  189. 				// 不显示分割线
  190. 				splitLine: {
  191. 					show: false
  192. 				},
  193. 				// 不显示轴线
  194. 				axisLine: {
  195. 					show: false
  196. 				},
  197. 				// 不显示刻度尺
  198. 				axisTick: {
  199. 					show: false
  200. 				},
  201. 				// 类别文字
  202. 				axisLabel: {
  203. 					margin: 2,
  204. 					textStyle: {
  205. 						color: '#aaa'
  206. 					}
  207. 				}
  208. 			},
  209. 			// Y 轴
  210. 			yAxis: {
  211. 				// 选项轴
  212. 				type: 'category',
  213. 				// 轴线
  214. 				axisLine: {
  215. 					show: true,
  216. 					lineStyle: {
  217. 						color: '#ddd'
  218. 					}
  219. 				},
  220. 				// 轴刻度
  221. 				axisTick: {
  222. 					show: false,
  223. 					lineStyle: {
  224. 						color: '#ddd'
  225. 					}
  226. 				},
  227. 				// 轴标签
  228. 				axisLabel: {
  229. 					interval: 0,
  230. 					textStyle: {
  231. 						color: '#ddd'
  232. 					}
  233. 				},
  234. 				// 根据年份，获取对应数据
  235. 				data: props.data.categoryData[item].map((item) => item.name)
  236. 			},
  237. 			// 核心配置
  238. 			series: [
  239. 				// 柱形图
  240. 				{
  241. 					zlevel: 1.5,
  242. 					// 柱形图
  243. 					type: 'bar',
  244. 					// 每个柱子的色值
  245. 					itemStyle: {
  246. 						normal: {
  247. 							color: props.data.colors[index]
  248. 						}
  249. 					},
  250. 					// 根据年份，获取对应数据
  251. 					data: props.data.categoryData[item].map((item) => item.value)
  252. 				},
  253. 				// 散点图
  254. 				{
  255. 					// 散点（气泡）图
  256. 					type: 'effectScatter',
  257. 					// 使用地理坐标系
  258. 					coordinateSystem: 'geo',
  259. 					// 数据
  260. 					data: props.data.topData[item],
  261. 					// 标记大小
  262. 					symbolSize: function (val) {
  263. 						return val[2] / 4
  264. 					},
  265. 					// 绘制完成后显示特效
  266. 					showEffectOn: 'render',
  267. 					// 展示涟漪特效
  268. 					rippleEffect: {
  269. 						brushType: 'stroke'
  270. 					},
  271. 					// 文字
  272. 					label: {
  273. 						normal: {
  274. 							formatter: '{b}',
  275. 							position: 'right',
  276. 							show: true
  277. 						}
  278. 					},
  279. 					// 每一项的配置
  280. 					itemStyle: {
  281. 						normal: {
  282. 							color: props.data.colors[index],
  283. 							// 阴影配置
  284. 							shadowBlur: 5,
  285. 							shadowColor: props.data.colors[index]
  286. 						}
  287. 					},
  288. 					zlevel: 1
  289. 				}
  290. 			]
  291. 		})
  292. 	})
  293.  
  294. 	mChart.setOption(options)
  295. }
  296. </script>
  297.  
  298. <style lang="scss" scoped></style>

RadarBar.vue

  1. <template>
  2. 	<div>
  3. 		<div>【云端报警风险】</div>
  4. 		<div ref="target" class="w-full h-full"></div>
  5. 	</div>
  6. </template>
  7.  
  8. <script setup>
  9. import { onMounted, ref, watch } from 'vue'
  10. import * as echarts from 'echarts'
  11.  
  12. const props = defineProps({
  13. 	data: {
  14. 		type: Object,
  15. 		required: true
  16. 	}
  17. })
  18.  
  19. const target = ref(null)
  20. let mChart = null
  21. onMounted(() => {
  22. 	mChart = echarts.init(target.value)
  23. 	renderChart()
  24. })
  25.  
  26. const renderChart = () => {
  27. 	const options = {
  28. 		// 雷达图坐标系配置
  29. 		radar: {
  30. 			// 坐标系名
  31. 			name: {
  32. 				textStyle: {
  33. 					color: '#05D5FF',
  34. 					fontSize: 14
  35. 				}
  36. 			},
  37. 			// 雷达绘制类型。polygon 多边形
  38. 			shape: 'polygon',
  39. 			// 居中
  40. 			center: ['50%', '50%'],
  41. 			// 边境
  42. 			radius: '80%',
  43. 			// 开始的角度（可以避免绘制到边框之外）
  44. 			startAngle: 120,
  45. 			// 轴线配置
  46. 			axisLine: {
  47. 				lineStyle: {
  48. 					color: 'rgba(5, 213, 255, .8)'
  49. 				}
  50. 			},
  51. 			// 网格线配置
  52. 			splitLine: {
  53. 				show: true,
  54. 				lineStyle: {
  55. 					width: 1,
  56. 					color: 'rgba(5, 213, 255, .8)' // 设置网格的颜色
  57. 				}
  58. 			},
  59. 			// 指示器文字
  60. 			indicator: props.data.risks.map((item) => ({
  61. 				name: item.name,
  62. 				max: 100
  63. 			})),
  64. 			// 不展示拆分区域
  65. 			splitArea: {
  66. 				show: false
  67. 			}
  68. 		},
  69. 		// 坐标居中
  70. 		polar: {
  71. 			center: ['50%', '50%'], // 默认全局居中
  72. 			radius: '0%'
  73. 		},
  74. 		// 坐标角度
  75. 		angleAxis: {
  76. 			// 坐标轴刻度最小值
  77. 			min: 0,
  78. 			// 坐标轴分割间隔
  79. 			interval: 5,
  80. 			// 刻度增长逆时针
  81. 			clockwise: false,
  82. 			// 不显示坐标轴刻度
  83. 			axisTick: {
  84. 				show: false
  85. 			},
  86. 			// 不显示坐标轴文字
  87. 			axisLabel: {
  88. 				show: false
  89. 			},
  90. 			// 不显示坐标轴线
  91. 			axisLine: {
  92. 				show: false
  93. 			},
  94. 			// 不显示分割线
  95. 			splitLine: {
  96. 				show: false
  97. 			}
  98. 		},
  99. 		// 径向轴
  100. 		radiusAxis: {
  101. 			// 最小值
  102. 			min: 0,
  103. 			// 间隔
  104. 			interval: 20,
  105. 			// 不显示分割线
  106. 			splitLine: {
  107. 				show: true
  108. 			}
  109. 		},
  110. 		// 图表核心配置
  111. 		series: [
  112. 			{
  113. 				// 雷达图
  114. 				type: 'radar',
  115. 				// 拐点的样式，还可以取值'rect','angle'等
  116. 				symbol: 'circle',
  117. 				// 拐点的大小
  118. 				symbolSize: 10,
  119. 				// 折线拐点标志的样式
  120. 				itemStyle: {
  121. 					normal: {
  122. 						color: '#05D5FF'
  123. 					}
  124. 				},
  125. 				// 区域填充样式
  126. 				areaStyle: {
  127. 					normal: {
  128. 						color: '#05D5FF',
  129. 						opacity: 0.5
  130. 					}
  131. 				},
  132. 				// 线条样式
  133. 				lineStyle: {
  134. 					width: 2,
  135. 					color: '#05D5FF'
  136. 				},
  137. 				// 图形上的文本标签
  138. 				label: {
  139. 					normal: {
  140. 						show: true,
  141. 						formatter: (params) => {
  142. 							return params.value
  143. 						},
  144. 						color: '#fff'
  145. 					}
  146. 				},
  147. 				// 数据
  148. 				data: [
  149. 					{
  150. 						value: props.data.risks.map((item) => item.value)
  151. 					}
  152. 				]
  153. 			}
  154. 		]
  155. 	}
  156.  
  157. 	mChart.setOption(options)
  158. }
  159.  
  160. // 监听数据的变化，重新渲染图表
  161. watch(
  162. 	() => props.data,
  163. 	() => {
  164. 		renderChart()
  165. 	}
  166. )
  167. </script>

Relation.vue

  1. <template>
  2. 	<div>
  3. 		<div>【数据传递信息】</div>
  4. 		<div ref="target" class="w-full h-full"></div>
  5. 	</div>
  6. </template>
  7.  
  8. <script setup>
  9. import { onMounted, ref, watch } from 'vue'
  10. import * as echarts from 'echarts'
  11.  
  12. const props = defineProps({
  13. 	data: {
  14. 		type: Object,
  15. 		required: true
  16. 	}
  17. })
  18.  
  19. // 获取 dom 实例
  20. const target = ref(null)
  21.  
  22. // echarts 实例变量
  23. let mChart = null
  24. // 在 mounted 生命周期之后，实例化 echarts
  25. onMounted(() => {
  26. 	mChart = echarts.init(target.value)
  27. 	// 渲染 echarts
  28. 	renderChart()
  29. })
  30.  
  31. // 渲染图表
  32. const renderChart = () => {
  33. 	const options = {
  34. 		// X 轴不需要展示
  35. 		xAxis: {
  36. 			show: false,
  37. 			type: 'value'
  38. 		},
  39. 		// X 轴不需要展示
  40. 		yAxis: {
  41. 			show: false,
  42. 			type: 'value'
  43. 		},
  44. 		// 核心数据配置
  45. 		series: [
  46. 			{
  47. 				// 用于展现节点以及节点之间的关系数据
  48. 				type: 'graph',
  49. 				// 不采用任何布局
  50. 				layout: 'none',
  51. 				// 使用二维的直角坐标系
  52. 				coordinateSystem: 'cartesian2d',
  53. 				// 节点标记的大小
  54. 				symbolSize: 26,
  55. 				// z-index
  56. 				z: 3,
  57. 				// 边界标签（线条文字）
  58. 				edgeLabel: {
  59. 					normal: {
  60. 						show: true,
  61. 						color: '#fff',
  62. 						textStyle: {
  63. 							fontSize: 14
  64. 						},
  65. 						formatter: function (params) {
  66. 							let txt = ''
  67. 							if (params.data.speed !== undefined) {
  68. 								txt = params.data.speed
  69. 							}
  70. 							return txt
  71. 						}
  72. 					}
  73. 				},
  74. 				// 圆饼下文字
  75. 				label: {
  76. 					normal: {
  77. 						show: true,
  78. 						position: 'bottom',
  79. 						color: '#5e5e5e'
  80. 					}
  81. 				},
  82. 				// 边两端的标记类型
  83. 				edgeSymbol: ['none', 'arrow'],
  84. 				// 边两端的标记大小
  85. 				edgeSymbolSize: 8,
  86. 				// 圆数据
  87. 				data: props.data.relations.map((item) => {
  88. 					// id 为 0 ，表示数据中心，数据中心单独设置
  89. 					if (item.id !== 0) {
  90. 						return {
  91. 							name: item.name,
  92. 							category: 0,
  93. 							active: true,
  94. 							speed: `${item.speed}kb/s`,
  95. 							// 位置
  96. 							value: item.value
  97. 						}
  98. 					} else {
  99. 						return {
  100. 							name: item.name,
  101. 							// 位置
  102. 							value: item.value,
  103. 							// 数据中心圆的大小
  104. 							symbolSize: 100,
  105. 							// 圆的样式
  106. 							itemStyle: {
  107. 								normal: {
  108. 									// 渐变色
  109. 									color: {
  110. 										colorStops: [
  111. 											{ offset: 0, color: '#157eff' },
  112. 											{ offset: 1, color: '#35c2ff' }
  113. 										]
  114. 									}
  115. 								}
  116. 							},
  117. 							// 字体
  118. 							label: { normal: { fontSize: '14' } }
  119. 						}
  120. 					}
  121. 				}),
  122. 				// 线
  123. 				links: props.data.relations.map((item, index) => ({
  124. 					// 方向
  125. 					source: item.source,
  126. 					target: item.target,
  127. 					// 线上的文字
  128. 					speed: `${item.speed}kb/s`,
  129. 					// 线的样式
  130. 					lineStyle: { normal: { color: '#12b5d0', curveness: 0.2 } },
  131. 					// 文字位置
  132. 					label: {
  133. 						show: true,
  134. 						position: 'middle',
  135. 						offset: [10, 0]
  136. 					}
  137. 				}))
  138. 			},
  139. 			{
  140. 				// 用于带有起点和终点信息的线数据的绘制
  141. 				type: 'lines',
  142. 				// 使用二维的直角坐标系
  143. 				coordinateSystem: 'cartesian2d',
  144. 				// z-index
  145. 				z: 1,
  146. 				// 线特效的配置
  147. 				effect: {
  148. 					show: true,
  149. 					smooth: false,
  150. 					trailLength: 0,
  151. 					symbol: 'arrow',
  152. 					color: 'rgba(55,155,255,0.5)',
  153. 					symbolSize: 12
  154. 				},
  155. 				// 线的样式
  156. 				lineStyle: {
  157. 					normal: {
  158. 						curveness: 0.2
  159. 					}
  160. 				},
  161. 				// 线的数据级，前后线需要重合。数据固定
  162. 				data: [
  163. 					[{ coord: [0, 300] }, { coord: [50, 200] }],
  164. 					[{ coord: [0, 100] }, { coord: [50, 200] }],
  165. 					[{ coord: [50, 200] }, { coord: [100, 100] }],
  166. 					[{ coord: [50, 200] }, { coord: [100, 300] }]
  167. 				]
  168. 			}
  169. 		]
  170. 	}
  171.  
  172. 	mChart.setOption(options)
  173. }
  174.  
  175. // 监听数据的变化，重新渲染图表
  176. watch(
  177. 	() => props.data,
  178. 	() => {
  179. 		renderChart()
  180. 	}
  181. )
  182. </script>
  183.  
  184. <style lang="scss" scoped></style>

RingBar.vue

  1. <template>
  2. 	<div>
  3. 		<div>【大区异常处理】</div>
  4. 		<div ref="target" class="w-full h-full"></div>
  5. 	</div>
  6. </template>
  7.  
  8. <script setup>
  9. import { onMounted, ref, watch } from 'vue'
  10. import * as echarts from 'echarts'
  11.  
  12. const props = defineProps({
  13. 	data: {
  14. 		type: Object,
  15. 		required: true
  16. 	}
  17. })
  18.  
  19. const target = ref(null)
  20. let mChart = null
  21. onMounted(() => {
  22. 	mChart = echarts.init(target.value)
  23. 	renderChart()
  24. })
  25.  
  26. /**
  27.  * 双环形图绘制原理：
  28.  * 1. 环形图通过饼图绘制。内外边距的距离减小，即为环形。环形中心点需要不断改变，否则会重叠
  29.  * 2. 环形图绘制分为 上层和底层 两部分。上层作为绘制进度，底层作为背景图
  30.  * 3. 依据 getSeriesData 生成对应的 上层和底层 series 数据，进行渲染
  31.  */
  32. const getSeriesData = () => {
  33. 	const series = []
  34.  
  35. 	props.data.abnormals.forEach((item, index) => {
  36. 		// 上层环形绘制
  37. 		series.push({
  38. 			name: item.name,
  39. 			// 使用饼图绘制，减少饼图宽度即为环形图
  40. 			type: 'pie',
  41. 			// 逆时针排布
  42. 			clockWise: false,
  43. 			// 不展示鼠标移入动画
  44. 			hoverAnimation: false,
  45. 			// 半径位置，需要依次递减，否则会重复在一处进行展示
  46. 			radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
  47. 			// 中心点
  48. 			center: ['55%', '55%'],
  49. 			// 不展示 label
  50. 			label: { show: false },
  51. 			// 数据配置
  52. 			data: [
  53. 				// 设置数据与名称
  54. 				{ value: item.value, name: item.name },
  55. 				// 最大数据，展示比例
  56. 				{
  57. 					value: 1000,
  58. 					name: '',
  59. 					itemStyle: { color: 'rgba(0,0,0,0)', borderWidth: 0 },
  60. 					tooltip: { show: false },
  61. 					hoverAnimation: false
  62. 				}
  63. 			]
  64. 		})
  65.  
  66. 		// 底层图
  67. 		series.push({
  68. 			name: item.name,
  69. 			type: 'pie',
  70. 			// 图形不响应事件
  71. 			silent: true,
  72. 			// z-index: 置于底层
  73. 			z: 1,
  74. 			// 逆时针排布
  75. 			clockWise: false,
  76. 			// 不展示鼠标移入动画
  77. 			hoverAnimation: false,
  78. 			// 半径位置，需要依次递减，否则会重复在一处进行展示
  79. 			radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
  80. 			// 中心点
  81. 			center: ['55%', '55%'],
  82. 			// 不展示 label
  83. 			label: { show: false },
  84. 			// 数据
  85. 			data: [
  86. 				// 绘制底线 75%
  87. 				{
  88. 					value: 7.5,
  89. 					itemStyle: { color: 'rgb(3, 31, 62)', borderWidth: 0 },
  90. 					tooltip: { show: false },
  91. 					hoverAnimation: false
  92. 				},
  93. 				// 绘制底线 25% 透明区域
  94. 				{
  95. 					value: 2.5,
  96. 					name: '',
  97. 					itemStyle: { color: 'rgba(0,0,0,0)', borderWidth: 0 },
  98. 					tooltip: { show: false },
  99. 					hoverAnimation: false
  100. 				}
  101. 			]
  102. 		})
  103. 	})
  104.  
  105. 	return series
  106. }
  107.  
  108. const renderChart = () => {
  109. 	const options = {
  110. 		// 图例配置
  111. 		legend: {
  112. 			show: true,
  113. 			// 图例色块
  114. 			icon: 'circle',
  115. 			// 位置
  116. 			top: '14%',
  117. 			left: '60%',
  118. 			// 展示数据
  119. 			data: props.data.abnormals.map((item) => item.name),
  120. 			// 总宽度（一列）
  121. 			width: -5,
  122. 			// 每个色块的宽
  123. 			itemWidth: 10,
  124. 			// 每个色块的高度
  125. 			itemHeight: 10,
  126. 			// item 间距
  127. 			itemGap: 6,
  128. 			// 展示内容
  129. 			formatter: function (name) {
  130. 				return '{title|' + name + '}'
  131. 			},
  132. 			// 字体配置
  133. 			textStyle: {
  134. 				rich: {
  135. 					title: {
  136. 						fontSize: 12,
  137. 						lineHeight: 5,
  138. 						color: 'rgba(255,255,255,0.8)'
  139. 					}
  140. 				}
  141. 			}
  142. 		},
  143. 		// 提示层
  144. 		tooltip: {
  145. 			show: true,
  146. 			trigger: 'item',
  147. 			formatter: '{a}<br>{b}:{c}({d}%)'
  148. 		},
  149. 		// Y 轴展示选项
  150. 		yAxis: [
  151. 			{
  152. 				type: 'category',
  153. 				// 反向展示
  154. 				inverse: true,
  155. 				// 不展示轴线
  156. 				axisLine: {
  157. 					show: false
  158. 				},
  159. 				// 不展示刻度
  160. 				axisTick: {
  161. 					show: false
  162. 				}
  163. 			}
  164. 		],
  165. 		// X 轴不展示
  166. 		xAxis: [
  167. 			{
  168. 				show: false
  169. 			}
  170. 		],
  171. 		// 每两个标记一条线
  172. 		series: getSeriesData()
  173. 	}
  174.  
  175. 	mChart.setOption(options)
  176. }
  177.  
  178. // 监听数据的变化，重新渲染图表
  179. watch(
  180. 	() => props.data,
  181. 	() => {
  182. 		renderChart()
  183. 	}
  184. )
  185. </script>
  186.  
  187. <style lang="scss" scoped></style>

TotalData.vue

  1. <template>
  2. 	<div class="p-6">
  3. 		<div class="text-slate-300 text-center">
  4. 			数据总量：
  5. 			<span
  6. 				ref="totalCountTarget"
  7. 				class="text-7xl ml-2 mr-2 font-bold font-[Electronic] text-gradient"
  8. 			>
  9. 				679,473,929
  10. 			</span>
  11. 			条记录
  12. 		</div>
  13. 		<div class="mt-3 flex flex-wrap">
  14. 			<div class="w-1/3 text-center text-slate-400 text-sm">
  15. 				华北：
  16. 				<span ref="city1" class="text-[#5DC5EF] text-3xl font-[Electronic]">
  17. 					8,778,988
  18. 				</span>
  19. 			</div>
  20. 			<div class="w-1/3 text-center text-slate-400 text-sm">
  21. 				东北：<span
  22. 					ref="city2"
  23. 					class="text-[#5DC5EF] text-3xl font-[Electronic]"
  24. 					>8,778,988</span
  25. 				>
  26. 			</div>
  27. 			<div class="w-1/3 text-center text-slate-400 text-sm">
  28. 				华东：<span
  29. 					ref="city3"
  30. 					class="text-[#5DC5EF] text-3xl font-[Electronic]"
  31. 					>8,778,988</span
  32. 				>
  33. 			</div>
  34. 			<div class="w-1/3 text-center text-slate-400 text-sm">
  35. 				中南：<span
  36. 					ref="city4"
  37. 					class="text-[#5DC5EF] text-3xl font-[Electronic]"
  38. 					>8,778,988</span
  39. 				>
  40. 			</div>
  41. 			<div class="w-1/3 text-center text-slate-400 text-sm">
  42. 				西南：<span
  43. 					ref="city5"
  44. 					class="text-[#5DC5EF] text-3xl font-[Electronic]"
  45. 					>8,778,988</span
  46. 				>
  47. 			</div>
  48. 			<div class="w-1/3 text-center text-slate-400 text-sm">
  49. 				西北：<span
  50. 					ref="city6"
  51. 					class="text-[#5DC5EF] text-3xl font-[Electronic]"
  52. 					>8,778,988</span
  53. 				>
  54. 			</div>
  55. 		</div>
  56. 	</div>
  57. </template>
  58.  
  59. <script setup>
  60. import { onMounted, ref } from 'vue'
  61. import { CountUp } from 'countup.js'
  62.  
  63. const props = defineProps({
  64. 	data: {
  65. 		type: Object,
  66. 		required: true
  67. 	}
  68. })
  69.  
  70. const totalCountTarget = ref(null)
  71. const city1 = ref(null)
  72. const city2 = ref(null)
  73. const city3 = ref(null)
  74. const city4 = ref(null)
  75. const city5 = ref(null)
  76. const city6 = ref(null)
  77.  
  78. onMounted(() => {
  79. 	new CountUp(totalCountTarget.value, props.data.total).start()
  80. 	new CountUp(city1.value, props.data.hb).start()
  81. 	new CountUp(city2.value, props.data.db).start()
  82. 	new CountUp(city3.value, props.data.hd).start()
  83. 	new CountUp(city4.value, props.data.zn).start()
  84. 	new CountUp(city5.value, props.data.xn).start()
  85. 	new CountUp(city6.value, props.data.xb).start()
  86. })
  87. </script>
  88.  
  89. <style lang="scss" scoped></style>

VerticalBar.vue

  1. <template>
  2. 	<div>
  3. 		<div>【服务资源占用比】</div>
  4. 		<div ref="target" class="w-full h-full"></div>
  5. 	</div>
  6. </template>
  7.  
  8. <script setup>
  9. import { onMounted, ref, watch } from 'vue'
  10. import * as echarts from 'echarts'
  11.  
  12. const props = defineProps({
  13. 	data: {
  14. 		type: Object,
  15. 		required: true
  16. 	}
  17. })
  18.  
  19. const target = ref(null)
  20. let mChart = null
  21. onMounted(() => {
  22. 	mChart = echarts.init(target.value)
  23. 	renderChart()
  24. })
  25.  
  26. const renderChart = () => {
  27. 	const options = {
  28. 		// X 轴展示选项
  29. 		xAxis: {
  30. 			type: 'category',
  31. 			// 根据根据服务端数据筛选
  32. 			data: props.data.servers.map((item) => item.name),
  33. 			// 文字色值
  34. 			axisLabel: {
  35. 				color: '#9EB1C8'
  36. 			}
  37. 		},
  38. 		// Y 轴展示数据
  39. 		yAxis: {
  40. 			// 数据展示
  41. 			type: 'value',
  42. 			// 不显示轴
  43. 			show: false,
  44. 			// 最大值（防止触顶）
  45. 			max: function (value) {
  46. 				// 取整
  47. 				return parseInt(value.max * 1.2)
  48. 			}
  49. 		},
  50. 		// echarts 网格绘制的位置，对应 上、右、下、左
  51. 		grid: {
  52. 			top: 16,
  53. 			right: 0,
  54. 			bottom: 26,
  55. 			left: -26,
  56. 			// 计算边距时，包含标签
  57. 			containLabel: true
  58. 		},
  59. 		// 柱形图核心配置
  60. 		series: {
  61. 			// 柱形图
  62. 			type: 'bar',
  63. 			// 数据筛选
  64. 			data: props.data.servers.map((item) => ({
  65. 				name: item.name,
  66. 				value: item.value
  67. 			})),
  68. 			// 每个轴的样式
  69. 			itemStyle: {
  70. 				color: '#479AD3', // 设置柱子的颜色
  71. 				barBorderRadius: 5, // 设置柱子的圆角
  72. 				shadowColor: 'rgba(0, 0, 0, 0.3)', // 设置柱子的阴影颜色
  73. 				shadowBlur: 5 // 设置柱子的阴影模糊大小
  74. 			},
  75. 			// 柱子宽度
  76. 			barWidth: 12,
  77. 			// 文本
  78. 			label: {
  79. 				show: true,
  80. 				// 设置标签位置为右侧
  81. 				position: 'top',
  82. 				textStyle: {
  83. 					// 设置标签文本颜色
  84. 					color: '#fff'
  85. 				},
  86. 				formatter: '{c}%'
  87. 			}
  88. 		}
  89. 	}
  90.  
  91. 	mChart.setOption(options)
  92. }
  93.  
  94. // 监听数据的变化，重新渲染图表
  95. watch(
  96. 	() => props.data,
  97. 	() => {
  98. 		renderChart()
  99. 	}
  100. )
  101. </script>
  102.  
  103. <style lang="scss" scoped></style>

WordCloud.vue

  1. <template>
  2. 	<div>
  3. 		<div>【关键词条】</div>
  4. 		<div ref="target" class="w-full h-full"></div>
  5. 	</div>
  6. </template>
  7.  
  8. <script setup>
  9. import { onMounted, ref, watch } from 'vue'
  10. import * as echarts from 'echarts'
  11. import 'echarts-wordcloud'
  12.  
  13. const props = defineProps({
  14. 	data: {
  15. 		type: Object,
  16. 		required: true
  17. 	}
  18. })
  19.  
  20. // 获取 dom 实例
  21. const target = ref(null)
  22.  
  23. // echarts 实例变量
  24. let mChart = null
  25. // 在 mounted 生命周期之后，实例化 echarts
  26. onMounted(() => {
  27. 	mChart = echarts.init(target.value)
  28. 	// 渲染 echarts
  29. 	renderChart()
  30. })
  31.  
  32. /**
  33.  * 生成随机色值
  34.  */
  35. const randomRGB = () => {
  36. 	const r = Math.floor(Math.random() * 255)
  37. 	const g = Math.floor(Math.random() * 255)
  38. 	const b = Math.floor(Math.random() * 255)
  39. 	return `rgb(${r}, ${g}, ${b})`
  40. }
  41.  
  42. // 渲染图表
  43. const renderChart = () => {
  44. 	const options = {
  45. 		series: [
  46. 			{
  47. 				// 类型
  48. 				type: 'wordCloud',
  49. 				// 数据映射文本的大小范围
  50. 				sizeRange: [8, 46],
  51. 				// 文字旋转范围
  52. 				rotationRange: [0, 0],
  53. 				// 单词之间的间距
  54. 				gridSize: 0,
  55. 				// 渲染动画
  56. 				layoutAnimation: true,
  57. 				// 字体
  58. 				textStyle: {
  59. 					// 随机色值
  60. 					color: randomRGB
  61. 				},
  62. 				// 高亮字体
  63. 				emphasis: {
  64. 					textStyle: {
  65. 						fontWeight: 'bold',
  66. 						color: '#000'
  67. 					}
  68. 				},
  69. 				// 数据
  70. 				data: props.data.datas
  71. 			}
  72. 		]
  73. 	}
  74.  
  75. 	mChart.setOption(options)
  76. }
  77.  
  78. // 监听数据的变化，重新渲染图表
  79. watch(
  80. 	() => props.data,
  81. 	() => {
  82. 		renderChart()
  83. 	}
  84. )
  85. </script>
  86.  
  87. <style lang="scss" scoped></style>

api/visualization.js

  1. import request from '@/utils/request.js'
  2. // 默认不支持@，需配置vite.config.js
  3. export const getVisualization = () => {
  4. 	return request({
  5. 		url: '/visualization'
  6. 	})
  7. }

utils/request.js

  1. import axios from 'axios'
  2.  
  3. const service = axios.create({
  4. 	baseURL: 'https://api.imooc-web.lgdsunday.club/api',
  5. 	timeout: 5000
  6. })
  7.  
  8. // 请求拦截器
  9. service.interceptors.request.use(
  10. 	(config) => {
  11. 		config.headers.icode = 'input you icode'
  12. 		return config // 必须返回配置
  13. 	},
  14. 	(error) => {
  15. 		return Promise.reject(error)
  16. 	}
  17. )
  18.  
  19. // 响应拦截器
  20. service.interceptors.response.use((response) => {
  21. 	const { success, message, data } = response.data
  22. 	//   要根据success的成功与否决定下面的操作
  23. 	if (success) {
  24. 		return data
  25. 	} else {
  26. 		return Promise.reject(new Error(message))
  27. 	}
  28. })
  29.  
  30. export default service

style.css

  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
  4. @font-face {
  5.     font-family: 'Electronic';
  6.     src: url('./assets/fonts/FX-LED.ttf') format('truetype');
  7.   }
  8.   
  9.   .text-gradient {
  10.     /* 背景渐变 */
  11.     background-image: linear-gradient(to bottom, #e5e4ea, #5EA8F2);
  12.     /* 元素背景延伸到文本 */
  13.     -webkit-background-clip: text;
  14.     /* 文本字符填充颜色透明 */
  15.     -webkit-text-fill-color: transparent;
  16.   }

tailwind.config.js

  1. /** @type {import('tailwindcss').Config} */
  2. export default {
  3.   content: [
  4.     "./index.html",
  5.     "./src/**/*.{vue,js,ts,jsx,tsx}",
  6.   ],
  7.   theme: {
  8.     extend: {},
  9.   },
  10.   plugins: [],
  11. }
  12.

vite.config.js

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3.  
  4. // https://vitejs.dev/config/
  5. export default defineConfig({
  6.   plugins: [vue()],
  7.   // visualizaation.js中用到了@，因此这里需要配置
  8.   // 添加别名
  9.   resolve: {
  10.     alias: {
  11.       '@': '/src'
  12.     }
  13.   },
  14.   server: {
  15.     hmr: true
  16.   }
  17. })

三、效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/801657
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号