1.主題設置 ``` //初始化中方法，可以輸入第二個參數，內置有light和dark兩種主題，也可以自定義主題，去官網定制下載引用即可， //主題名稱是下載的js中注冊的名稱 var myCharts = this.$echarts.init(document.getElementById('chart'),'dark'); ``` 2.調色盤，圖表會自動從中選擇顏色，優先級（就近原則）：局部 > 全局 > 主題 ``` 主題調色盤 ： 主題自帶的調色 全局調色盤：option配置中可以配置color屬性 局部調色盤：series中配置的color對象屬性 ``` 3.顏色漸變 ``` a. 線性漸變,series中配置 itemStyle : { // color:'blue',//固定顏色 color:{ type : 'linear',//線性漸變 x : 0,//漸變的方向 y : 0, x2 : 0, y2 : 1, colorStops : [ {offset:0,color:'red'},//0%處的顏色是紅色 {offset:1,color:'blue'},//100%處的顏色是藍色 ] } } b.徑向漸變,series中配置 itemStyle : { color:{ type : 'radial',//徑向漸變 x : 0,//漸變的方向 y : 0.5, r : 0.5, colorStops : [ {offset:0,color:'red'},//0%處的顏色是紅色 {offset:1,color:'blue'},//100%處的顏色是藍色 ] } } ``` 線性漸變圖：  徑向漸變圖:  #### 4.自適應大小 ``` //監聽窗口改變，自適應大小 window.onresize = function(){ myCharts.resize() } //或者這樣寫：window.onresize = myCharts.resize; ``` 5.加載動畫 數據加載前顯示loading：`myCharts.showLoading();//加載loading動畫` 數據加載結束關閉動畫 ： `myCharts.hideLoading();//關閉loading動畫` 6.setoption()方法可以多次使用，多次使用會對數據進行整合，找出差異，重新渲染，重復使用只需要對數據進行修改，不需要修改配置項 7.動畫效果配置 ``` // 配置項 var option = { animation : true,//動畫效果，默認打開 // animationDuration : 7000,//動畫延時時間， animationDuration : function(arg){//通過回調函數控制延時時間 // 返回的是索引 return 2000 * arg;//后面的數據加載越久 }, animationEasing : 'bounceOut',//緩動動畫效果：linear：勻速，bounceOut：回彈效果... animationThreshold : 8,//動畫閾值，單種元素的數量大于這個值，動畫不顯示 } ``` 8.事件 ``` // 點擊事件 myCharts.on('click',function(arg){ console.log(arg,1111111) }); //解綁點擊事件 myCharts.off('click'); //監聽圖例組件改變事件，方法名+回調函數 myCharts.on('legendselectchanged',function(arg){ console.log(arg) }); var btn = document.getElementById('btn');//觸發按鈕 var clearBtn = document.getElementById('btn1');//清空按鈕 var setBtn = document.getElementById('btn2');//重置set按鈕 var disposeBtn = document.getElementById('btn3');//重置set按鈕 // dispatchAction方法，模擬用戶行為 btn.onclick = function(){ myCharts.dispatchAction({ type : 'highlight',//類型：變成高亮 seriesIndex : 0,//系列的索引 dataIndex : 1,//數據的索引 }); myCharts.dispatchAction({ type : 'showTip',//類型：顯示提示文字 seriesIndex : 0,//系列的索引 dataIndex : 2,//數據的索引 }); }; //清空事件,clear() clearBtn.onclick = function(){ myCharts.clear(); }; //setOption重置 setBtn.onclick = function(){ myCharts.setOption(option); }; // 銷毀，無法重置dispose disposeBtn.onclick = function(){ myCharts.dispose(); }; ``` 事件案例： :-: