显示相关
主题
内置主题
init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题
默认内置了两套主题 , light dark
var mCharts = echarts.init(document.querySelector("div"), 'dark')
var mCharts = echarts.init(document.querySelector("div"), 'light')
自定义主题
- 在线编辑主题 编辑主题
- 下载主题的js文件
- 在html中导入js文件
<script src="theme/itcast.js"></script>
- 在init方法中指明主题的名称
var mCharts = echarts.init(document.querySelector("div"), 'itcast')
调色盘
它是一组颜色,图像系列会自动从中选择颜色
主题调色盘
在下载的自定义主题js中修改
echarts.registerTheme('itcast', {
"color": [
"#893448",
"#d95850",
"#eb8146",
"#ffb248",
"#f2d643",
"#ebdba4"
]
...
全局调色盘
var option = {
color: ['red', 'green', 'blue', 'skyblue', 'purple']
}
局部调色盘
series: [
{
type: 'pie',
data: pieData,
color: ['pink', 'yellow', 'black', 'orange', 'red']
}
]
调色盘的作用遵循就近原则
颜色渐变
线性渐变
series: [
{
type: 'bar',
data: yDataArr,
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
olorStops:[
{
offset: 0, color: 'red' // 0%处的颜色为红色
},
{
offset: 1, color: 'blue' // 100%处的颜色为蓝
}
]
}
}
}
]
径向渐变
itemStyle: {
color: {
type: 'radial', // 径向渐变
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0, color: 'red' // 0%处的颜色为红色
},
{
offset: 1, color: 'blue' // 100%处的颜色为蓝
}
]
}
}
样式
直接样式
itemStyle textStyle lineStyle areaStyle lable
高亮样式
在emphasisz中包裹itemStyle textStyle lineStyle areaStyle lable
示例
series: [
{
type: 'pie',
data: [{
value: 11231,
name: "淘宝",
itemStyle: { // 控制淘宝这一区域的样式
color: 'yellow'
},
label: {
color: 'green'
},
emphasis: {
itemStyle: { // 控制淘宝这一区域的样式
color: 'pink'
},
label: {
color: 'black'
}
}
},...]
}
]
图表自适应功能实现
当浏览器的大小发生变化时让图表也能随之适配变化
var mCharts = echarts.init(document.querySelector("div"))
mCharts.setOption(option)
// 监听window窗口大小变化的事件
window.onresize = function(){
// console.log('window.onresize...')
// 调用echarts实例对象的resize方法
mCharts.resize()
}
// window.onresize = mCharts.resize
动画
加载动画
ECharts以及内置好了加载数据的动画,我们只需要在合适的时机显示或者隐藏即可
显示加载动画
mCharts.showLoading()
隐藏加载动画
mCharts.hideLoading()
示例
<script>
// var data =
var mCharts = echarts.init(document.querySelector("div"))
mCharts.showLoading() // 在获取数据之前, 显示加载动画
$.get('data/test_data.json', function (ret) {
mCharts.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
var option = {
...
};
mCharts.setOption(option)
})
</script>
增量动画
增量动画的实现
mCharts.setOption(option)
- setOption 可以设置多次
- 新的option 和 旧的option
- 新旧option的关系并不是相互覆盖的关系, 是相互整合的关系
- 我们在设置新的option的时候, 只需要考虑到变化的部分就可以
Ech会找到两组数据之间的差异然后通过合适的动画去表现数据的变化
示例
<div style="width: 600px;height:400px"></div>
<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]
var option = {
series: [
{
data: newYDataArr
}
]
}
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>
动画配置
开启动画
animation: true
动画时长
animationDuration: 7000
缓动动画
animationEasing: 'bounceOut
动画阈值
animationThreshold: 7
单种形式的元素数量大于这个阈值时会关闭动画
示例
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var option = {
animation: true, // 控制动画是否开启
// animationDuration: 7000, // 动画的时长, 它是以毫秒为单位
animationDuration: function(arg){
console.log(arg)
return 2000 * arg
},
animationEasing: 'bounceOut', // 缓动动画
animationThreshold: 7, // 动画元素的阈值
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
...
]
};
mCharts.setOption(option)
</script>
交互api
全局 echarts对象
init
初始化ECharts实例对象
使用主题
registerTheme
注册主题
只有注册过的主题,才能在init方法中使用该主题
registerMap
注册地图数据
$.get('json/map/china.json', function(ret){
echarts.registerMap('chinaMap', ret)
}
geo组件使用地图数据
var option2 = {
geo: {
type: 'map',
map: 'chinaMap'
}
}
connect
一个页面中可以有多个独立的图表
每一个图表对应一个ECharts实例对象
connect可以实现多图关联传入联动目标为ECharts实例对象,支持数组
- 保持图片的自动拼接
- 刷新按钮
- 重置按钮
- 提示框联动,图例选择,数据范围修改
echarts.connect([mCharts, mCharts2])
echartsaknsinstance对象/echart实例对象
setOption方法
resize方法
on/off方法
绑定或解绑事件处理函数
鼠标事件
常见事件 click mouserdown mousermove mouserup 等
事件参数 arg 和事件相关的数据信息
ECharts事件
常见 legendselectchchanged datazoom pleselectchanged mapselecthchanged
mCharts.on('legendselectchanged', function (arg) {
console.log(arg)
console.log('legendselectchanged')//图例筛选发生改变
})
dispatchAcion方法
使用代码模拟用户的行为
$('#btn1').click(function () {
// 模拟用户的行为
mCharts.dispatchAction({
type: 'highlight',//高亮
seriesIndex: 0, // 系列的索引
dataIndex: 1 // 数据的索引
})
mCharts.dispatchAction({
type: 'showTip',//展示提示框
seriesIndex: 0,
dataIndex: 2
})
})
clear 方法
- 清空当前实例会移除实例中的所有组件和图表
- 清空之后可以再次setOption
dispose方法
- 销毁实例
- 销毁实例无法再被使用
$('#btn2').click(function () {
// 清空图表的实例
mCharts.clear()
})
$('#btn3').click(function () {
// 重新设置option
mCharts.setOption(option)
})
$('#btn4').click(function () {
// 销毁mCharts
mCharts.dispose()
})