目錄
一、顯示相關
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
)
