目录
一 显示相关
（1）主题的使用
1）内置主题
●ECharts中 默认内置了两套主题:ight dark
●在初始化对象方法init中可以指明
var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');
2）自定义主题
●1.在主题编辑器中编辑主题
●2.下载主题, 是一个js文件
●3.引入主题js文件
●4.在init方法中使用主题
<script src="theme/itcast.js"></script>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"), 'itcast')
</script>
</body> (2)调色盘和颜色渐变
调色盘（使用遵循就近原则）：
//1.主题调色盘
var mCharts = echarts.init(document.querySelector("div"), 'itcast')
var pieData = [
{
value: 11231,
name: "淘宝",
},
{
value: 22673,
name: "京东"
},
{
value: 6123,
name: "唯品会"
},
{
value: 8989,
name: "1号店"
},
{
value: 6700,
name: "聚美优品"
}
]
var option = {
//2.全局调色盘
color: ['red', 'green', 'blue', 'skyblue', 'purple'],
series: [
{
type: 'pie',
data: pieData,
// 3 局部调色盘
color: ['pink', 'yellow', 'black', 'orange', 'red']
}
]
};
mCharts.setOption(option)颜色渐变
series: [
{
itemStyle: {
/*
//线性渐变（从上倒下）
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:[
{
offset: 0, color: 'red' // 0%处的颜色为红色
},
{
offset: 1, color: 'blue' // 100%处的颜色为蓝
}
]
}*/
color: {
type: 'radial', // 径向渐变
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0, color: 'red' // 0%处的颜色为红色
},
{
offset: 1, color: 'blue' // 100%处的颜色为蓝
}
]
}
}
}
]线性渐变效果：
径向渐变效果：
(3)样式
1）直接样式
itemStyle、textStyle、lineStyle、areaStyle、label
这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式
data: [
{
value: 11231,
name: "淘宝",
itemStyle: {
color: 'black' // 控制淘宝这一区域的样式
}
}
]
title: {
text: '我是标题',
textStyle: {
color: 'red'
}
}
label: {
color: 'green'// 控制淘宝这一文字的样式
}2）高亮样式
图表中, 其实有很多元素都是有两种状态的, 一种是默认状态, 另外一种就是鼠标滑过或者点击形成
的高亮状态. 而高亮样式是针对于元素的高亮状态设定的样式在emphasis 中包裹原先的itemStyle 等等
series: [
{
type: 'pie',
data: [{
value: 11231,
name: "淘宝",
itemStyle: {
color: 'yellow'
},
label: {
color: 'green'
},
emphasis: {
itemStyle: { // 点击时控制淘宝这一区域的样式
color: 'pink'
},
label: {
color: 'black'// 点击时控制淘宝这一文字的样式
}
}
}]
}]优先级高,会覆盖主题中、调色盘的效果
（4）自适应
当浏览器的大小发生变化的时候,如果想让图表也能随之适配变化
●1. 监听窗口大小变化事件
●2.在事件处理函数中调用ECharts实例对象的resize即可
window.onresize = function(){
myChart.resize();
}
mCharts.setOption(option)
// 监听window窗口大小变化的事件
window.onresize = function(){
// console.log('window.onresize...')
// 调用echarts实例对象的resize方法
mCharts.resize()
}
// window.onresize = mCharts.resize二 动画的使用
（1）加载动画
ECharts已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可
●显示加载动画
mCharts.showLoading()
●隐藏加载动画
mCharts.hideLoading()
（2）增量动画的实现方式
所有数据的更新都限过setoption头现
不用考虑数据到底产生了那些变化
ECharts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<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: '平均值'
}
]
},
label: {
show: true,
rotate: 60
},
barWidth: '30%'
}
]
}
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的关系并不是相互覆盖的关系, 是相互整合的关系
// 我们在设置新的option的时候, 只需要考虑到变化的部分就可以
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>
</body>
</html>（3）动画配置项
动画配置项
●开启动画
animation: true
●动画时长
animationDuration: 5000（可设置回调函数）
●缓动动画
animationEasing: 'bounceOut'（缓动动画）
●动画阈值
animationThreshold: 8
单种形式的元素数量大于这个阈值时会关闭动画
三 交互API
全局echarts对象是引入echarts.js文件之后就可以直接使用的
echartsInstance对象是通过echarts.init方法调用之后得到的
（1）全局echarts对象方法
1)init
初始化ECharts实例对象
使用主题（light或dark）
2)registerTheme
注册主题.
只有注册过的主题,才能在init方法中使用该主题
3)registerMap
●注册地图数据
$.get(json/ map/china.json', function (china]son) {
echarts.registerMap('china', chinaJson);
});
●geo组件使用地图数据
var option= {
geo: {
type: 'map',
map: 'china',
},
});
4)connect
●一个页面中可以有多个独立的图表
●每一个图表对应一个ECharts实例对象
●connect 可以实现多图关联，传入联动目标为ECharts实例对象，支持数组。
保存图片的自动拼接
刷新按钮
重置按钮
提示框联动、图例选择、数据范围修改等.....
（2）echartsInstance对象方法
■setOption
●设置或修改图表实例的配置项以及数据
●多次调用setOption方法
合并新的配置和旧的配置
---增量动画实现机制
■resize
●重新计算和绘制图表
●一般和window对象的resize事件结合使用
window.onresize = function(){
myChart.resize();
}
■on\off
●绑定或者解绑事件处理函数
●鼠标事件
常见事件: 'click'. 'dblclick'. 'mousedown'. 'mousemove'. 'mouseup' 等
事件参数arg:和事件相关的数据信息
●ECharts事件
常见事件:legendselectchanged. 'datazoom'. 'pieselectchanged'. 'mapselectchanged' 等
事件参数arg：和事件相关的数据信息
■dispatchAction
●触发某些行为
●使用代码模拟用户 的行为
mCharts.dispatchAction({
type: 'highlight', //事件类型
seriesIndex: 0,//图表索引
dataIndex: 1//图表中哪一项高亮
});
■clear
●清空当前实例， 会移除实例中所有的组件和图表
●清空之后可以再次setOption
■dispose
●销毁实例
●销毁后实例无法再被使用
扫一扫
3419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
