基礎 · 前端小冊

[TOC] # 導入 ## Vue 項目引入 1、`npm install echarts` 2、main.js 添加如下代碼 ```js import echarts from 'echarts' Vue.prototype.$echarts = echarts ``` 3、使用時注意將`echarts.init()` 之類的改為`this.$echarts.init(dom)`，`new this.$echarts.graphic.LinearGradient` >TODO：按需導入? # 入門示例 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script src="echarts.min.js"></script> </head> <body>  <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html> ``` # 設置樣式 ECharts 提供了豐富的自定義配置選項，并且能夠從全局、系列、數據三個層級去設置數據圖形的樣式。 ## 顏色主題（Theme）可以使用默認的主題： ```js var chart = echarts.init(dom, 'light'); var chart = echarts.init(dom, 'dark'); ``` 如果主題保存為 JSON 文件，那么可以自行加載和注冊，例如： ```js // 假設主題名稱是 "vintage" $.getJSON('xxx/xxx/vintage.json', function (themeJSON) { echarts.registerTheme('vintage', JSON.parse(themeJSON)) var chart = echarts.init(dom, 'vintage'); }); ``` 如果保存為 UMD 格式的 JS 文件，那么支持了自注冊，直接引入 JS 文件即可： ```js // HTML 引入 vintage.js 文件后（假設主題名稱是 "vintage"） var chart = echarts.init(dom, 'vintage'); // ... ``` ## 調色盤調色盤，可以在 option 中設置。它給定了一組顏色，圖形、系列會自動從其中選擇顏色。可以設置全局的調色盤，也可以設置系列自己專屬的調色盤。 ```js option = { // 全局調色盤。 color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], 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'], ... }] } ``` 調色盤的作用？？？？ ## 直接樣式設置（itemStyle、lineStyle、areaStyle、label、...） ## 視覺映射（visualMap） # 異步加載與數據更新 `ECharts`中實現異步數據的更新非常簡單，在圖表初始化后不管任何時候只要異步獲取數據后通過`setOption`填入數據和配置項就行。先設置一個空的直角坐標軸，獲取數據后填入數據： ``` var myChart = echarts.init(document.getElementById('main')); // 顯示標題，圖例和空的坐標軸 myChart.setOption({ title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }); // 異步加載數據 $.get('data.json').done(function (data) { // 填入數據 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根據名字對應到相應的系列 name: '銷量', data: data.data }] }); }); ``` ## loading 動畫 ECharts 默認有提供了一個簡單的加載動畫。只需要調用 `showLoading` 方法顯示。數據加載完成后再調用 `hideLoading` 方法隱藏加載動畫。 ```js myChart.showLoading(); $.get('data.json').done(function (data) { myChart.hideLoading(); myChart.setOption(...); }); ``` ## 數據動態更新 [https://www.echartsjs.com/gallery/editor.html?c=doc-example/tutorial-dynamic-data](https://www.echartsjs.com/gallery/editor.html?c=doc-example/tutorial-dynamic-data) # 配置來源：[https://www.cnblogs.com/1996zy/p/8963385.html](https://www.cnblogs.com/1996zy/p/8963385.html) ## 1、title（圖表標題） ```js title: { x: 'left', // 水平安放位置，默認為左對齊，可選為：'center' | 'left' | 'right' | {number}（x坐標，單位px） y: 'top', // 垂直安放位置，默認為全圖頂端，可選為：'top' |'bottom' | 'center' | {number}（y坐標，單位px） // textAlign: null // 水平對齊方式，默認根據 x 設置自動調整 backgroundColor: 'rgba(0,0,0,0)', borderColor: '#ccc', // 標題邊框顏色 borderWidth: 0, // 標題邊框線寬，單位 px，默認為 0（無邊框） padding: 5, // 標題內邊距，單位 px，默認各方向內邊距為 5， // 接受數組分別設定上右下左邊距，同 css itemGap: 10, // 主副標題縱向間隔，單位px，默認為10， textStyle: { fontSize: 18, fontWeight: 'bolder', color: '#333' // 主標題文字顏色 }, subtextStyle: { color: '#aaa' // 副標題文字顏色 }, text: '', // 主標題文本 subtext: '' // 副標題文本 } ``` ## 2、legend（圖例組件）示例：[https://www.echartsjs.com/gallery/editor.html?c=pie-legend&edit=1&reset=1](https://www.echartsjs.com/gallery/editor.html?c=pie-legend&edit=1&reset=1) ![](https://img.kancloud.cn/6f/49/6f49cd3471e11bd4818e6022df84a02b_971x744.png =400x) 圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。當圖例數量過多時，可以使用滾動圖例（垂直）或滾動圖例（水平），通過`legend.type`來控制 `plain`：普通圖例。缺省就是普通圖例。 `scroll`：可滾動翻頁的圖例。當圖例數量較多時可以使用。如果設置為 scroll，可以有更多的細節配置：[https://echarts.baidu.com/option.html#legend.type](https://echarts.baidu.com/option.html#legend.type) ```js legend: { type: 'plain', // 缺省為 plain，圖例較多時可使用 scroll orient: 'horizontal', // 布局方式，默認為水平布局，可選為：'horizontal' | 'vertical' top: 20, left: 20, // 像素值 | 百分比 | left | center | right bottom: 20, // 像素值 | 百分比 | top | middle | bottom right: 20, // 圖例距容器上 | 右 | 下 | 左的距離 width: .., // 圖例寬度，默認自適應 itemGap: 10, // 各個item之間的間隔，單位px，默認為10， itemWidth: 20, // 圖例圖形寬度 itemHeight: 14, // 圖例圖形高度 textStyle: { color: '#333' // 圖例文字顏色 } }, ```