Echarts起始篇

Echarts起始篇

1、引入插件echarts.min.js
2、實例化echarts.init(dom[, theme, opts])
參數：

1. dom （必需參數）

實例容器，一般是一個具有高寬的div元素。

注：如果div是隱藏的，ECharts
可能會獲取不到div的高寬導致初始化失敗，這時候可以明確指定div的style.width和style.height，或者在div顯示後手動調用
echartsInstance.resize 調整尺寸。

ECharts 3 中支持直接使用canvas元素作爲容器，這樣繪製完圖表可以直接將 canvas 作爲圖片應用到其它地方，例如在
WebGL 中作爲貼圖，這跟使用 echartsInstance.getDataURL 生成圖片鏈接相比可以支持圖表的實時刷新。

• theme（可選）

應用的主題。可以是一個主題的配置對象，也可以是使用已經通過 echarts.registerTheme 註冊的主題名稱。

• opts（可選）

附加參數。有下面幾個可選項：

• devicePixelRatio
  設備像素比，默認取瀏覽器的值window.devicePixelRatio。

• renderer
  渲染器，支持 ‘canvas’ 或者 ‘svg’。參見 使用 Canvas 或者 SVG 渲染。

• width
  可顯式指定實例寬度，單位爲像素。如果傳入值爲 null/undefined/‘auto’，則表示自動取 dom（實例容器）的寬度。

• height
  可顯式指定實例高度，單位爲像素。如果傳入值爲 null/undefined/‘auto’，則表示自動取 dom（實例容器）的高度。

var mychart = echarts.init(document.getElementById(id));

3、設置圖表實例的配置項以及數據

mychart.setOption(option[,notMerge,lazyUpdate])
或者
mychart.setOption(option[,{
    notMerge: ...,
    lazyUpdate: ...,
    silent: ...
}])

參數：

• option
  圖表的配置項和數據，具體見配置項手冊。
• notMerge 可選，
  是否不跟之前設置的 option 進行合併，默認爲false，即合併。
• lazyUpdate 可選，
  在設置完 option 後是否不立即更新圖表，默認爲 false，即立即更新。
• silent 可選，
  阻止調用 setOption 時拋出事件，默認爲 false，即拋出事件。

4、常見問題

• 圖表動態改變：修改數據（後增前刪），setOption，如：https://www.echartsjs.com/gallery/editor.html?c=dynamic-data
• 使用一個echarts實例切換不同圖表：myechats.clear();myechats.setOption();myecharts.resize();