一、显示相关
1.主题
1）内置主题
-
echarts中默认内置了两套主题：light 和dark
-
怎么使用：在初始化对象方法init中可以指明
var chart=echarts.init(dom,‘light’)
var chart=echarts.init(dom,‘dark’)
// init方法有两个参数，第一个参数代表dom节点，第二个参数代表需要使用哪一套主题 // 默认内置了两套主题，light和dark var mCharts=echarts.init(document.querySelector('div'),'light')
2）自定义主题
-
在主题编辑器中编辑主题 （echarts官网中的主题下载）
-
然后下载主题，是一个js文件
-
使用script标签引入主题js文件
-
在init方法中使用主题
init中第二个参数的名字并不是主题文件的名字，而是主题文件中定义的registerTheme中定义的主题名
var mCharts=echarts.init(document.querySelector('div'),'itcast') //引入主题js文件之后，init中的第二个参数就多了一个选项 //这里第二个参数的名字取决于主题js文件中的代码
2.调色盘
1）调色盘
它是一组颜色，图形、系列会自动从其中选择颜色，调色盘的作用遵循就近原则，局部>全局>主题，我自己的理解是，这里的就近原则是谁离series配置越近就显示哪种颜色配置。
-
主题调色盘
使用自定义主题的时候，在下载的自定义主题js文件中会设置这个调色盘，会在registerTheme的第二个参数中设置color数组
-
全局调色盘
全局调色盘中设置color会覆盖主题调色盘中的颜色设置
option:[ color:['red','green','blue',] ] -
局部调色盘
局部调色盘会覆盖全局调色盘中的颜色设置
series:[ { type:'bar', color:['red','green','blue',] } ]
2）颜色渐变(在series中设置itemStyle)
-
线性渐变（按照一个方向进行颜色变化）
itemStyle:{ color:{ type:'linear', //渐变的类型是线性的 x:0, y:0, x2:0, y2:1, //以上四个表示渐变的方向,这些数值指的都是相对的数值 colorStops:[{ offset:0,color:'red' //0%处的颜色 },{ offset:1,color:'blue' //100%处的颜色 }], globalCoord:false //缺省为false } }
-
径向渐变（根据一个点向四周进行颜色变化）
itemStyle:{
color:{
type:'radial',
x:0.5,
y:0.5,
r:0.5, //xy指的是径向渐变的圆心坐标，r指的是半径，这些数值指的都是相对数值
colorStops:[{
offset:0,color:'red' //0%处的颜色
},{
offset:1,color:'blue' //100%处的颜色
}],
global:false //缺省为false
}
}
3.样式
以下两种样式，优先级高，会覆盖主题中、调色盘中的效果
1）直接样式（图表在正常情况下的显示）
是这些style配置，itemStyle(控制某一区域的样式)、textStyle(控制文本样式)、lineStyle、areaStyle(这两个针对于折线图和雷达图)、label
2）高亮样式（鼠标滑过某个区域这块区域会高亮显示）
在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle，label
//在series中设置
data:[
{
name:'淘宝',
value:21000,
emphasis:{
itemStyle:{//k控制淘宝这一区域的样式
color:'pink'
},
label:{
color:'green'
},
}
},
]
4.自适应
当浏览器大小发生变化的时候，想让图表也能随之发生适配变化
1)监听窗口大小变化事件
2)在事件处理函数中调用ECharts实例对象的resize即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UIjwEfhl-1659870548653)(…/…/Library/Application Support/typora-user-images/image-20220802150116719.png)]
//这个代码写在setOption之后即可
window.onresize=function(){
mCharts.resize()
}
//或者直接这样简写 window.οnresize=mCharts.resize
二、动画的使用
1.加载动画（在获取数据的过程中ECharts呈现出来的比较友好的效果）
ECharts中已经内置好了加载数据的动画，我们在使用的时候只需要在合适的时机选择显示或者隐藏
-
显示加载动画
mCharts.showLoading() -
隐藏加载动画
mCharts.hideLoading()
例如一个散点图中，需要使用jQuery来获取JSON数据，那么我们在获取JSON数据之前可以开启加载动画，当服务器数据获取成功之后就隐藏加载动画
var mCharts=echarts.init(document.querySelector('div'))
//z在获取数据之前，显示加载动画
mCharts.showLoading()
// 去data文件夹中获取JSON数据
$.get('data/test_data.json',function(ret){
// 当服务器数据获取成功之后要隐藏加载动画
mCharts.hideLoading()
}
2.增量动画
增量动画就是，当图表已经展示出来之后，这个时候图表中的数据发生变化，这时图表中因数据产生变动而产生的动画就称为增量动画。
-
增量动画的实现方式
mCharts.setOption
所有数据的更新都必须要通过setOption实现，不用考虑数据到底产生了哪些变化，ECharts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
setOption可以设置多次， 新的option和旧的option， 它们之间的关系并不是相互覆盖的关系，而是相互整合的关系， 我们在设置option的时候，只需要考虑到变化的部分就可以。
<button id="modify">修改数据</button> <button id="add">增加数据</button> <script> var mCharts=echarts.init(document.querySelector('div')) var xDataArr=['丁程鑫','马嘉祺','张真源','宋亚轩','贺峻霖','严浩翔','刘耀文','林彦俊'] var yDataArr=[88,92,63,77,94,80,72,86] var option={ xAxis:{ type:'category', data:xDataArr }, yAxis:{ type:'value', }, series:[ { type:'bar', data:yDataArr, markPoint:{ data:[ {type:'max',name:'最大值'}, {type:'min',name:'最小值'} ] }, markLine:{ data:[ {type:'average',name:'平均值'}, ] } } ] } mCharts.setOption(option) //修改数据 var btnModify=document.querySelector('#modify') btnModify.onclick=function(){ var newYDataArr=[68,32,99,77,94,80,72,86] // setOption可以设置多次 // 新的option和旧的option 它们之间的关系并不是相互覆盖的关系，而是相互整合的关系 // 我们在设置option的时候，只需要考虑到变化的部分就可以 var option={ series:[ { data:newYDataArr, } ] } // 这个增量动画中的setOption括号中的option不一定要包含全部的配置，只需要配置变化的内容即可 mCharts.setOption(option) } //增加数据 var btnAdd=document.querySelector('#add') btnAdd.onclick=function(){ xDataArr.push('王琳凯') yDataArr.push(90) var option={ xAxis:{ data:xDataArr }, series:[ { data:yDataArr } ] } mCharts.setOption(option) } </script>
3.动画的配置
1）动画配置项
-
开启动画 animation: true
设置在option中，默认是true,控制动画是否开启
-
动画时长 animationDuration
接收普通的数值
animationDuration:3000, // 毫秒 动画时长接收回调函数
//设置在option中 animationDuration:function(arg){ //可以控制对不同元素使用不同的动画时长，这里的arg参数代表的有三类元素 // console.log(arg); return 2000*arg },
-
缓动动画 animationEasing
设置在option中,还有别的效果，见官网
animationEasing:'bounceOut', //linear均匀的 bounceOut回弹的 -
动画阈值 animationThreshold
指的是单种形式的元素数量大于这个阈值时会关闭动画
animationThreshold:7, // 动画阈值，这里设置为7，动画会被关闭，因为这个柱子这第三类元素有8个，超过了阈值
三、交互API
1.全局echarts对象和echartsInstance对象
1）全局echarts对象
全局echarts对象是引入echarts.js文件之后就可以直接使用的,这个全局echarts对象是在引入的js文件中定义好的
<script>
//这里的echarts就是全局echarts对象，而mCharts就是echartsInstance对象(echarts的实例对象)
var mCharts=echarts.init(document.querySelector('div'))
</script>
2）echartsInstance对象
echartsInstance对象是通过echarts.init方法调用之后得到的，也就是echarts的实例对象
2.全局echarts对象中常见的交互API（常见的方法）
1）init
通过这个方法能够初始化echarts实例对象
还可以使用主题(配置在第二个参数中)
2）registerTheme
注册主题，在自定义主题中使用过，只有注册过的主题才能够在init方法中使用该主题
3）registerMap
注册地图数据
$.get('json/map/china.json',function(data){
echarts.registerMap('china',data);
});
geo组件使用地图数据
var option={
geo: {
type: 'map',
map: 'china', // 这个china必须要和registerMap中的第一个参数保持一致
}
}
4）connect
-
一个页面中可以有多个独立的图表
-
每一个图表对应一个ECharts实例对象
-
connect可以实现多图关联，传入联动目标为ECharts实例对象，支持数组。
var mCharts = echarts.init(document.querySelector('#div1')) ... var mCharts2 = echarts.init(document.querySelector('#div2')) ... echarts.connect([mCharts,mCharts2])
将多个图表关联之后的变化：
-
保存图片的时候会自动将这几个图表拼接在一起
-
刷新按钮、重置按钮、提示框联动、图例选择、数据范围修改等等会出现联动的效果
3.echartsInstance对象中常见的交互API（常见的方法）
1）setOption方法
- 设置或修改图表实例的配置项以及数据
- 可以多次调用setOption方法，会产生新旧option，它们之间的关系是合并整合的关系而不是覆盖的关系
2）resize方法
-
能够用于图表自适应，重新计算和绘制图表
-
一般和window对象的resize事件结合使用，先要监听window窗口大小变化
// 监听Window的窗口大小变化的事件
window.onresize=function(){
// console.log('window.onresize...');
//调用echarts实例对象的resize方法
mCharts.resize()
}
// 或者 window.οnresize=mCharts.resize
3）on/off方法
一般用于绑定或者解绑事件处理函数（两大类型事件：鼠标事件和Echarts事件）
-
鼠标事件
常见的鼠标事件：‘click’、‘dblclick’(双击事件)、‘mousedown’、‘mousemove’、'mouseup’等
mCharts.on('click',function(arg){
//这里的arg是点击区域的具体信息
console.log(arg);
})
//解绑事件
mCharts.off('click')
事件参数arg：和事件相关的数据信息
-
ECharts事件
在官网中的event中有具体的相关事件
常见的事件：legendselectchanged、‘datazoom’、‘pieselectchanged’、'mapselectchanged’等
mCharts.on('legendselectchanged',function(arg){
console.log(arg);
})
//在打印出来的arg中被筛选掉的图例，显示为false，其余为true
事件参数arg：和事件相关的数据信息
4）dispatchAction方法
触发某些行为，这里的行为指的是使用js代码来模拟用户的行为，让图表做出适当的反应
在官方文档的action中，有可以被触发的行为
$('#btn1').click(function(){
//模拟用户的行为
mCharts.dispatchAction({
type:'highlight', //事件类型
seriesIndex:0, //图表索引
dataIndex:1 //图表中哪一项高亮
})
mCharts.dispatchAction({
type:'showTip',
seriesIndex:0,
dataIndex:1
})
})
5）clear方法
-
清空当前实例，会移除实例中所有的组件和图表
$('#btn2').click(function(){ mCharts.clear() }) -
清空之后可以再次setOption
$('#btn3').click(function(){ //重新设置option mCharts.setOption(option) })
6）dispose方法
- 销毁实例
- 和clear方法最大的区别是：dispose方法销毁实例之后不能够再次setOption将图表重新显示，也就是销毁后实例无法再被使用
8451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
