主题的使用
内置主题
light dark
init(dom,theme)第二个参数就是可以放置主题
应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。参见 ECharts 中的样式简介。
ECharts5 除了一贯的默认主题外，还内置了'dark'主题。可以像这样切换成深色模式：
var chart = echarts.init(dom, 'dark');
自定义主题
主题编辑器里面访问获取：https://echarts.apache.org/zh/theme-builder.html
<script src="theme/itcast.js"></script>
var mCharts = echarts.init(document.querySelector("div"), 'itcast')调色盘
theme 应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。
主题调色盘
就是上面的自定义主题
全局调色盘
全局调色盘配置后会覆盖主题调色盘，全局调色盘是配置在option中
option = {
// 全局调色盘。
color: [
'#c23531',
'#2f4554',
'#61a0a8',
'#d48265',
'#91c7ae',
'#749f83',
'#ca8622',
'#bda29a',
'#6e7074',
'#546570',
'#c4ccd3'
],}局部调色盘
局部调色盘配置后会覆盖全举报调色盘和主题调色盘，局部调色盘是配置在series的每个对象中
option = {
series: [
{
type: 'bar',
// 此系列自己的调色盘。
color: [
'#dd6b66',
'#759aa0',
'#e69d87',
'#8dc1a9',
'#ea7e53',
'#eedd78',
'#73a373',
'#73b9bc',
'#7289ab',
'#91ca8c',
'#f49f42'
]
// ...
},
{
type: 'pie',
// 此系列自己的调色盘。
color: [
'#37A2DA',
'#32C5E9',
'#67E0E3',
'#9FE6B8',
'#FFDB5C',
'#ff9f7f',
'#fb7293',
'#E062AE',
'#E690D1',
'#e7bcf3',
'#9d96f5',
'#8378EA',
'#96BFFF'
]
// ...
}
]
};线性渐变 径向渐变 纹理填充
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
}
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
{
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
}
// 纹理填充
{
image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}样式
直接样式
itemStyle图形样式。（全局局部都有这个配置）
title. textStyle 控制标题的样式
lineStyle areaStyle 折线或者雷达图的面积样式的设置
label 设置图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
高亮样式
series下面的样式下例如geo{}下面的emphasis{}下面的itemStyle{}下面的color可以设置改变颜色。
动画
加载动画与隐藏动画
echartsInstance. showLoading
echartsInstance. hideLoading
显示加载动画效果。可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。
<!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>
<script src="lib/jquery.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
// var data =
var mCharts = echarts.init(document.querySelector("div"))
mCharts.showLoading() // 在获取数据之前, 显示加载动画
$.get('data/test_data.json', function (ret) {
mCharts.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
var axisData = []
for (var i = 0; i < ret.length; i++) {
var height = ret[i].height
var weight = ret[i].weight
var itemArr = [height, weight]
axisData.push(itemArr)
}
console.log(axisData)
var option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'effectScatter',
data: axisData,
symbolSize: function (arg) {
// console.log(arg)
var weight = arg[1]
var height = arg[0] / 100
// BMI > 28 肥胖
// BMI: 体重/ 身高*身高 kg m
var bmi = weight / (height * height)
if (bmi > 28) {
return 20
}
return 5
},
itemStyle: {
color: function (arg) {
console.log(arg)
var weight = arg.data[1]
var height = arg.data[0] / 100
var bmi = weight / (height * height)
if (bmi > 28) {
return 'red'
}
return 'green'
}
},
showEffectOn: 'emphasis',
rippleEffect: {
scale: 10
}
}
]
};
mCharts.setOption(option)
})
</script>
</body>
</html>动画配置项
option：{
animation:true}
是否开启动画。
animationDuration动画时长
就是动画持续的时间，支持回调函数，可以通过每个数据返回不同的时长
animationDuration: function (idx) {
// 越往后的数据时长越大
return idx * 100;
}animationEasing缓动动画
animationEasing:'backIn',
实例代码：https://echarts.apache.org/examples/zh/editor.html?c=line-easing
animationThreshold动画阈值
animationThreshold:8
是否开启动画阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
就是同一个显示动画的元素的个数大于这个数字就会关闭动画。
API方法
全局的echarts对象
全局eharts对象引入echarts.js文件后就可以直接使用的。
connect
多个图表实例实现联动。
参数：
// 分别设置每个实例的 group id
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');
// 或者可以直接传入需要联动的实例数组
echarts.connect([chart1, chart2]);什么时候开始联动呢？
答：例如保存图片的自动拼接、刷新按钮、重置按钮、提示框联动、图例选择、数据范围修改等。。。
