一個簡單的例子

1. 下載并引入
（1）npm install echarts --save
（2）import echarts from 'echarts' //main.js引入echarts
或者在組件中按需引入，查看按需引入的詳細模塊

<script>// 引入 ECharts 主模塊var echarts = require('echarts/lib/echarts');// 引入柱狀圖require('echarts/lib/chart/bar');// 引入提示框和標題組件require('echarts/lib/component/tooltip');require('echarts/lib/component/title');export default{} </script>

2. 主要代碼 在線編輯

<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div>methods:{drawMap(){// 基于準備好的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);//建議加上以下這一行代碼，不加的效果圖如下（當瀏覽器窗口縮小的時候）。超過了div的界限（紅色邊框）window.addEventListener('resize',function() {myChart.resize()});} }, mounted(){this.drawMap(); }

為了適應屏幕放大縮小，添加一個瀏覽器窗口變化的事件

//1. 寫法一：當只有一個圖表時，可以直接寫 // window.onresize = lineChart.resize;// 2. 寫法二：原生寫法 // window.addEventListener("resize", () =>{ // this.barChart.resize(); // this.lineChart.resize(); // });//3. 寫法三：jquery的寫法 $(window).on("resize", function(){this.barChart.resize();this.lineChart.resize(); })

調色盤

在 option 中設置，它給定了一組顏色，圖形、系列會自動從其中選擇顏色。

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'],...}] }

可以設置全局的調色盤，也可以設置系列自己專屬的調色盤。

直接的樣式設置

直接的樣式設置是比較常用設置方式。在 ECharts 的 option 中，很多地方可以設置 itemStyle、lineStyle、areaStyle、label 等等。這些的地方可以直接設置圖形元素的顏色、線寬、點的大小、標簽的文字、標簽的樣式等等。可以在線編輯簡單的圖標
這里列出常用的，詳細見官網、

直接寫在 setOption 中的（即在var option = {} 的對象中）有：
一、title
二、lengend
三、grid
四、xAxis
五、yAxis

一、標題title 官方文檔

1. title.text
默認為 ""，主標題文本，支持使用 \n 換行；

2. title.link
默認為 ""，主標題的文本超鏈接；

3. title.target
默認為 "blank"，指定窗口打開主標題超鏈接；
（1）'self' 當前窗口打開；
（2）'blank' 新窗口打開；

4. title.textStyle
（1）title.textStyle.color，主標題文字的顏色，[default:'#333']；

（2）title.textStyle.fontStyle，主標題文字字體的風格，[default:'normal']；

• 'normal'、'italic'、'oblique'

（3）title.textStyle.fontWeight，主標題文字字體的粗細，[default:'normal']；

• 'normal'、'bold'、'bolder'、'lighter'、100 | 200 | 300 | 400...

（4）title.textStyle.fontFamily，主標題文字的字體系列，[ default: 'sans-serif' ]；
還可以是 ‘serif’ , ‘monospace’, ‘Arial’, ‘Courier New’, ‘Microsoft YaHei’, …

（5）title.textStyle.fontSize，主標題文字的字體大小，[ default: 18 ]；

（6）title.textStyle.lineHeight，主標題文字的字體行高，[ default: 18 ]；
rich 中如果沒有設置 lineHeight，則會取父層級的 lineHeight。

{lineHeight: 56,rich: {a: {// 沒有設置 `lineHeight`，則 `lineHeight` 為 56}} }

（7）title.textStyle.width，文字塊的寬度。一般不用指定，不指定則自動是文字的寬度。在想做表格項或者使用圖片（參見 backgroundColor）時，可能會使用它；

注意，如果不定義 rich 屬性，則不能指定 width 和 height。

（8）title.textStyle.height，文字塊的高度。一般不用指定，不指定則自動是文字的高度。在使用圖片（參見 backgroundColor）時，可能會使用它；

（9）title.textStyle.rich，在 rich 里面，可以自定義富文本樣式。利用富文本樣式，可以在標簽中做出非常豐富的效果。

5. title.textAlign
整體（包括 text 和 subtext）的水平對齊，默認 [default:'auto'] ，可選值： ‘auto’、‘left’、‘right’、‘center’；

6. title.textVerticalAlign
整體（包括 text 和 subtext）的垂直對齊，默認 [default:'auto'] ，可選值：‘auto’、‘top’、‘bottom’、‘middle’。；

7. title.padding
標題內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距，默認 [ default: 5 ]。

padding: 5 //設置內邊距為 5 padding: [5, 10] // 設置上下的內邊距為 5，左右的內邊距為 10 padding: [5,4,5,4] （順時針上，右，下，左）

8. title.borderColor
標題的邊框顏色。支持的顏色格式同 backgroundColor，默認 [ default: '#ccc' ]。

9. title.borderWidth
標題的邊框線寬。支持的顏色格式同 backgroundColor，默認 [ default: 0 ]。

10. title.borderRadius
圓角半徑，單位px，支持傳入數組分別指定 4 個圓角半徑，默認 [ default: 0 ]。

borderRadius: 5, // 統一設置四個角的圓角大小 borderRadius: [5, 5, 0, 0] //（順時針左上，右上，右下，左下）

---

二、圖例組件legend 官方文檔

1. legend.left
圖例組件離容器左側的距離，默認 [ default: 'auto' ]。
（1）值可以是像 20 這樣的具體像素值，可以是像 ‘20%’ 這樣相對于容器高寬的百分比，也可以是 ‘left’, ‘center’, ‘right’。
（2）如果 left 的值為’left’, ‘center’, ‘right’，組件會根據相應的位置自動對齊。

2. legend.top
圖例組件離容器上側的距離，默認 [ default: 'auto' ]；

legend.right 和 legend.bottom 同上

3. legend.width
圖例組件的寬度。默認自適應，默認 [ default: 'auto' ]；（string,number）

4. legend.height
圖例組件的高度。默認自適應，默認 [ default: 'auto' ]；

5. legend.orient
圖例列表的布局朝向，默認 [ default: 'horizontal' ]；

6. legend.align
圖例標記和文本的對齊（即顏色塊和文字的位置）。默認自動，默認 [ default: 'auto' ]；

7. legend.padding
圖例內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距。默認 [ default:5]；

8. legend.itemGap
圖例每項之間的間隔。橫向布局時為水平間隔，縱向布局時為縱向間隔，默認 [ default: 10 ]；

9. legend.itemWidth
圖例標記的圖形寬度。默認 [ default: 25 ]；

10. legend.itemHeight
圖例標記的圖形高度。默認 [ default: 14 ]；

11. legend.textStyle 圖例的公用文本樣式。
（1）legend.textStyle.color，文字的顏色，默認 [ default: #333 ]；

（2）legend.textStyle.fontStyle，文字字體的風格，默認 [ default: 'normal' ]；
可選： normal，italic，oblique

（3）legend.textStyle.fontWeight，文字字體的粗細，默認 [ default: normal ]；
（4）legend.textStyle.fontFamily，文字的字體系列，默認 [ default: 'sans-serif']；
（5）legend.textStyle.fontSize，文字的字體大小，默認 [ default: 12 ]；
（6）legend.textStyle.lineHeight，文字的行高；

12. legend.data
圖例的數據數組。數組項通常為一個字符串，每一項代表一個系列的 name；

13. legend.tooltip
圖例的數據數組。數組項通常為一個字符串，每一項代表一個系列的 name

14. legend.icon
圖例項的文字提示。默認不顯示，可以在 legend 文字很多的時候對文字做裁剪并且開啟 tooltip。類似文字溢出出現省略號；

legend: {formatter: function (name) {return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');},tooltip: {show: true} }

---

三、grid 官方文檔

直角坐標系內繪圖網格，單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。

1. grid.left
grid 組件離容器左側的距離。默認：[ default: '10%' ]；

2. grid.top
grid 組件離容器上側的距離。默認：[ default: '10%'60 ]；

3. grid.right
grid 組件離容器右側的距離。默認：[ default: '10%' ]；

4. grid.bottom
grid 組件離容器下側的距離。默認：[ default: 60 ]；

5. grid.width
grid 組件的寬度，默認自適應。默認：[ default: 'auto' ]；

6. grid.height
grid 組件的高度，默認自適應。默認：[ default: 'auto' ]；

7. grid.backgroundColor
網格背景色，默認透明。默認：[ default:'transparent' ]；
注意： 此配置項生效的前提是，設置了 show: true。

8. grid.borderColor
網格的邊框顏色。支持的顏色格式同 backgroundColor。默認：[ default: '#ccc' ]；
注意： 此配置項生效的前提是，設置了 show: true。

9. grid.borderWidth
網格的邊框線寬。默認：[ default: 1 ]；
注意： 此配置項生效的前提是，設置了 show: true。

---

四、直角坐標系 grid 中的 x 軸，xAxis 官方文檔

1. xAxis.type
坐標軸類型。默認 [ default: 'category' ]；
（1）'value'， 數值軸，適用于連續數據。
（2）'category'， 類目軸，適用于離散的類目數據，為該類型時必須通過 data 設置類目數據。
（3）'time'， 時間軸，適用于連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。
（3）'log'， 對數軸。適用于對數數據。

2. xAxis.name
坐標軸命名名稱；

3. xAxis.nameLocation
坐標軸命名名稱顯示位置。默認 [ default: 'end' ]；
可選： start、middle/center、end

4. xAxis.nameTextStyle
坐標軸命名名稱的文字樣式。
（1）'xAxis.nameTextStyle.color'，坐標軸名稱的顏色。

（2）'xAxis.nameTextStyle.fontStyle'，坐標軸名稱文字字體的風格，默認： [ default: 'normal' ]，可選normal、italic、oblique；

（3）'xAxis.nameTextStyle.fontWeight'，坐標軸名稱文字字體的粗細，默認： [ default: 'normal' ]，可選normal、bold、bolder、lighter、100/200/300…；

（4）'xAxis.nameTextStyle.fontFamily'，坐標軸名稱文字的字體系列，默認： [ default: 'sans-serif' ]。

（5）'xAxis.nameTextStyle.fontSiz'，坐標軸名稱文字的字體大小，默認： [ default: 12]。

（6）'xAxis.nameTextStyle.align'，文字水平對齊方式，默認自動，可選： left、center、right。

（7）'xAxis.nameTextStyle.verticalAlign'，文字垂直對齊方式，默認自動，可選： top、middle、bottom。

（8）'xAxis.nameTextStyle.lineHeight'，行高。

5. xAxis.nameGap
坐標軸名稱與軸線之間的距離，默認： [ default: 15 ]。

6. xAxis.boundaryGap
坐標軸兩邊留白策略（即圖標是否占滿整個坐標軸）
（1）類目軸中 boundaryGap 可以配置為 true 和 false。默認為 true；
（2）非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的數組，分別表示數據最小值和最大值的延伸范圍

7. xAxis.min
坐標軸刻度最小值，默認： [ default: null ]。

8. xAxis.max
坐標軸刻度最小值，默認： [ default: null ]。

9. xAxis.axisLine

10. xAxis.axisTick

11. xAxis.axisLabel

12. xAxis.splitLine

---

五、直角坐標系 grid 中的 y 軸，yAxis 官方文檔

1. yAxis.position
y軸的位置，可選 left、right。

2. yAxis.type
坐標軸類型，默認： [ default: value ]，可選： value（數值軸，適用于連續數據）、category（類目軸）、time（ 時間軸，適用于連續的時序數據）、log（對數軸。適用于對數數據）。

3. yAxis.name
坐標軸名稱。

4. yAxis.nameLocation
坐標軸名稱顯示位置，默認： [ default: 'end' ]，可選 start、 middle/center、end。

5. yAxis.nameTextStyle
坐標軸名稱的文字樣式，與 x 軸類似，這里就不多描述了。

6. yAxis.nameGap
坐標軸名稱與軸線之間的距離，默認： [ default: 15 ]。

總結

以上是生活随笔為你收集整理的echarts（一）下载引入，调色盘，[标题、图例组件、坐标轴]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。