引言

利用框架绘图

环境

用vs code进行编辑html文件

具体过程

实验题目 2.1
（a）：

1.先在head中引入echarts.min.js
<head>
<meta charset="utf-8">
<title>婴儿用品</title>
<script src="https://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
2.定义一个盒子，并告诉网页为js代码
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
3.定义表格
var myChart = echarts.init(document.getElementById('main'));
4.指定图表的配置项和数据
标题
title : {
text: '各年份婴儿用品销量',
},
鼠标经过弹起
tooltip : {
trigger: 'axis'
},
图例
legend: {
data:['年销量']
},
X轴
xAxis : [
{
type : 'category',
data : ['2012年','2013年','2014年','2015年']
}
],
Y轴
yAxis : [
{
type : 'value'
}
],
具体数据
series : [
{
name:'年销量',
type:'bar',
data:[3594,9753,15024,1600],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
5.使用刚指定的配置项和数据显示图表
myChart.setOption(option);

3ERF(KJYB8MB@~U3L$4B9)E.png

（b）：

1.先在head中引入echarts.min.js
<head>
<meta charset="utf-8">
<title>男女比例</title>
<script src="https://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
2.定义一个盒子，并告诉网页为js代码
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
3.定义表格
var myChart = echarts.init(document.getElementById('main'));
4.指定图表的配置项和数据
标题
title : {
text: '婴儿男女比例',
x:'center'
},
左侧设置图例
legend: {
orient : 'vertical',
x : 'left',
data:['male','female','XX']
},
鼠标经过弹起内容
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
具体数据
series : [
{
name:"访问来源",
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:489, name:'male'},
{value:438, name:'female'},
{value:26, name:'XX'}
]
5.使用刚指定的配置项和数据显示图表
myChart.setOption(option);

F$3VAI@E4M1UG2$E4M9QGV1.png