1.介绍和安装 echarts
echarts是最常见的图表工具一个基于JavaScript的开源可视化图表库
Apache ECharts 提供了多种安装方式
下面给大家介绍一种最简单的网页应用方式
在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择
dist/echarts.js
,点击并保存为echarts.js
文件
2.使用 echarts
在HTML中引入js文件就可以轻松使用了
option 选项
标题 title:{}
图例 lenght:()
提示 tooltip:{}
x轴线 xAxis:{}
y轴线 yAxis:{}
数据 series:[]
下面给大家写几个实例
1.柱形图+线形图+饼状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 600px;" ></div>
<script>
var echart = echarts.init(document.getElementById("container"),'purple-passion');
var option = {
title:{
text:"vue考试分析图"
},
legend:{data:["成绩","平均成绩","80分以上人数"]},
toolbar:{},
yAxis:{},
xAxis:{data:["3.1","3.2","3.3","3.4","3.5"]},
series:[
{type:"bar",data:[90,60,33,88,99],name:"成绩"},
{type:"line",data:[88,66,55,77,48],name:"平均成绩",smooth:true},
{type:"line",data:[10,20,15,6,3],name:"80分以上人数",smooth:true,areaStyle:{color:"#f70"}},
{
type:"pie",
data:[{name:"选择题",value:50},{name:"填空题",value:20},{name:"问答题",value:30},{name:"判断题",value:10}],
name:"题型",radius:["10%","30%"],
top:"-50%",
left:"10%"
}
]
}
echart.setOption(option)
</script>
</body>
</html>
效果图如下
堆叠图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 600px;"></div>
<script>
// 01 初始化
var echart = echarts.init(document.getElementById("container"),'dark');
// 02 定义选项
var option = {
title:{ text:"堆叠图"}, //标题
tooltip:{trigger:"axis"},//axis轴线,item元素 //提示
legend:{data:["ui","java","web","python"]}, // 图例
xAxis:{}, //x轴线
yAxis:{data:["2019","2020","2022"]},
label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
series:[ // 系列数据
{name:"ui",type:"bar",data:[120,80,70],stack:true,
// label标签 show显示 position位置,insideRight 内部右侧,formatter格式化
// {a} 系列名称 {b}轴线名称 {c}值
label:{show:true,position:"insideRight",formatter:"{a}:{c}"},
},
{name:"java",type:"bar",data:[27,50,100],stack:true},
{name:"web",type:"bar",data:[180,220,240],stack:true},
{name:"python",type:"bar",data:[200,120,80],stack:true}
]
}
// 03 更新选项
echart.setOption(option);
</script>
</body>
</html>
效果图如下