1.首先导入echarts文件
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
2. bar 柱状图:
样式:
柱状图代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
// 01 创建实列
var echart = echarts.init(document.getElementById("container"));
// 02 设置option参数
var option = {
title:{
text:"vue考试成绩分析图" //标题
},
legend:{data:['成绩']}, //图列
tooltip:{}, // 鼠标提示
xAxis:{data:['3.1','3.2','3.3','3.4','3.5']}, //x轴线
yAxis:{}, //y轴线
series:[ //图数据
//type 类型 // bar 柱状图
// data 数据
// name 名称注释和legend图列保持一致
{type:'bar',data:[90,60,33,88,99],name:"成绩"}
]
}
// 03 更新option
echart.setOption(option);
</script>
</body>
</html>
3.pie 饼形图
样式:
最低0.47元/天 解锁文章
3245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
