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

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

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

饼图

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

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

			// 基于准备好的dom，初始化ECharts图表
			var myChart1 = echarts.init(document.getElementById("main1"));
			var option1 = { // 指定第1个图表option1的配置项和数据
				color: ['#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8','#4586d8', '#4f68d8',],
				backgroundColor: '#d6ecf0', // 配置背景色，rgba设置透明度0.1
				title: {
					text: '咖啡店各年订单量占比情况',
					color:'#f3f9f1',
					x: 'center',
					y: 12,
				},
				tooltip: {
					trigger: "item",
					formatter: "{a}<br/>{b}:{c}({d}%)"
				},
				legend: {
					orient: 'vertical',
					x: 15,
					y: 15,
					data: data.product
				},
				series: [{ // 配置第1个图表的数据系列
					name: '总订单量:',
					type: 'pie',
					radius: '70%',
					center: ['50%', 190],
					data: data.data
				}]
			};
			myChart1.setOption(option1); // 使用指定的配置项和数据显示饼图

折线图

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