举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > ECharts怎么在webpack中使用

ECharts怎么在webpack中使用

2023-05-05 15:18 ECharts教程

 ECharts怎么在webpack中使用

Webpack 是目前比较流行的模块打包工具,它可以分析你的项目结构,找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

如果你已经对 webpack 有了一定的了解,并且能够很好的在项目中使用 webpack ,那么就可以学习怎么在使用 webpack 的项目中轻松的引入和打包 Echarts了。


通过 npm 安装 ECharts

Echarts 3.1.1 之后的版本和 zrender 的 package 在 npm 上是由官方 EFE 维护的,之前的版本不受官方维护。

使用下述命令可以通过 npm 安装 ECharts 和 zrender:

npm install echarts --save

如何引入 ECharts

Echarts 和 zrender 以 npm 的方式安装之后会被存放在 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]
    }]
});

在 Echarts附录一 中包含了更多可以按需引入的模块列表。


延伸阅读

Browserify 是另一个现今流行的模块打包工具,它可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库,它的用法与以上描述的方法相同。

阅读全文
以上是编程学为你收集整理的 ECharts怎么在webpack中使用全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部