本文介绍了如何在VSCode中使用echarts.js库，创建一个包含饼图和折线图的联动图表，对咖啡店各年的订单数据进行分析。详细步骤包括引入库、创建HTML文件、设置图表选项和实现图表联动功能。
1. 需求说明
基于“咖啡店年订单json”数据，绘制饼图与折线图的多图表联动，对咖啡店各年的订单数据进行分析。
数据
{
"data":[
{"value":172.9, "name":"2012年"},{"value":232.8, "name":"2013年"},
{"value":254.5, "name":"2014年"},{"value":177.8, "name":"2015年"},
{"value":206.3, "name":"2016年"},{"value":235.4, "name":"2017年"}
],
"product":["2012年", "2013年", "2014年", "2015年", "2016年", "2017年"],
"values1":[56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
"values2":[51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
"values3":[40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
"values4":[25.2, 37.1, 41.2, 18, 33.9, 49.1],
"names1":"Milk Tea",
"names2":"Matcha Latte",
"names3":"Cheese Cocoa",
"names4":"Walnut Brownie"
}
2.实现思路及步骤
(1)在VS Code中创建PieLineChartL inkage.html文件。
(2) 绘制饼图与折线图联动图表。首先，在PieLineChartLinkage.html文件中引入echartsjs库文件。其次，准备一一个具备大小(weight与height)的div容器，并使用initn方法初始化容器。最后设置饼图与折线图的图表样式后，获取数据、填入数据并显示图表
3.代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="I
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
