ECharts是一个使用JavaScript实现的可视化开源库
网址:https://echarts.apache.org/zh/index.html
ECharts的基本使用:
1.引入echarts.js文件(下载地址https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js)
2.准备一个呈现图表的盒子
3.初始化echarts实例对象
4.准备配置项
5.将配置项设置给echarts实例对象
除了配置项不一样以外,其他的代码都一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 400px;
height: 400px;
border: 1px solid red;
}
</style>
1.引入echarts.js文件(下载地址https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js)
<script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
2.准备一个呈现图表的盒子
<div class="div1">
</div>
<script type="text/javascript">
//3.初始化echarts实例对象
var div1 = document.querySelector('.div1');
var charts = echarts.init(div1);
//4.准备配置对象
var option = {
xAxis:{
type:'category',//类目轴
data:['小明','小红','小王']
},
yAxis:{
type:'value'//数值轴
},
series:[{
name:'语文',
type:'bar',//柱状图line,pie
data:[70,92,87]
}]
}
//将配置项设置给echarts实例对象
charts.setOption(option);
</script>
</body>
</html>
效果如下:
相关配置讲解:
xAxis:直角坐标系中的x轴
yAxis:直角坐标系中的y轴
series:系列列表。每个系列通过type决定自己的图表类型,series显示数据,sries是一个数组,就可以存放多种数据,就可以实现一表多用的功能
ECharts常用图表:
1.柱状图
2.折线图
3.散点图
4.饼图
5.地图
6.雷达图
7.仪表盘图
通用配置指的就是任何图标都能用的配置
标题:title
提示:tooltip
工具按钮:toolbox
图例:legend
通用配置:title{
text:图表名称;
textStyle:{
//文字样式
},
标题边框
borderWith、borderColor、borderRadius
标题位置
left、top、right、bottom
}
通用配置tooltip:提示框组件,用于配置鼠标滑过或点击图表时的显示框
触发类型trigger:item/axis
触发时机triggerOn:mouseover,click
格式化formatter:字符串模板,回调函数
通用配置toolbox
toolbox:{
feature:{
saveAsImage:{},//导出图片
dataView:{},//数据视图
restore:{},//重置
dataZoom:{},//区域缩放
magicType:{
type:[‘bar’,‘line’];
}//类型切换
}
}
折线图:
常见效果:效果都写在series当中
标记:最大值,最小值,平均值,标注区间
markPiont,markLine,markArea
series:{
markPoint:{
data:[
{
type:‘max’
},
{
type:‘min’
},
]
}
}
饼图:
地图:
1.百度地图
2.矢量地图