ECharts如何在webpack中使用

　　介绍

ECharts如何在webpack中使用?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强> npm安装ECharts

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

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

npm  install  echarts ——保存

<强>引入ECharts

通过npm上安装的ECharts和zrender会放在node_modules目录下。可以直接在项目代码中需要(& # 39;echarts& # 39;)得到ECharts。

var  echarts =,要求(& # 39;echarts& # 39;);//,基于准备好的dom,初始化echarts实例 　　var  myChart =, echarts.init (. getelementbyid(& # 39;主要# 39;));//,绘制图表 　　myChart.setOption ({ 　　标题:才能,{ 　　文本:,,,,& # 39;ECharts 入门示例& # 39; 　　,,}, 　　,,提示:{}, 　　,,xAxis: { 　　,,,数据:,(& # 39;衬衫& # 39;,,& # 39;羊毛衫& # 39;,,& # 39;雪纺衫& # 39;,,& # 39;裤子& # 39;,,& # 39;高跟鞋& # 39;,,& # 39;袜子& # 39;】 　　,,}, 　　桠溪才能:{}, 　　,,系列:[{ 　　,,,名字:,& # 39;销量& # 39;, 　　,,,类型:,& # 39;酒吧# 39; 　　,,,数据:,(5日,20岁,36岁,10日,10日,20) 　　})才能 　　});

<强>按需引入ECharts图表和组件

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

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

//,引入,ECharts 主模块 　　var  echarts =,要求(& # 39;echarts/lib/echarts& # 39;);//,引入柱状图 　　要求(& # 39;echarts/lib/图表/酒吧# 39;);//,引入提示框和标题组件 　　要求(& # 39;echarts/lib/组件/提示# 39;); 　　要求(& # 39;echarts/lib/组件/标题# 39;);//,基于准备好的dom,初始化echarts实例 　　var  myChart =, echarts.init (. getelementbyid(& # 39;主要# 39;));//,绘制图表 　　myChart.setOption ({ 　　标题:才能,{ 　　文本:,,,,& # 39;ECharts 入门示例& # 39; 　　,,}, 　　,,提示:{}, 　　,,xAxis: { 　　,,,数据:,(& # 39;衬衫& # 39;,,& # 39;羊毛衫& # 39;,,& # 39;雪纺衫& # 39;,,& # 39;裤子& # 39;,,& # 39;高跟鞋& # 39;,,& # 39;袜子& # 39;】 　　,,}, 　　桠溪才能:{}, 　　,,系列:[{ 　　,,,名字:,& # 39;销量& # 39;, 　　,,,类型:,& # 39;酒吧# 39; 　　,,,数据:,(5日,20岁,36岁,10日,10日,20) 　　})才能 　　});

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。

ECharts如何在webpack中使用