脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack 使用 ECharts

在 webpack 中使用 ECharts的实例详解

 更新时间：2018年02月05日 10:43:28   投稿：mrr  
这篇文章主要介绍了在 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

总结

以上所述是小编给大家介绍的在 webpack 中使用 ECharts的实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

相关文章

  • js项目中前端如何实现无感刷新token

    js项目中前端如何实现无感刷新token

    本文主要介绍了js项目中前端如何实现无感刷新token，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • uniapp中使用计时器setInterval的场景与方法

    uniapp中使用计时器setInterval的场景与方法

    计时器在日常开发中经常会遇到,下面这篇文章主要给大家介绍了关于uniapp中使用计时器setInterval的场景与方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • JS+Vue实现三级全选单选

    JS+Vue实现三级全选单选

    这篇文章主要为大家详细介绍了JS+Vue实现三级全选单选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript 密码强度判断代码

    JavaScript 密码强度判断代码

    JavaScript 密码强度判断代码，其实就是利用了判断一些特殊符号，字符串长度等来实现判断。
    2009-09-09
  • JavaScript中yield实用简洁实现方式

    JavaScript中yield实用简洁实现方式

    原以为是一个蛮复杂的题目，想了许久没思路，当然要实现绝对能实现，但如果分析JavaScript脚本或是动态产生代码，都太复杂了。
    2010-06-06
  • JavaScript 语言的递归编程

    JavaScript 语言的递归编程

    关于递归的解释见《SICP》第1章。下面是个简单的递归编程题目。
    2010-05-05
  • js实现登录框鼠标拖拽效果

    js实现登录框鼠标拖拽效果

    本文主要介绍了js实现登录框鼠标拖拽效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 使用Bootstrap美化按钮实例代码(demo)

    使用Bootstrap美化按钮实例代码(demo)

    这篇文章主要介绍了使用Bootstrap美化按钮实例代码(demo),非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • javascript 命名空间以提高代码重用性

    javascript 命名空间以提高代码重用性

    为你封装的javascript库加上命名空间以提高代码重用性
    2008-11-11
  • Javascript实现动态菜单添加的实例代码

    Javascript实现动态菜单添加的实例代码

    在注册信息的时候，常常需要通过下拉菜单让用户选择，而且希望用户在第一个下拉框做的选择，影响第二个下拉框的内容。有时候，如果第一个下拉框不作出选择，第二个下拉框根本不会页面上显示，为了给用户呈现一个更清晰的页面。
    2013-07-07

最新评论