webpack echarts配置實例

時間 2019-11-10

標籤 webpack echarts 配置實例简体版

原文原文鏈接

簡單介紹

本例介紹怎樣在webpack中構建依賴echats的項目，echarts有好幾種方式引入項目：javascript

標籤單文件引入：自1.3.5開始，ECharts提供標籤式引入。假設項目自己並不是基於模塊化開發，建議採用srcipt標籤式引入，Srcipt標籤引入echarts後將可以直接使用兩個全局的命名空間：echarts。zrender。
模塊化單文件引入：ECharts開發了專門的壓縮合並工具echarts-optimizer。經過依賴關係分析同一時候去除與echarts.js的反覆模塊後爲echarts的每一個圖表類型單獨打包生成一個獨立文件，依據應用需求可實現圖表類型按需載入。在build路徑下包括了由echarts-optimizer生成的單文件：
- build/dist/：通過合併、壓縮的單文件
  - echarts.js : 這是包括AMD載入器的echarts主文件。需要經過script最早引入
  - chart/: echarts-optimizer經過依賴關係分析同一時候去除與echarts.js的反覆模塊後爲echarts的每一個圖表類型單獨打包生成一個獨立文件。依據應用需求可實現圖表類型按需載入
    - echarts-line.js : 折線圖（如需折柱動態類型切換，require時還需要echarts/chart/bar）
    - echarts-bar.js : 柱形圖（如需折柱動態類型切換，require時還需要echarts/chart/line）
    - echarts-scatter.js : 散點圖
    - echarts-k.js : K線圖
    - echarts-pie.js : 餅圖（如需餅漏斗圖動態類型切換，require時還需要echarts/chart/funnel）
    - echarts-radar.js : 雷達圖
    - echarts-map.js : 地圖
    - echarts-force.js : 力導向佈局圖（如需力導和絃動態類型切換。require時還需要echarts/chart/chord）
    - echarts-chord.js : 和絃圖（如需力導和絃動態類型切換，require時還需要echarts/chart/force）
    - echarts-funnel.js : 漏斗圖（如需餅漏斗圖動態類型切換，require時還需要echarts/chart/pie）
    - echarts-gauge.js : 儀表盤
    - echarts-eventRiver.js : 事件河流圖
- source/ : 通過合併，但並無壓縮的單文件，內容同dist，可用於調試
模塊化包引入：假設項目自己是模塊話的且遵循AMD規範，則僅僅需要使用一個符合AMD規範的模塊載入器。如RequireJS，配置好package路徑指向src就能夠。
由於echarts依賴底層zrendar，也需要配置好對應的package。java

配置

echarts既然支持模塊化包引入，符合AMD規範，那麼咱們稍加配置下webpack。便可以引入到webpack構建的項目中了webpack

webpack.config.js

module.exports = {
    entry: './entry.js',
    output: {
        filename: 'bundle.js'
    },
    resolve: {
        alias: {
            echarts$: "echarts/src/echarts.js",
            echarts: "echarts/src",
            zrender$: "zrender/src/zrender.js",
            zrender: "zrender/src"
        }
    }
}

entry.js

var echarts = require("echarts");
require('echarts/chart/line');
require('echarts/chart/bar');
var option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['蒸發量', '降水量']
    },
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            magicType: {
                show: true,
                type: ['line', 'bar']
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    calculable: true,
    xAxis: [{
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }],
    yAxis: [{
        type: 'value',
        splitArea: {
            show: true
        }
    }],
    series: [{
        name: '蒸發量',
        type: 'bar',
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    }, {
        name: '降水量',
        type: 'bar',
        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    }]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

webpack echarts配置實例

簡單介紹

配置

相關連接