• 使用 ECharts 绘制咖啡店各年订单的可视化分析

    使用 ECharts 绘制咖啡店各年订单的可视化分析

    在这篇博客中，我将分享一段使用 ECharts 库创建可视化图表的代码。通过这段代码，我们可以直观地分析咖啡店各年订单的情况。

    饼图

    这段代码包含了两个 ECharts 图表，一个是饼图，用于展示各年订单量的占比情况；

    1. $.getJSON("data/咖啡店各年订单.json", "", function (data) {
    2.  
    3. 			// 基于准备好的dom，初始化ECharts图表
    4. 			var myChart1 = echarts.init(document.getElementById("main1"));
    5. 			var option1 = { // 指定第1个图表option1的配置项和数据
    6. 				color: ['#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8','#4586d8', '#4f68d8',],
    7. 				backgroundColor: '#d6ecf0', // 配置背景色，rgba设置透明度0.1
    8. 				title: {
    9. 					text: '咖啡店各年订单量占比情况',
    10. 					color:'#f3f9f1',
    11. 					x: 'center',
    12. 					y: 12,
    13. 				},
    14. 				tooltip: {
    15. 					trigger: "item",
    16. 					formatter: "{a}
      {b}:{c}({d}%)"
    17. 				},
    18. 				legend: {
    19. 					orient: 'vertical',
    20. 					x: 15,
    21. 					y: 15,
    22. 					data: data.product
    23. 				},
    24. 				series: [{ // 配置第1个图表的数据系列
    25. 					name: '总订单量:',
    26. 					type: 'pie',
    27. 					radius: '70%',
    28. 					center: ['50%', 190],
    29. 					data: data.data
    30. 				}]
    31. 			};
    32. 			myChart1.setOption(option1); // 使用指定的配置项和数据显示饼图

    折线图

    另一个是折线图，可以更详细地展示不同年份的订单数据。

    1. // 基于准备好的dom，初始化ECharts图表
    2. 			var myChart2 = echarts.init(document.getElementById("main2"));
    3. 			var option2 = { // 指定第2个图表的配置项和数据
    4. 				color: ['#4f8fa8','#4586d8', '#4f68d8', '#F4E001', '#F0805A', '#26C0C0'],
    5. 				backgroundColor: '#e3f9fd', //配置背景色，rgba设置透明度0.1
    6. 				tooltip: {
    7. 					trigger: 'axis',
    8. 					axisPointer: {
    9. 						type: 'shadow'
    10. 					}
    11. 				}, //配置提示框组件
    12. 				toolbox: { // 配置第2个图表的工具箱组件
    13. 					show: true,
    14. 					orient: 'vertical',
    15. 					left: 550,
    16. 					top: 'center',
    17. 					feature: {
    18. 						mark: {
    19. 							show: true
    20. 						},
    21. 						restore: {
    22. 							show: true
    23. 						},
    24. 						saveAsImage: {
    25. 							show: true
    26. 						},
    27. 						magicType: {
    28. 							show: true,
    29. 							type: ['line', 'bar', 'stack', 'tiled']
    30. 						}
    31. 					}
    32. 				},
    33. 				xAxis: [{
    34. 					type: 'category',
    35. 					data: data.product
    36. 				}], // 配置第2个图表的x轴坐标系
    37. 				yAxis: [{
    38. 					type: 'value',
    39. 					splitArea: {
    40. 						show: true
    41. 					}
    42. 				}], // 配置第2个图表的y轴坐标系
    43. 				series: [ // 配置第2个图表的数据系列
    44. 					{
    45. 						name: data.names1,
    46. 						type: 'line',
    47. 						data: data.values1,
    48. 					},
    49. 					{
    50. 						name: data.names2,
    51. 						type: 'line',
    52. 						data: data.values2,
    53. 					},
    54. 					{
    55. 						name: data.names3,
    56. 						type: 'line',
    57. 						data: data.values3,
    58. 					},
    59. 					{
    60. 						name: data.names4,
    61. 						type: 'line',
    62. 						data: data.values4,
    63. 					}
    64. 				]
    65. 			};
    66. 			myChart2.setOption(option2);

    $.getJSON 方法

    代码中，我们通过 $.getJSON 方法获取了数据，并将其应用于图表的配置中。

    $.getJSON("data/咖啡店各年订单.json", "", function (data) {}

    每个图表都有自己的配置选项，例如颜色、标题、坐标轴等。

    1. //饼图配置项
    2. var option1 = {}
    3. //折线图配置项
    4. var option2 = {}

    特别值得一提的是，这里还实现了多图表联动功能。通过设置相同的 group 值或直接传入 ECharts 对象，我们可以在不同图表之间建立关联，当在一个图表中进行操作时，另一个图表也会相应地做出反应。

    多表联动功能

    方法一：

    1. // 多图表联动配置方法1：分别设置每个echarts对象的group值
    2. 			 myChart1.group = 'group1';
    3. 			 myChart2.group = 'group1';
    4. 			 echarts.connect('group1');

    方法二

    1. 多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
    2.     echarts.connect([myChart1, myChart2]);

     完整代码：

    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. 	<meta charset="utf-8">
    6. 	<script type="text/javascript" src='js/echarts.js'></script>
    7. 	<script type="text/javascript" src='js/jquery-3.3.1.js'></script>
    8. </head>
    9.  
    10. <body>
    11. 	<div id="main1" style="width: 600px; height:400px"></div>
    12. 	<div id="main2" style="width: 600px; height:400px"></div>
    13. 	<script type="text/javascript">
    14. 		$.getJSON("data/咖啡店各年订单.json", "", function (data) {
    15.  
    16. 			// 基于准备好的dom，初始化ECharts图表
    17. 			var myChart1 = echarts.init(document.getElementById("main1"));
    18. 			var option1 = { // 指定第1个图表option1的配置项和数据
    19. 				color: ['#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8','#4586d8', '#4f68d8',],
    20. 				backgroundColor: '#d6ecf0', // 配置背景色，rgba设置透明度0.1
    21. 				title: {
    22. 					text: '咖啡店各年订单量占比情况',
    23. 					color:'#f3f9f1',
    24. 					x: 'center',
    25. 					y: 12,
    26. 				},
    27. 				tooltip: {
    28. 					trigger: "item",
    29. 					formatter: "{a}
      {b}:{c}({d}%)"
    30. 				},
    31. 				legend: {
    32. 					orient: 'vertical',
    33. 					x: 15,
    34. 					y: 15,
    35. 					data: data.product
    36. 				},
    37. 				series: [{ // 配置第1个图表的数据系列
    38. 					name: '总订单量:',
    39. 					type: 'pie',
    40. 					radius: '70%',
    41. 					center: ['50%', 190],
    42. 					data: data.data
    43. 				}]
    44. 			};
    45. 			myChart1.setOption(option1); // 使用指定的配置项和数据显示饼图
    46.  
    47.  
    48.  
    49. 			// 基于准备好的dom，初始化ECharts图表
    50. 			var myChart2 = echarts.init(document.getElementById("main2"));
    51. 			var option2 = { // 指定第2个图表的配置项和数据
    52. 				color: ['#4f8fa8','#4586d8', '#4f68d8', '#F4E001', '#F0805A', '#26C0C0'],
    53. 				backgroundColor: '#e3f9fd', //配置背景色，rgba设置透明度0.1
    54. 				tooltip: {
    55. 					trigger: 'axis',
    56. 					axisPointer: {
    57. 						type: 'shadow'
    58. 					}
    59. 				}, //配置提示框组件
    60. 				toolbox: { // 配置第2个图表的工具箱组件
    61. 					show: true,
    62. 					orient: 'vertical',
    63. 					left: 550,
    64. 					top: 'center',
    65. 					feature: {
    66. 						mark: {
    67. 							show: true
    68. 						},
    69. 						restore: {
    70. 							show: true
    71. 						},
    72. 						saveAsImage: {
    73. 							show: true
    74. 						},
    75. 						magicType: {
    76. 							show: true,
    77. 							type: ['line', 'bar', 'stack', 'tiled']
    78. 						}
    79. 					}
    80. 				},
    81. 				xAxis: [{
    82. 					type: 'category',
    83. 					data: data.product
    84. 				}], // 配置第2个图表的x轴坐标系
    85. 				yAxis: [{
    86. 					type: 'value',
    87. 					splitArea: {
    88. 						show: true
    89. 					}
    90. 				}], // 配置第2个图表的y轴坐标系
    91. 				series: [ // 配置第2个图表的数据系列
    92. 					{
    93. 						name: data.names1,
    94. 						type: 'line',
    95. 						data: data.values1,
    96. 					},
    97. 					{
    98. 						name: data.names2,
    99. 						type: 'line',
    100. 						data: data.values2,
    101. 					},
    102. 					{
    103. 						name: data.names3,
    104. 						type: 'line',
    105. 						data: data.values3,
    106. 					},
    107. 					{
    108. 						name: data.names4,
    109. 						type: 'line',
    110. 						data: data.values4,
    111. 					}
    112. 				]
    113. 			};
    114. 			myChart2.setOption(option2); // 使用指定的配置项和数据显示堆叠柱状图
    115.  
    116.  
    117. 			// 多图表联动配置方法1：分别设置每个echarts对象的group值
    118. 			 myChart1.group = 'group1';
    119. 			 myChart2.group = 'group1';
    120. 			 echarts.connect('group1');
    121.  
    122. 			// 多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
    123. 			//echarts.connect([myChart1, myChart2]);
    124. 		})
    125. 	</script>
    126. </body>
    127.  
    128. </html>

    总的来说，这段代码展示了如何使用 ECharts 库创建美观、实用的可视化图表，为数据分析提供了有力的支持。希望这篇博客能对大家有所帮助，如果有任何问题或建议，欢迎留言交流。

  • 相关阅读:
    输入输出、文件读写、数据类型
    YOLOv5和YOLOv7环境(GPU)搭建测试成功
    Java21的新特性
    军事ar虚拟现实电子沙盘系统的功能
    go get 拉取报错The project you were looking for could not be found的解决方法
    华为OD机试真题 Java 实现【最优资源分配】【2023Q1 200分】
    【第八篇】- Maven 构建 Java 项目
    vue路由之路由的两种模式
    聚焦离子束FIB测试的计量技术规范盘点
    进程地址空间初识
  • 原文地址：https://blog.csdn.net/zhangfafa_c/article/details/137881468