目录
一、显示相关
1.1、主题
1.1.1、内置主题
1.1.2、自定义主题
1.2、调色盘和颜色渐变
1.2.1、主题调色盘<全局调色盘<局部调色盘
1.2.2、线性渐变(linear)、径向渐变(radial)
1.3、直接样式和高亮样式
1.3.1、直接样式
1.3.2、高亮样式
1.4、图表自适应
二、动画的使用
2.1、图表加载动画
2.2、图表增量动画( myChart.setOption)
2.3、图表动画的配置项(animation、animationDuration、animationEasing、animationThreshold)
三、总结(交互API)
3.1、全局Echarts对象的常用方法
3.1.1、init()
3.1.2、registerTheme()
3.1.3、registerMap()
3.1.4、connect()
3.2、echartsInstance对象的常用方法
3.2.1、setOption
3.2.2、resize
3.2.3、on\off
3.2.4、dispatchAction
3.2.5、clear
3.2.6、dispose
一、显示相关
1.1、主题
1.1.1、内置主题
init方法有两个参数: 第一个参数是一个dom节点,第二个参数是使用的主题;
默认两套主题: light、dark
let myChart = this.$echarts.init(document.getElementById("main1"),'light');
let myChart = this.$echarts.init(document.getElementById("main1"),'dark');
1.1.2、自定义主题
echarts官网的顶部栏：“下载”下拉栏中的“主题下载”，进入后找到“定制主题”按钮进去，左侧点击“下载主题”按钮，普通html项目选择“JS版本”，得到infographic.js文件，放入项目文件夹中。vue项目则选择“JSON 版本”下载。然后在文件里改成自己想要的颜色即可！或者在“主题编辑器”里选好再下载！
网址：主题编辑器 - Apache ECharts
//================引入=======================
import * as ets from "echarts";
import theme from "../../utils/theme.json";
//=================方法里使用=======================
ets.registerTheme("theme", theme); // 注册主题(参数1: 使用时的别名 参数2: 主题配置文件)
let myChart = ets.init(document.getElementById("main1"), theme);1.2、调色盘和颜色渐变
调色盘是一组颜色，图形、系列会自动从其中选择颜色。
1.2.1、主题调色盘<全局调色盘<局部调色盘
(1)、主题调色盘(以“JS版本”为例)：
(1)、全局调色盘:
color: ["red", "green", "blue", "skyblue", "purple"],
xAxis: {.......},
yAxis: {.......},(1)、局部调色盘:
series: [
{
type: "pie", //决定图标类型(bar、line、pie)
color: ["red", "green", "blue", "skyblue", "purple"],
},
],1.2.2、线性渐变(linear)、径向渐变(radial)
series: [
{
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0, //0%处颜色
color: "red",
},
{
offset: 1, //100%处颜色
color: "blue",
},
],
},
// color: {
// type: "radial",
// x: 0.5,
// y: 0.5,
// r: 0.5,
// colorStops: [
// {
// offset: 0, //0%处颜色
// color: "red",
// },
// {
// offset: 1, //100%处颜色
// color: "blue",
// },
// ],
// },
},
},
],1.3、直接样式和高亮样式
1.3.1、直接样式
itemStyle、textStyle、lineStyle、areaStyle、label
1.3.2、高亮样式
在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label
以饼图为例：
pieData: [
{
name: "淘宝",
value: 20,
itemStyle: { color: "yellow" },
label: { color: "green" },
emphasis: {
itemStyle: { color: "purple" },
label: { color: "red" },
},
},
{ name: "京东", value: 30 },
{ name: "华为", value: 20 },
{ name: "拼多多", value: 10 },
{ name: "唯品会", value: 20 },
],
series: [
{
type: "pie",
data: this.pieData,
},
],1.4、图表自适应
监听window窗口大小变化的事件里，调用echarts实例对象的resize方法
// window.onresize = function () {
// myChart.resize();
// };
window.onresize =myChart.resize二、动画的使用
2.1、图表加载动画
显示加载动画(myChart.showLoading())、隐藏加载动画(myChart.hideLoading())
getDayAttendanceRate() {
let myChart = this.$echarts.init(this.$refs.myChart);
myChart.showLoading();//获取数据前，显示加载动画
keepCountApi
.getDayAttendanceRate()
.then((res) => {
if (res.status) {
myChart.hideLoading();//当服务器数据获取成功后，隐藏加载动画
this.optionFun(res.data);
} else {
this.$message.error(res.msg);
}
})
.catch(() => {});
},2.2、图表增量动画( myChart.setOption)
数据的更新都通过setOption实现，echarts会自动找到数组之间的差异然后通过‘动画’去表现数据的变化。
mounted() {
this.optionFun(this.list);
},
methods: {
updateData() {//修改数据
let newArr = [
{ time: "一班", value: 100 },
{ time: "二班", value: 200 },
{ time: "三班", value: 290 },
{ time: "四班", value: 300 },
{ time: "五班", value: 110 },
];
this.optionFun(newArr);
},
addData() {//增加数据
this.list.push({ time: "增加班级", value: 160 });
this.optionFun(this.list);
},
optionFun(arr) {
this.option = {
xAxis: {
type: "category",
data: arr.map((d) => d.time),
},
yAxis: {
type: "value", //数值轴
},
series: [
{
barWidth: 30,
type: "bar",
data: arr.map((d) => d.value),
},
],
};
let myChart = this.$echarts.init(this.$refs.echartsMain);
myChart.setOption(this.option);//因为执行了它，数据才会变化！
window.onresize = myChart.resize;
},
},2.3、图表动画的配置项(animation、animationDuration、animationEasing、animationThreshold)
animation: true,//是否开启动画
// animationDuration:7000,//动画时长
animationDuration: function (arg) {
return 2000 * arg;
},
animationEasing:'bounceOut',//缓动动画("回弹效果")
animationThreshold:7,//动画阈值(元素数量>该值时会关闭动画)
xAxis: {......},
yAxis: {......},三、总结(交互API)
网址：Documentation - Apache ECharts
3.1、全局Echarts对象的常用方法
全局Echarts对象是引入echarts.js文件之后就可以直接使用的
3.1.1、init()
初始化Echarts实例对象，使用主题
3.1.2、registerTheme()
注册主题，只有注册过的主题，才能在init方法中使用该主题
3.1.3、registerMap()
(1)、注册地图数据
$.get("json/map/china.json", function (chinajson) {
echarts.registerMap("china", chinajson);
});(2)、geo组件使用地图数据
var option = {
geo: {
type: "map",
map: "china",
},
};3.1.4、connect()
假设一个页面中有多个独立的图表，每个图标都会对应一个echarts实例对象，那么connect()可以实现多图关联,实际使用场景如下：
保存图片的自动拼接、刷新按钮、重置按钮、提示框联动、图例选择、数据范围修改....
echarts.connect([myChart,myChart2])3.2、echartsInstance对象的常用方法
echartsInstance对象是通过echarts.init方法调用之后得到的
3.2.1、setOption
(1)、设置或修改图表实例的配置项以及数据
(2)、可以多次调用该方法，会合并新旧数据(见增量动画)
3.2.2、resize
(1)、重新计算和绘制图表
(2)、一般和window对象的resize事件结合使用(见图表自适应)
3.2.3、on\off
(1)、绑定或解绑事件处理函数
(2)、鼠标事件、Echarts事件
myChart.on('click', function (params) {
console.log(params);
});
myChart.off('click')3.2.4、dispatchAction
(1)、触发某些行为
(2)、使用代码模拟用户的行为
myChart.dispatchAction({
type:'highlight',//事件类型
seriesIndex:0,//图表索引
dataIndex:1//图表中哪一项高亮
})3.2.5、clear
(1)、清空实例中所有的组件和图表（myChart.clear()）
(2)、清空后可以再次setOption
3.2.6、dispose
销毁实例（myChart.dispose()），销毁后无法再次setOption
有个水球效果，可以参考： https://www.cnblogs.com/tu-0718/p/16722158.html
