文章目录
ECharts的操作步骤
〇、参考文档
一、基本操作步骤
(一)引入ECharts文件
<script src="echarts.js"></script>
(二)初始化ECharts实例
需要再html文件里面准备一个用于显示数据的demo
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
var myChart = echarts.init(document.getElementById('main'));
(三)准备配置项
此处不做配置,仅述步骤
let options = {}
(四)使用指定的配置,显示图表
options :第三步的配置项
myChart:第二部的实例对象
myChart.setOption(options )
二、通用配置项
各种图标(柱状,折现,扇形,饼图等)都通用的配置项
* 通用配置 -- 所有图标都可以用
* 标题:title
* 提示:tooltip
* 工具按钮:toolbox
* 图例:legend
*图例,用于筛选系列,需要和series配合使用
三、柱形图列举
(一) 按部就班,完成上述操作步骤
(二)配置详解
柱状图必要配置
- X轴:xAxis === 格式:对象
- Y周:yAxis === 格式:对象
- 系列:series === 格式:数组
如图:共需五步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 一 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 二、 -->
<div id="bar" style="width: 500px;height: 300px;"></div>
<script>
// 三
let myChart = echarts.init(document.getElementById('bar'));
// 四
let opt = {
xAxis:{
type:'category',//类目类型
// X轴的数据
data:["语文",'数学','英语']
},
yAxis:{
type:'value',//值
},
series:[
{
type:'bar',
name:'成绩表',
data:[100,98,120]
}
]
}
// 五
myChart.setOption(opt)
</script>
</body>
</html>
注意点:数据写在series里面
结果
(三)配置项展示,后续图标同理
标题:title
- 格式:对象
- 参数
-
- text:标题
-
- subtext:子标题
- 注意点
title配置项是跟节点的,与x轴同级
- 代码
// 四
let opt = {
title:{
text:'成绩表',
subtext:'测试的成绩'
},
xAxis:{
type:'category',//类目类型
// X轴的数据
data:["语文",'数学','英语']
},
yAxis:{
type:'value',//值
},
series:[
{
type:'bar',
name:'成绩表',
data:[100,98,120]
}
]
}
- 效果
提示:tooltip
依旧同级
- 提示框组件,主要有三个参数,具体参照文档
*** trigger 提示框的范围
*** triggerOn 提示框出现条件
*** formatter 格式化
// 提示框组件
tooltip: {
// 提示框的范围
trigger: 'axis',//item||axis
// 提示框出现条件
triggerOn: 'mousemove',//mousemove || click
// 格式化
// formatter:'{b}的{a}是{c}',
formatter: a => {
console.log(a);
return a[0].axisValue + '的' + a[0].seriesName + '是' + a[0].value
}
},
工具按钮:toolbox
主要有保存图片,区域缩放,数据视图,图标切换等等
toolbox: {
feature: {
dataZoom: {},
restore: {},
saveAsImage: {},
dataView: {},
magicType: {
type: ['line', 'bar', 'stack']
}
}
},
图例:legend
图例,用于筛选系列,需要和series配合使用
legend:{
//名字要与series每项的name
data:['成绩']
},
可以在多个系列下使用
(四)柱状图的series配置
在系列series中配置
最大值最小值
markPoint
各个条目的数值
label
柱状的宽度
barWidth
平均值
markLine
barWidth
代码
series: [{
name: '语文',
// 图表类型
type: 'bar',
// Y轴数据
data: [109, 45, 333],
markPoint: {
data: [
{ type: 'max', name: '最大值~' },
{ type: 'min', name: '最小值~' },
]
},
// 平均值
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
},
// 柱状图显示每个条目上的数值
label: {
show: true,//显示条目上的数值
rotate: 45,//数值显示的旋转角度
position: '',//标签的位置
},
barWidth: '30%',//柱状的宽度
}