ECharts入門（1） ---- 基本使用

引入ECharts

• 從 Apache ECharts (incubating) 官網下載界面 獲取官方源碼包後構建。
• 通過cdn引用線上文件：https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js
• 通過 npm 獲取 echarts，npm install echarts --save，詳見“[在 webpack 中使用 echarts](https://www.echartsjs.com/tutorial.html#在 webpack 中使用 ECharts)”
• 通過 jsDelivr 下載echarts.js文件本地進入：https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js

注意:

echarts.js文件需要下載使用，不能直接在git上覆制代碼使用，可能會出現一些未知問題，比如亂碼之類的。

ECharts的基本使用

1. 爲 ECharts 準備一個具備大小（寬高）的 DOM容器

<div id="main" style="width: 600px;height:400px;"></div>
<!--
  必須要給出寬高，否則圖標無法顯示
-->

2. 調用 init 方法，初始化一個 echarts 實例

var myChart = echarts.init(document.getElementById('main'));

3. 指定圖表的配置項和數據

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);
//  ps:   這裏的yAxis雖然沒有數據，但是是不能省略的，否則會報錯

4. 效果圖