一個簡單的例子

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

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

2. 主要代碼 在線編輯

<!-- 為 ECharts 準(zhǔn)備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div>methods:{drawMap(){// 基于準(zhǔn)備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數(shù)據(jù)var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。myChart.setOption(option);//建議加上以下這一行代碼，不加的效果圖如下（當(dāng)瀏覽器窗口縮小的時候）。超過了div的界限（紅色邊框）window.addEventListener('resize',function() {myChart.resize()});} }, mounted(){this.drawMap(); }

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

//1. 寫法一：當(dāng)只有一個圖表時，可以直接寫 // 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(); })

調(diào)色盤

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

option = {// 全局調(diào)色盤。color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],series: [{type: 'bar',// 此系列自己的調(diào)色盤。color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],...}, {type: 'pie',// 此系列自己的調(diào)色盤。color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],...}] }

可以設(shè)置全局的調(diào)色盤，也可以設(shè)置系列自己專屬的調(diào)色盤。

直接的樣式設(shè)置

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

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

一、標(biāo)題title 官方文檔

1. title.text
默認(rèn)為 ""，主標(biāo)題文本，支持使用 \n 換行；

2. title.link
默認(rèn)為 ""，主標(biāo)題的文本超鏈接；

3. title.target
默認(rèn)為 "blank"，指定窗口打開主標(biāo)題超鏈接；
（1）'self' 當(dāng)前窗口打開；
（2）'blank' 新窗口打開；

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

（2）title.textStyle.fontStyle，主標(biāo)題文字字體的風(fēng)格，[default:'normal']；

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

（3）title.textStyle.fontWeight，主標(biāo)題文字字體的粗細(xì)，[default:'normal']；

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

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

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

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

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

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

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

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

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

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

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

7. title.padding
標(biāo)題內(nèi)邊距，單位px，默認(rèn)各方向內(nèi)邊距為5，接受數(shù)組分別設(shè)定上右下左邊距，默認(rèn) [ default: 5 ]。

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

8. title.borderColor
標(biāo)題的邊框顏色。支持的顏色格式同 backgroundColor，默認(rèn) [ default: '#ccc' ]。

9. title.borderWidth
標(biāo)題的邊框線寬。支持的顏色格式同 backgroundColor，默認(rèn) [ default: 0 ]。

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

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

---

二、圖例組件legend 官方文檔

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

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

legend.right 和 legend.bottom 同上

3. legend.width
圖例組件的寬度。默認(rèn)自適應(yīng)，默認(rèn) [ default: 'auto' ]；（string,number）

4. legend.height
圖例組件的高度。默認(rèn)自適應(yīng)，默認(rèn) [ default: 'auto' ]；

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

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

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

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

9. legend.itemWidth
圖例標(biāo)記的圖形寬度。默認(rèn) [ default: 25 ]；

10. legend.itemHeight
圖例標(biāo)記的圖形高度。默認(rèn) [ default: 14 ]；

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

（2）legend.textStyle.fontStyle，文字字體的風(fēng)格，默認(rèn) [ default: 'normal' ]；
可選： normal，italic，oblique

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

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

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

14. legend.icon
圖例項的文字提示。默認(rèn)不顯示，可以在 legend 文字很多的時候?qū)ξ淖肿霾眉舨⑶议_啟 tooltip。類似文字溢出出現(xiàn)省略號；

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

---

三、grid 官方文檔

直角坐標(biāo)系內(nèi)繪圖網(wǎng)格，單個 grid 內(nèi)最多可以放置上下兩個 X 軸，左右兩個 Y 軸。

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

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

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

4. grid.bottom
grid 組件離容器下側(cè)的距離。默認(rèn)：[ default: 60 ]；

5. grid.width
grid 組件的寬度，默認(rèn)自適應(yīng)。默認(rèn)：[ default: 'auto' ]；

6. grid.height
grid 組件的高度，默認(rèn)自適應(yīng)。默認(rèn)：[ default: 'auto' ]；

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

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

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

---

四、直角坐標(biāo)系 grid 中的 x 軸，xAxis 官方文檔

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

2. xAxis.name
坐標(biāo)軸命名名稱；

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

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

（2）'xAxis.nameTextStyle.fontStyle'，坐標(biāo)軸名稱文字字體的風(fēng)格，默認(rèn)： [ default: 'normal' ]，可選normal、italic、oblique；

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

（4）'xAxis.nameTextStyle.fontFamily'，坐標(biāo)軸名稱文字的字體系列，默認(rèn)： [ default: 'sans-serif' ]。

（5）'xAxis.nameTextStyle.fontSiz'，坐標(biāo)軸名稱文字的字體大小，默認(rèn)： [ default: 12]。

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

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

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

5. xAxis.nameGap
坐標(biāo)軸名稱與軸線之間的距離，默認(rèn)： [ default: 15 ]。

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

7. xAxis.min
坐標(biāo)軸刻度最小值，默認(rèn)： [ default: null ]。

8. xAxis.max
坐標(biāo)軸刻度最小值，默認(rèn)： [ default: null ]。

9. xAxis.axisLine

10. xAxis.axisTick

11. xAxis.axisLabel

12. xAxis.splitLine

---

五、直角坐標(biāo)系 grid 中的 y 軸，yAxis 官方文檔

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

2. yAxis.type
坐標(biāo)軸類型，默認(rèn)： [ default: value ]，可選： value（數(shù)值軸，適用于連續(xù)數(shù)據(jù)）、category（類目軸）、time（ 時間軸，適用于連續(xù)的時序數(shù)據(jù)）、log（對數(shù)軸。適用于對數(shù)數(shù)據(jù)）。

3. yAxis.name
坐標(biāo)軸名稱。

4. yAxis.nameLocation
坐標(biāo)軸名稱顯示位置，默認(rèn)： [ default: 'end' ]，可選 start、 middle/center、end。

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

6. yAxis.nameGap
坐標(biāo)軸名稱與軸線之間的距離，默認(rèn)： [ default: 15 ]。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。