持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情
ECharts主题的使用
一、内置主题的使用 init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表需要使用的一套主题 默认内置了两套主题 , light dark
var mCharts = echarts.init(document.querySelector("div"), 'dark')
二、自定义主题的使用
步骤：
1.在线编辑主题 www.echartsjs.com/theme-build…
2.下载主题的js文件
3.在html中导入js文件
4.在init方法中指明主题的名称：
var mCharts = echarts.init(document.querySelector("div"), 'zagiee')
(注意要和主题js文件中echarts.registerTheme('zagiee', {})的第一个参数名保持一致)
调色盘
它是一组颜色，图形、系列会自动从其中选择颜色, 不断的循环从头取到尾, 再从头取到尾, 如此往复。
- 主题调色盘
echarts.registerTheme('zagiee', {
"color": [
"#893448",
"#d95850",
"#eb8146",
"#ffb248",
"#f2d643",
"#ebdba4"
],
"backgroundColor": "rgba(242,234,191,0.15)",
……
})
- 全局调色盘 全局调色盘是在option下增加一个color的数组。
var option = {
color: ['red', 'green', 'blue', 'skyblue', 'purple'],
……
};
- 局部调色盘 局部调色盘就是在series下增加一个color的数组。
var option = {
series: [
{
type: 'pie',
data: pieData,
color: ['pink', 'yellow', 'black', 'orange', 'red']
}
]
};
- 如果全局的调色盘和局部的调色盘都设置了, 局部调色盘会产生效果, 这里面遵循的是就近原则
颜色渐变
线性渐变
线性渐变的类型为linear, 他需要配置线性的方向, 通过x, y, x2, y2即可进行配置：x, y, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果global为true，则该四个值是绝对的像素位置。 在下述代码中的0 0 0 1意味着从上往下进行渐变：
series: [
{
type: 'bar',
data: yDataArr,
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:[
{
offset: 0, color: 'red' // 0%处的颜色为红色
},
{
offset: 1, color: 'blue' // 100%处的颜色为蓝
}
]
}
}
}
]
径向渐变
径向渐变的类型为radial, 他需要配置径向的方向, 通过x, y, r即可进行配置。 前三个参数分别是圆心x, y和半径，取值同线性渐变。 在下述代码中的 0.5 0.5 0.5 意味着从柱的重点点, 向外径向扩散半径为宽度一半的圆：
series: [
{
type: 'bar',
data: yDataArr,
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、label；这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式。 高亮样式：针对鼠标滑过或者点击形成的高亮状态而设定的样式，在emphasis中包裹原先的itemStyle等即可。
var option = {
title: {
text: '饼图的测试',
textStyle: { // 控制标题的文字样式
color: 'blue'
}
},
series: [
{
type: 'pie',
data: [{
value: 11231,
name: "淘宝",
itemStyle: { // 控制淘宝这一区域的样式
color: 'yellow'
},
label: { // 控制文字样式
color: 'green'
},
emphasis: { // 控制淘宝这一区域的高亮样式
itemStyle: {
color: 'pink'
},
label: {
color: 'black'
}
}
},
{
value: 22673,
name: "京东"
},
{
value: 6123,
name: "唯品会",
},
{
value: 8989,
name: "1号店"
},
{
value: 6700,
name: "聚美优品"
}]
}
]
}
自适应
步骤1: 监听窗口大小变化事件 步骤2: 在事件处理函数中调用ECharts实例对象的resize即可
<div style="height:400px;border: 1px solid red"></div>
//宽度会随着窗口的变化自适应
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()一般, 我们会在获取图表数据之后隐藏加载动画
mCharts.showLoading() // 在获取数据之前, 显示加载动画
$.get('data/test_data.json', function (ret) {
mCharts.hideLoading()
……
}
增量动画
所有数据的更新都通过setOption实现, 我们不用考虑数据到底产生了那些变化, ECharts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
setOption 可以设置多次；新旧option的关系并不是相互覆盖的关系, 是相互整合的关系；所以我们在设置新的option的时候, 只需要设置变化的部分就可以。
动画的配置
下面这些配置项写在option下。
animation: false, // 控制动画关闭，默认是开启的
// animationDuration: 2000, // 动画的时长, 它是以毫秒为单位
animationDuration: function(arg){
console.log(arg)
return 2000 * arg
},
animationEasing: 'bounceOut', // 缓动动画
animationThreshold: 8, // 动画元素的阈值，单种形式的元素超过这个值就没有动画了
全局echarts对象的方法
全局echarts对象是引入echarts.js文件之后就可以直接使用的。它的方法有下面几个：
- echarts.init 初始化ECharts实例对象；使用主题
- echarts.registerTheme 注册主题，只有注册过的主题,才能在init方法中使用该主题
- echarts.registerMap
var mCharts2 = echarts.init(document.querySelector('#div1'))
//注册地图数据
$.get('json/map/china.json', function(ret){
echarts.registerMap('aa', ret)
//geo组件使用地图数据
var option2 = {
geo: {
type: 'map',
map: 'aa'
}
}
mCharts2.setOption(option2)
// echarts.connect([mCharts, mCharts2]) // 将柱状图和地图关联起来
})
- echarts.connect 一个页面中可以有多个独立的图表; 每一个图表对应一个ECharts实例对象; connect可以实现多图关联，传入联动目标为EChart实例，支持数组
echartsInstance对象的方法
var myChart = echarts.init(document.getElementById('main'));
eChartsInstance对象(上面代码中的myChart)是通过echarts.init方法调用之后得到的。它的方法有下面几个：
- echartsInstance.setOption 设置或修改图表实例的配置项以及数据； 可多次调用setOption方法（合并新的配置和旧的配置，增量动画）
mCharts.setOption(option)
- echartsInstance.resize 重新计算和绘制图表一般和window对象的resize事件结合使用
window.onresize = function(){
// 调用echarts实例对象的resize方法
mCharts.resize()
}
// window.onresize = mCharts.resize也行
- echartsInstance.on、echartsInstance.off 绑定或者解绑事件处理函数： 1.鼠标事件： 常见事件: 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'等事件。 参数arg: 和事件相关的数据信息。
var myChart = echarts.init(document.getElementById('main'));
mCharts.on('click', function (arg) {
console.log(arg)
console.log('click...')
}) // 对事件进行监听
mCharts.off('click') // 解绑click的事件
- · 2.ECharts事件： 常见事件:legendselectchanged、'datazoom'、'pieselectchanged'、 'mapselectchanged'等。 参数arg: 和事件相关的数据信息。
var option = {
legend: {
data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品']
}
}
mCharts.on('legendselectchanged', function (arg) {
//当点击下图中上面的图标触发
console.log('legendselectchanged')
})
- echartsInstance.dispatchAction 主动触发某些行为, 使用代码模拟用户的行为
$('#btn1').click(function () {
// 模拟用户的行为
// 触发高亮的行为
mCharts.dispatchAction({
type: 'highlight',//高亮
seriesIndex: 0, // 系列的索引
dataIndex: 1 // 数据的索引
})
// 触发显示提示框的行为
mCharts.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: 2
})
})
- echartsInstance.clear 清空当前实例，会移除实例中所有的组件和图表；清空之后可以再次setOption
$('#btn2').click(function () {
// 清空图表的实例
mCharts.clear()
})
$('#btn3').click(function () {
// 重新设置option
mCharts.setOption(option)
})
- echartsInstance.dispose 销毁实例销毁后实例无法再被使用
$('#btn4').click(function () {
// 销毁mCharts
mCharts.dispose()
})
