目录
一、显示相关
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
