前言
Echarts是一個美觀的可視化工具，但是很多朋友初次接觸，不知道自己該怎么創建一個包含Echartst圖表的本地HTML網頁，本文將詳細地介紹Echarts的使用流程。
使用流程步驟
共分為三個步驟：
- 獲得API
- 在文章中引入
- 配置相關項
1、獲得API
可以在官網的GitHub上下載：https://github.com/apache/incubator-echarts/releases/tag/4.1.0。
解壓后內部長這樣：
而我們要用的Echarts則來自於文件夾‘dist’，里面有Echarts的各個版本，包括全面版的，簡版的，我們選用全面版的，文件名就是Echarts.js。
2、引入API
在HTML文檔的Head標簽里面，加上這樣一行代碼：
<script type="text/javascript" src="echarts.js"></script>
src是echarts所在的路徑，我的路徑是相對路徑，即HTML文檔和echarts在一個文件夾下面，且是同級。
3、配置相關項
- 首先要確定一個容器，用來顯示圖表：
<div id='main'></div>
設置一個id，方便后面使用
- 實例化echarts對象到這個容器里面
var chart = echarts.init(document.getElementById('main'));配置
- 配置option選項：
option = {
backgroundColor:
title: ...
tooltip : ...
visualMap: ...
series : ...
{
name:'訪問來源',
type:'pie',
radius : '55%',
center: ['50%', '50%'],
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:274, name:'聯盟廣告'},
{value:235, name:'視頻廣告'},
{value:400, name:'搜索引擎'}
]
};
- 為圖表引入配置項option
myChart.setOption(option);
4、如何在管官網上學習Echarts使用
Echarts上有很多實例，但是初學者不知道從何入手，其實耐心尋找的話，官網上面都有配置項，API,如下圖
里面涉及到js語言，就需要有一定的基礎了。作者我本身並未接觸過javascript相關語言，但是依靠自學，基本上達到了可以將任意一個Gallery里面的內容本地化的程度。一點點進步，累積到最后就會突破。