echart 使用準備

首先 用過npm或者yarn安裝 echart，當然官網上有介紹

npm i echarts --save

其次需要了解自己的項目具體使用echart的哪些組件，做到按需導入echart。
1、echarts.js : 經過壓縮，包含除地圖外的全部圖表
2、echarts-original.js : 未壓縮，可用於調試，包含除地圖外的全部圖表
3、echarts-map.js : 經過壓縮，全圖表，包含world，china以及34個省市級地圖數據
4、echarts-original-map.js : 未壓縮，可用於調試，全圖表，包含world，china以及34個省市級地圖數據

以下是echart的各個部分
module.exports = require(’./lib/echarts’); //全局引入

require('./lib/chart/line');//折線圖
require('./lib/chart/bar');//柱狀圖
require('./lib/chart/pie');//圓餅圖
require('./lib/chart/scatter');、
require('./lib/chart/radar');
require('./lib/chart/map');//地圖
require('./lib/chart/treemap');
require('./lib/chart/graph');
require('./lib/chart/gauge');
require('./lib/chart/funnel');
require('./lib/chart/parallel');
require('./lib/chart/sankey');
require('./lib/chart/boxplot');
require('./lib/chart/candlestick');
require('./lib/chart/effectScatter');
require('./lib/chart/lines');
require('./lib/chart/heatmap');
require('./lib/chart/pictorialBar');
require('./lib/chart/themeRiver');
require('./lib/chart/custom');
require('./lib/component/graphic');
require('./lib/component/grid');//用來確定繪圖位置的
require('./lib/component/legendScroll');
require('./lib/component/tooltip');//提示工具（當鼠標移動到圖表上時）
require('./lib/component/axisPointer');
require('./lib/component/polar');
require('./lib/component/geo');
require('./lib/component/parallel');
require('./lib/component/singleAxis');
require('./lib/component/brush');
require('./lib/component/calendar');
require('./lib/component/title'); //確定圖表的標題，很重要
require('./lib/component/dataZoom');
require('./lib/component/visualMap');
require('./lib/component/markPoint');
require('./lib/component/markLine');
require('./lib/component/markArea');
require('./lib/component/timeline');
require('./lib/component/toolbox');
require('zrender/lib/vml/vml');

當然使用import導入也是一樣的

當你準備工作完成後，最簡單的使用方法
// 基於準備好的dom，初始化echarts實例

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

// 繪製圖表

myChart.setOption({
    title: {
        text: 'ECharts 入門示例'
    },
    tooltip: {},
    xAxis: {
        data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});