• 实现 ECharts 图表自适应

    目录

    使用思路：

    Echarts在vue中使用

    引入 ECharts

    绘制图表实例（复杂）

    实例效果：

    官方入门实例（简单）

    官方入门实例效果 

    更新echarts图表数据

    图表自适应

    x轴设为时间轴

    不同时间数据重叠显示 

    tooltip圆点颜色修改

    ECharts 的功能十分强大,可以生成多种形式的图表,配置项十分灵活,可以根据实际需求自由定制
    官方文档: https://www.echartsjs.com/examples/

    使用思路：

    官方示例查看相近图例 + 后续问题 + 浏览器搜索 + 官方配置项手册对应字段查找 = 结果

    当我们绘制图表时总是会需要自己配置一些样式效果，而官方API又难以查找，新手可以将想要查找的效果样式在浏览器中搜索，根据搜索结果的提示去设置或再去官方配置项手册搜索查找对应项配置。

    Echarts在vue中使用

    首先在项目中安装Echarts

    npm install echarts --save

    引入 ECharts

    全局引入

    • main.js
    1. // 引入echarts
    2. import echarts from 'echarts'
    3.  
    4. Vue.prototype.$echarts = echarts

    所需组件单个引入

    import * as echarts from "echarts";

    绘制图表实例（复杂）

    1. <template>
    2. 	<div class="conentTop">
    3. 		<div id="pieChart" :style="{ width: '49%', height: '100%' }">div> 
    4. 		<div id="barChart" :style="{ width: '49%', height: '100%' }">div>
    5. 	div>
    6. template>
    7. <script>
    8. import * as echarts from "echarts";
    9. export default {
    10. 	name: 'topEcharts',
    11. 	data() {
    12. 		return {
    13.  
    14. 		}
    15. 	},
    16. 	mounted() { // 挂载后获取Dom渲染图表
    17. 		this.drawLine();
    18. 		this.drawLineTow();
    19. 	},
    20. 	methods: {
    21. 		// 饼图
    22. 		drawLine() {
    23. 			// 基于准备好的dom，初始化echarts实例
    24. 			let pieChart = echarts.init(document.getElementById('pieChart'))
    25. 			// 绘制饼状图表
    26. 			pieChart.setOption({
    27. 				title: {
    28. 					text: '问题类型',
    29. 					left: 'left'
    30. 				},
    31. 				series: [
    32. 					{
    33. 						type: 'pie',
    34. 						showEmptyCircle: false,//是否显示占位圆
    35. 						data: [
    36. 							{
    37. 								value: 8,
    38. 								name: '延误较大',
    39. 							},
    40. 							{
    41. 								value: 14,
    42. 								name: '失衡'
    43. 							},
    44. 							{
    45. 								value: 16,
    46. 								name: '校时异常'
    47. 							},
    48. 							{
    49. 								value: 20,
    50. 								name: '空放'
    51. 							},
    52. 							{
    53. 								value: 24,
    54. 								name: '拥堵',
    55. 							},
    56. 						],
    57. 						radius: ['18%', '70%'],
    58. 						roseType: 'area',
    59. 						label: { //饼图上显示数值
    60. 							show: true,//数据为空时仍开启显示
    61. 							// position: 'top',//在上方显示
    62. 							textStyle: {//数值公共样式
    63. 								lineHeight: 24,
    64. 							},
    65. 							//数据名b 数据值c 百分比d {name}{time}表示为数值设置的类名 \n、\t为字符串转义符
    66. 							formatter: "{name|{b}}\n {time|{c}\t({d}%)}",
    67. 							rich: {//单独设置类样式
    68. 								name: {
    69. 									fontSize: 14,
    70. 									fontWeight: 'bold',
    71. 									color: '#000000',
    72.  
    73. 								},
    74. 								time: {
    75. 									fontSize: 12,
    76. 									color: '#2F4683',
    77. 									fontWeight: 'bold',
    78. 								}
    79. 							},
    80. 						}
    81. 					},
    82. 					// 背景圆设置
    83. 					{
    84. 						type: 'pie',
    85. 						radius: [20, 126],
    86. 						emptyCircleStyle: {
    87. 							color: '#EDE8FE'
    88. 						}
    89. 					}
    90. 				]
    91. 			});
    92. 			window.addEventListener("resize", () => {
    93. 				pieChart.resize();
    94. 			});
    95. 		},
    96. 		// 柱形图
    97. 		drawLineTow() {
    98. 			// 基于准备好的dom，初始化echarts实例
    99. 			let barChart = echarts.init(document.getElementById('barChart'));
    100. 			// 绘制图表
    101. 			barChart.setOption({
    102. 				title: {
    103. 					text: '问题趋势',
    104. 					left: 'left',
    105. 					top: 'top',
    106. 				},
    107. 				tooltip: {},//悬浮提示
    108. 				color: [
    109. 					{
    110. 						type: 'linear',
    111. 						x: 0,
    112. 						y: 0,
    113. 						x2: 0,
    114. 						y2: 1,
    115. 						colorStops: [
    116. 							{ offset: 0, color: '#FCDB00FF' }, // 设置颜色渐变
    117. 							{ offset: 1, color: '#F7B500FF' }
    118. 						]
    119. 					},
    120. 				],
    121. 				xAxis: {
    122. 					// type:'time',
    123. 					// name:'x轴标题',
    124. 					axisTick: {
    125. 						show: false, //隐藏x轴刻度轴线
    126. 					},
    127. 					axisLine: {
    128. 						lineStyle: {
    129. 							color: "#638DFF7A"//x轴轴线颜色
    130. 						}
    131. 					},
    132. 					data: ["2022-12-01", "2022-12-02", "2022-12-03", "2022-12-04", "2022-12-05", "2022-12-06", "2022-12-07"],
    133. 				},
    134. 				yAxis: {
    135. 					type: 'value',
    136. 					axisLine: {//y轴样式
    137. 						show: true,//显示y轴线条
    138. 						lineStyle: {
    139. 							color: "#638DFF7A"//y轴轴线颜色
    140. 						}
    141. 					},
    142. 					splitLine: { //y轴分割线样式
    143. 						// show: true, // 默认值
    144. 						lineStyle: {
    145. 							type: "dashed", //虚线
    146. 							color: "#638DFF7A"
    147. 						}
    148. 					},
    149. 				},
    150. 				series: [
    151. 					{
    152. 						type: 'bar',
    153. 						barWidth: 30,
    154. 						data: [41, 58, 68, 100, 31, 39, 29],
    155. 					}
    156. 				],
    157. 			});
    158. 			// 图表自适应
    159. 			window.addEventListener("resize", () => {
    160. 				barChart.resize();
    161. 			});
    162. 		},
    163. 	}
    164. }
    165. script>
    166. <style scoped>
    167. .conentTop {
    168. 	width: 100%;
    169. 	height: 409px;
    170. 	box-sizing: border-box;
    171. 	display: flex;
    172. 	justify-content: space-around;
    173. 	align-items: center;
    174. 	padding: 20px 0 16px 0;
    175. }
    176.  
    177. #pieChart,
    178. #barChart {
    179. 	box-sizing: border-box;
    180. 	padding-left: 23px;
    181. 	padding-top: 13px;
    182. 	background-color: #fff;
    183. }
    184. style>

    实例效果：

     若感觉上方实例太复杂可看下官方入门实例

    官方入门实例（简单）

    2. <script>
    3. import * as echarts from "echarts";
    4. export default {
    5. 	name: 'hello',
    6. 	data() {
    7. 		return {
    8. 			msg: 'Welcome to Your Vue.js App'
    9. 		}
    10. 	},
    11. 	mounted() {
    12. 		this.drawLine();
    13. 	},
    14. 	methods: {
    15. 		drawLine() {
    16. 			// 基于准备好的dom，初始化echarts实例
    17. 			let myChart = echarts.init(document.getElementById('myChart'))
    18. 			// 绘制图表
    19. 			myChart.setOption({
    20. 				title: {
    21. 					text: 'ECharts 入门示例'
    22. 				},
    23. 				tooltip: {},
    24. 				xAxis: {
    25. 					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    26. 				},
    27. 				yAxis: {},
    28. 				series: [
    29. 					{
    30. 						name: '销量',
    31. 						type: 'bar',
    32. 						data: [5, 20, 36, 10, 10, 20]
    33. 					}
    34. 				]
    35. 			});
    36. 		}
    37. 	}
    38. }
    39. script>

    官方入门实例效果 

    更新echarts图表数据

    需要修改图表数据时，将series中的data数据直接修改，然后重新初始化数据echarts图表即可。

    • 想要页面效果好就直接初始化图表，但控制台会有警告（重复初始化一个DOM）

    •  不顾及页面效果，避免控制台警告可先销毁图表实例再初始化图表
    1. 官方方法 // 图表实例变量名：pieChart
    2. pieChart.dispose(); // 销毁
    3. pieChart.clear(); // 清空
    4.  
    5. 使用举例
    6. // data中 chartsDom = null,
    7. // 初始化图表前先判断 若存在先销毁
    8. if(this.chartsDom != null &&
    9.         this.chartsDom != '' &&
    10.         this.chartsDom != undefined){
    11.           this.chartsDom.dispose();
    12.         }
    13.       // 然后正常初始化流程
    14.       let chartsDom =  document.getElementById('curveChart');
    15.       this.chartsDom = echarts.init(chartsDom);
    16.       this.chartsDom.setOption(option);

    图表自适应

    实现图表自适应可使用一些百分比、rem、em、vh、vw等相对单位设置图表宽高。

    并且结合官方resize方法即可。

    官方方法

    1. window.addEventListener("resize", () => {
    2. 				pieChart.resize(); // 图表实例变量名：pieChart
    3. 			});

    x轴设为时间轴

    注意：使用echarts时间轴设置首先要注意series.data的数据格式就需要转换下了，不能再是单一值类型。

    转换为如下两种格式均可

    1. const data = [
    2.     ['时间格式' , 值],
    3.     ['2019-11-1 09:00:20' , 55],
    4. ]
    5. const data = [
    6.     ['时间戳格式' , 值],
    7.     ['1682179200000' , 55],
    8. ]

    setOption相关配置如下

    • 极简版本
    1. option = {
    2.   xAxis: {
    3.     type: 'time',
    4.   },
    5.   yAxis: {
    6.     type: 'value'
    7.   },
    8.   series: [
    9.     {
    10.       data: [ ["2021-01-04 08:14:36", 60],["2021-01-04 20:14:46", 56] ],
    11.       // data: [[1651372200,20],[1651373400,40],[1651377000,35]],
    12.       type: 'line',
    13.     }
    14.   ]
    15. };
    • 添加最大值最小值与坐标时间段刻度分割整数版本
    1. option = {
    2.   tooltip:{
    3.     trigger:'axis',
    4.   },
    5.   xAxis: {
    6.     type: 'time',
    7.             interval: 3600 * 1 * 1000 * 6, // 坐标轴分割刻度显示成整数
    8.             min: function (value) { // 最小值限制
    9.               let year = new Date(value.max).getFullYear();
    10.               let month = new Date(value.max).getMonth() + 1;
    11.               let day = new Date(value.max).getDate();
    12.               return new Date(
    13.                 year + "-" + month + "-" + day + " 00:00:00"
    14.               ).getTime();
    15.             },
    16.             max: function (value) { // 最大值限制
    17.               let year = new Date(value.max).getFullYear();
    18.               let month = new Date(value.max).getMonth() + 1;
    19.               let day = new Date(value.max).getDate();
    20.               return new Date(
    21.                 year + "-" + month + "-" + day + " 23:59:00"
    22.               ).getTime();
    23.             },
    24.             axisLabel: { // 坐标轴刻度标签的相关设置
    25.               // formatter: '{HH}:{mm}', // 只显示时间
    26.               formatter:function(e){ // 调用方法返回显示年月日时间段
    27.                 return timestampToTime(e);
    28.               },
    29.               rotate:30, // 倾斜角度
    30.               showMinLabel: true,
    31.               showMaxLabel: true,
    32.             },
    33.   },
    34.   yAxis: {
    35.     type: 'value'
    36.   },
    37.   series: [
    38.     {
    39.       data: [ ["2023-04-04 08:14:36", 60],["2023-04-04 10:16:46", 56],["2023-04-04 15:16:46", 56] ],
    40.       // data: [[1651372200,20],[1651373400,40],[1651377000,35]],
    41.       type: 'line',
    42.     }
    43.   ]
    44. };
    45. function timestampToTime(timestamp) {
    46.         // var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000rotate:30
    47.        var date = new Date(timestamp);
    48.         var Y = date.getFullYear() + '-';
    49.         var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    50.         var D = (date.getDate() < 10 ? '0'+ date.getDate() : date.getDate()) + ' ';
    51.         var h = (date.getHours() < 10 ? '0'+ date.getHours() : date.getHours()) + ':';
    52.         var m = (date.getMinutes() < 10 ? '0'+ date.getMinutes() : date.getMinutes()) + ':';
    53.         var s = (date.getSeconds() < 10 ? '0'+ date.getSeconds() : date.getSeconds());
    54.         return Y+M+D+h+m+s;
    55.     }
    • 效果展示： 

    不同时间数据重叠显示 

    注意：若是做两时间数据对比需要使用在series下的第二个数据里添加此配置 xAxisIndex: 1,

    作用是让两时间数据重叠显示。

    tooltip圆点颜色修改

    修改图例与tooltip圆点颜色，可在series对应数据下添加itemStyle修改样式。或者使用formatter

    模板修改，但较为麻烦。 

  • 相关阅读:
    43特征01——特征值和特征向量基本性质
    k8s 资源管理
    第五次线上面试总结(2022.9.21 二面)
    泰山OFFICE技术讲座：上标研究2：上标的大小
    CF1765M Minimum LCM
    pnpm install报错 Value of “this“ must be of type URLSearchParams
    ROS2进阶：在windows10上用vs2019编译rviz2
    Spring Cloud Consul 入门指引
    DAMA-DMBOK2重点知识整理CDGA/CDGP——第17章 数据管理和组织变革管理
    Easyrecovery靠谱不收费的数据恢复电脑软件
  • 原文地址：https://blog.csdn.net/TKY666/article/details/126610872