webpack zrender 引入_引入webpack - CSDN
精华内容
参与话题
  • webpack echarts配置实例

    千次阅读 2015-07-10 09:33:03
    简介本例介绍如何在webpack中构建依赖echats的项目,echarts有好几种方式引入项目: 标签单文件引入:自1.3.5开始,ECharts提供标签式引入。如果项目本身并不是基于模块化开发,建议采用srcipt标签式引入,Srcipt...

    简介

    本例介绍如何在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 中使用 EChartsWebpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。npm 安装 ECharts在 ...

    在 webpack 中使用 ECharts

    Webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。

    npm 安装 ECharts

    3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。

    你可以使用如下命令通过 npm 安装 ECharts

    npm install echarts --save

    引入 ECharts

    通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require(‘echarts’) 得到 ECharts。

    var echarts = require('echarts');
    
    // 基于准备好的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]
        }]
    });

    按需引入 ECharts 图表和组件

    默认使用 require('echarts') 得到的是已经加载了所有图表和组件的 ECharts 包,因此体积会比较大,如果在项目中对体积要求比较苛刻,也可以只按需引入需要的模块。

    例如上面示例代码中只用到了柱状图,提示框和标题组件,因此在引入的时候也只需要引入这些模块,可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。

    // 引入 ECharts 主模块
    var echarts = require('echarts/lib/echarts');
    // 引入柱状图
    require('echarts/lib/chart/bar');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    
    // 基于准备好的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]
        }]
    });

    可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js

    对于流行的模块打包工具 browserify 也是同样的用法,这里就不赘述了。而对于使用 rollup 的自定义构建,参见 自定义构建 ECharts。

    展开全文
  • webpack 引用vconsole

    2019-06-27 15:55:11
    1.npm install -vconsole --save-...2.npm install -vconsele-webpack-plugin --save-dev 3.webpack.base.conf.js 'use strict' const path = require('path') const utils = require('./utils') const c...

    1.npm install -vconsole --save-dev

    2.npm install -vconsele-webpack-plugin --save-dev

    3.webpack.base.conf.js

    'use strict'
    const path = require('path')
    const utils = require('./utils')
    const config = require('../config')
    const webpack = require('webpack')
    const vueLoaderConfig = require('./vue-loader.conf')
    const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入vConstle
    
    function resolve(dir) {
      return path.join(__dirname, '..', dir)
    }
    
    process.env.NODE_ENV = 'production'
    // process.env.NODE_ENV = 'development'
    
    // new webpack.DefinePlugin({
    //   'process.env.NODE_ENV': JSON.stringify('production')
    // })
    console.log(process.env.NODE_ENV)
    
    const argv = require('yargs')
      .describe('debug', 'debug 环境') // use 'webpack --debug'
      .argv;
    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      plugins: [
        new webpack.ProvidePlugin({
          '$': 'jquery',
          'jQuery': 'jquery',
          'window.jQuery': 'jquery'
        }),
        new vConsolePlugin({
          enable: !!argv.debug
        })
      ],
      output: {
        path: config.build.assetsRoot,
        filename: 'bundle.[hash:4].js',
        publicPath: process.env.NODE_ENV === 'production' ?
          config.build.assetsPublicPath : config.dev.assetsPublicPath
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          echarts$: "echarts/src/echarts.js",
          echarts: "echarts/src",
          zrender$: "zrender/src/zrender.js",
          zrender: "zrender/src"
        }
      },
      module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader', // 包含了css loader
            options: vueLoaderConfig
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
          },
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      },
      node: {
        // prevent webpack from injecting useless setImmediate polyfill because Vue
        // source contains it (although only uses it if it's native).
        setImmediate: false,
        // prevent webpack from injecting mocks to Node native modules
        // that does not make sense for the client
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
      }
    }
    

      
    4.package.json

    "dev": "webpack-dev-server --debug --inline --progress --config build/webpack.dev.conf.js",

    转载于:https://www.cnblogs.com/tongbiao/p/9418501.html

    展开全文
  • 今天在IE11上开发时,发现Echart在IE11上无法渲染出来,控制台报错 SCRIPT65535: Invalid calling object错误指向的是Echart依赖的Zrender模块的requestAnimationFrame模块,指示requestAnimationFrame方法调用失败...

    今天在IE11上开发时,发现Echart在IE11上无法渲染出来,控制台报错 SCRIPT65535: Invalid calling object

    错误指向的是Echart依赖的Zrender模块的requestAnimationFrame模块,指示requestAnimationFrame方法调用失败

    查阅MSDN关于IE兼容差异的文档,发现有一篇叫做 函数指针方法调用 的文章

    文章大意如下:

    早期版本的 Windows Internet Explorer 支持将方法的指针进行缓存并随后使用缓存的指针来调用方法。自 Windows Internet Explorer 9 开始,取消了这项支持以改善与其他浏览器的互操作性。

    var d = document.writeln;
    d("<script language=VBScript>"); //error Invalid calling object

    从 Internet Explorer 9 开始,需要有一个对象才能调用方法。默认情况下,在全局作用域中提供 window 对象(如前面示例中所示)。不过,window 对象没有 writeln 方法,因此报告 JavaScript 错误消息:“调用对象无效”。

    解决这个报错的方案是显示提供适当的调用对象,或使用 JavaScript 的 bind API 将隐式调用对象与该方法关联。

    d.call(document, '<script language="VBScript">');
    
    or
    
    var d = document.writeln.bind(document);
    d("<script language=VBScript>"); // Now this is OK.

    根据这个原理,我们稍微修改下requestAnimationFrame模块

    //requestAnimationFrame.js 模块
    module.exports = (typeof window !== 'undefined' &&
                                    (window.requestAnimationFrame
                                    || window.msRequestAnimationFrame
                                    || window.mozRequestAnimationFrame
                                    || window.webkitRequestAnimationFrame))
                                || function (func) {
                                    setTimeout(func, 16);
                                };
    

    修改为

    //requestAnimationFrame.js 模块
    module.exports = (typeof window !== 'undefined' &&
                                    (window.requestAnimationFrame
                                    || window.msRequestAnimationFrame.bind(window)
                                    || window.mozRequestAnimationFrame
                                    || window.webkitRequestAnimationFrame))
                                || function (func) {
                                    setTimeout(func, 16);
                                };
    

    即可解决。

    不过,解决这个问题还有另一个方法。

    在webpack的配置中,我们在开发环境使用

    devtool: 'eval-source-map'

    来定位错误,去掉eval方式亦可解决此问题,不过原因不详,还有待探究。

    原文出处:http://www.foreverpx.cn

    转载请注明出处。

    展开全文
  • Vue项目升级到Webpack 4.x初步踩坑总结

    万次阅读 2018-06-27 16:07:38
    Vue项目升级到Webpack 4.x初步踩坑总结,包括压缩JS/CSS,分离CSS/提取CSS到单独文件,分离Chunk,以及vue-loader 15.x版本的使用和基于vue项目的修改
  • webpack 中使用 ECharts

    千次阅读 2017-09-18 16:16:11
      Webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目
  • 在用Echarts3模块化包引入时(引入源码),总是会报[module_miss]问题。如下:Uncaught Error: [MODULE_MISS]"zrender/Element" is not exists!t Uncaught Error: [MODULE_MISS]"zrender/container/Group" is not ...
  • echarts内通过zrender添加文字,图形等

    万次阅读 热门讨论 2017-05-31 19:30:12
    ... 需求概述:在环形饼状图中间添加一个固定的文字显示。...最开始的思路还是通过echarts提供现有的图表实现,其实就是在饼状图的中间添加一个单项data的饼图,效果就是一个实心圆型图,然后把label的位置设置...
  • ECharts 之引用ECharts

    万次阅读 2016-11-24 16:55:17
    获取ECharts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和...
  • ECharts 3.0源码简要分析1-总体架构

    万次阅读 多人点赞 2017-03-09 11:32:19
    百度的Echarts 3.0作为前端领域可视化重要的开源库,是我们在日常工作生活中经常使用的,所以有必要一起来了解下Echarts的源码。我打算用一个系列介绍下Echarts 3.x的使用和源码,一些demo和没有在博客中介绍的源码...
  • 之前修改公司的运营系统,多年来积累下来的代码使得每次打包构建的时候时间异常漫长,非常难受,一气之下将项目的Webpack从2.x升级到了4.x,原来在Jenkins上一套需要6分钟的流程现在只需2分钟,顿时感到身心舒畅( ̄...
  • It's no longer allowed to omit the '-loader' suffix when using loaders 这是在学习vue2中,遇到的第一个bug,查了网上的文档,都是说加一下-loader后缀即可,可还是...webpack.config.js文件 modules模块下 l...
  • Echarts源码修改

    千次阅读 2019-07-25 17:45:36
    项目中要画树图,但echarts的树图的线只支持贝塞尔曲线...步骤:1、下载源码 2、修改 3、webpack打包安装 1、下载地址:https://github.com/apache/incubator-echarts/releases/tag/4.2.1 2、(1)解压打开,找到...
  • 确保npm已安装 一. 项目创建 1. vue-cli:vue脚手架,提供好基本项目结构 npm install vue-cli -g //安装vue命令环境 验证是否安装成功,可执行命令:vue –version 2.生成项目模板 ... simple ...
  • 最近做项目需要用到百度公司的echarts产品来在移动端做一些图标满足需求,echarts...在这里主要总结一下用webpack(当然了打包工具有很多,还有gulp,grunt)工具进行打包echarts项目该注意的点或者说具体步骤。 Webp
  • Webpack是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。 npm 安装 ECharts 你可以使用如下命令通过 ...
1 2 3 4 5 ... 7
收藏数 124
精华内容 49
关键字:

webpack zrender 引入