目录
简介
在这篇博客中,我将分享如何使用 Echarts 库来绘制咖啡店各年订单的饼图。通过直观的图表展示异步数据与动画加载,可以更清晰地了解不同年份的销售情况。
使用了echarts.js以及jquery-3.3.1.js需自行下载
这段代码是网页的头部和主体部分,包含了必要的元标签、Echarts 和 jQuery 库的引用,以及一个用于显示图表的 div 元素。
头部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/echarts.js"></script>
<script src="js/jquery-3.3.1.js"></script>
<div id="main" style="width: 600px;height: 400px;"></div>
<title>发财糕的异步数据与动画加载</title>
</head>
<body>
这段代码是使用 Echarts 绘制图表的关键部分。首先,初始化了一个 Echarts 实例。然后,通过 Ajax 请求获取数据,并基于此设置图表选项。其中包括颜色、背景色、标题、提示框、图例以及饼图的具体配置。
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.get("js/咖啡店各年订单.json",function(data){
myChart.setOption({
color: ['#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8','#4586d8', '#4f68d8',],
backgroundColor: '#d6ecf0', // 配置背景色,rgba 设置透明度 0.1
title: {
text: '咖啡店年销',
x:'center'
},
tooltip: {
trigger: 'axis',
axisPointer:{
type:'shadow'