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下react与echarts一起使用的简单示例

展示前需要在webpack下安装react,echarts的包 npm install echarts --save 该例子总共有4个文件 1,GaugeComp.js   --- 定义gaug...
  • zxw394
  • zxw394
  • 2017年03月22日 15:13
  • 693

在 webpack 中使用 ECharts

http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts ...

EChart 2升级EChart 3注意事项

本文是根据自己的实践进行总结过来的,是不完全的所有升级注意事项。 如果想直接看结果,请移步到第4部分内容1.背景EChart 3是在2015年12月发布的新版本,相比较EChart 2,主要的变化总...

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

参考1、 webpack的很详细的教程 阮一峰大神写的 https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 2、 官方的文...

ECharts配置简单说明

这里所使用的版本是 version = '2.2.0'; dependencies = { zrender: '2.0.7' }; 1、下载ECharts源码,如果不知道哪下载,百度...

Echart在使用webpack打包之后,IE10+中无法渲染的问题

今天在IE11上开发时,发现Echart在IE11上无法渲染出来,控制台报错 SCRIPT65535: Invalid calling object错误指向的是Echart依赖的Zrender模块的...

jQuery概述及版本区别

作为一个流行多年的轻量级 JavaScript 库,jQuery的文档是相当丰富,列举几个: http://www.w3school.com.cn/jquery/ http://jquery.cu...

JQuery Ajax JSon实例

/页面调用Ajax function InvokingAjax(url, data, sucessFunction) { $.ajax({ ...
  • peng790
  • peng790
  • 2016年06月03日 11:59
  • 2193

关于Echarts渲染地图(不创建地图实例)如何修改基础配置的方法

今天想分享下百度地图的心得,我也是一个新手,若有什么不对的或者说错了的地方,还请大家多评论告诉我!废话不多说了,进入正题。        关于地图修改基础配置的方法大致上百度都能搜到,最常见莫过于创...

百度ECharts 3.0 多坐标轴统计图一般配置详解(实例)

ECharts 是百度出品的jquery图表插件。相对于Chartist,拥有更加强大的功能,以及更加详细的文档(ECharts的文档形式非常优秀,简明易懂)。ECharts支持的图表种类非常多,同时...
  • JathamJ
  • JathamJ
  • 2016年10月03日 19:58
  • 3813
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webpack echarts配置实例
举报原因:
原因补充:

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