webpack echarts配置实例

原创 2015年07月10日 09:32:19

简介

本例介绍如何在webpack中构建依赖echats的项目,echarts有好几种方式引入项目:

  • 标签单文件引入:自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。

配置

echarts既然支持模块化包引入,符合AMD规范,那么我们稍加配置下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,模块化处理的简单演示

参考1、 webpack的很详细的教程 阮一峰大神写的 https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 2、 官方的文...
  • u012881904
  • u012881904
  • 2017年03月01日 15:51
  • 690

在 webpack 中使用 ECharts

http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts ...
  • p312011150
  • p312011150
  • 2017年09月18日 16:16
  • 510

webpack引入jquery

使用vue-cli 生成了一个demo,如果想在vue中使用jquery时,一种办法是直接在index.html中引入jquery,但是这种方法并不是我想使用的,当然还有很多种方法引入jquery到...
  • lixianhaics
  • lixianhaics
  • 2017年06月27日 22:56
  • 1033

webpack~关于使用包详解(随时更新)

"bootstrap-daterangepicker": "^2.1.25", //bootstrap 新版本日历时间范围框架 "echarts": "^3.2.2", //做图表的 "f...
  • rabbitgir
  • rabbitgir
  • 2017年04月17日 13:44
  • 408

ECharts官方教程(三)【在webpack中使用 ECharts】

在 webpack 中使用 EChartsWebpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一...
  • WuLex
  • WuLex
  • 2017年12月18日 15:36
  • 164

ECharts使用从0到1 -- 以vue-echarts为例

vue vue-echarts echarts
  • u013558749
  • u013558749
  • 2017年06月07日 19:45
  • 5828

html-webpack-plugin用法全解

本文只在个人博客和 SegmentFault 社区个人专栏发表,转载请注明出处 个人博客: https://zengxiaotao.github.io SegmentFault 个人专栏: https...
  • sunscheung
  • sunscheung
  • 2017年07月18日 16:32
  • 422

webpack 使用教程干货

老规矩 直接上干货。只要跟着做就能实现。安装首先全局安装webpack 目前最新的是2.2.1 rpm install -g webpack 在项目目录中安装插件包npm install we...
  • lengyoumo
  • lengyoumo
  • 2017年03月17日 13:00
  • 199

Webpack打包简单的使用ECharts,模块化处理的简单演示

参考1、 webpack的很详细的教程 阮一峰大神写的 https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 2、 官方的文...
  • u012881904
  • u012881904
  • 2017年03月01日 15:51
  • 690

echarts基本使用

项目中要做图形报表,要求使用echarts实现,以前有用过,不过忘得差不多了,现在重新学学。 echarts官网提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件,如果用到主题和...
  • heyue_99
  • heyue_99
  • 2017年06月03日 21:03
  • 445
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webpack echarts配置实例
举报原因:
原因补充:

(最多只允许输入30个字)