ECharts从入门到精通——第0篇从环境搭建到上线部署

原文地址
作者个人站点
零&＃xff1a;前言
在浏览各类网站时&＃xff0c;我发现了不少制作精良的图表&＃xff0c;心生喜爱&＃xff0c;顿时萌发了“我也来做一个吧&＃xff01;”的念头。于是我在此写下《Echarts从入门到精通》系列文章&＃xff0c;其中错漏之处还望读者批评指正。本文的相关代码请参见项目链接。

一、ECharts简介

ECharts是一个使用 Javascript 实现的开源可视化库&＃xff0c;可以流畅的运行在 PC 和移动设备上&＃xff0c;兼容当前绝大部分浏览器&＃xff0c;原先由百度的团队进行开发维护&＃xff0c;现在已经成为apache基金会的孵化项目。
与其它各类前端可视化工具相比&＃xff0c;ECharts的功能强大&＃xff0c;文档齐备。官网提供了相当详细的教程。本系列文章侧重实战与案例展示&＃xff0c;读者可以结合官网提供的文档深入学习ECharts。

二、环境搭建&＃xff08;vue以及webpack&＃xff09;

万事开头难。本文先在此处交代一下环境搭建的过程&＃xff0c;如无特殊说明&＃xff0c;后续的环境配置方法都与此处相同。
本系列教程主要使用Vue、Webpack以及ECharts&＃xff0c;操作系统为Ubuntu 20.4,Windows下的操作方法与之类似。

2.1 安装Vue、webpack

关于Vue的安装方法网上有很多介绍&＃xff0c;常用的方法有使用CDN加载或者使用npm安装。
这里使用npm进行安装。原因在于&＃xff1a;我们可以结合npm和webpack&＃xff0c;非常方便的将所用到的js文件和样式表进行打包&＃xff0c;有利于线上部署。
Vue的安装命令为&＃xff1a;

npm install -g vue


这里建议大家使用科学上网的方法&＃xff0c;否则会比较慢。个人不是特别建议使用cnpm&＃xff0c;因为npm还有提供顺带检查漏洞的功能&＃xff0c;当然您觉得安装时间过久&＃xff0c;可以使用国内的镜像地址。

npm config set registry https://registry.npm.taobao.org


下面安装vue-cli&＃xff0c;使用vue-cli可以比较方便的配合webpack搭建项目框架&＃xff0c;也就是建立各种项目文件。

npm install -g &＃64;vue/cli


安装webpack
Webpack的安装分为全局安装和局部安装。
全局安装方式为&＃xff1a;

npm install webpack -g


局部安装方式需要先创建项目&＃xff0c;即如果该项目需要使用webpack就进行安装&＃xff0c;个人推荐这种方法。具体方法为&＃xff1a;
进入项目目录&＃xff0c;确定已经有 package.json&＃xff0c;没有就通过 npm init 创建&＃xff0c;安装 webpack 依赖。

npm install webpack --save-dev


2.2 安装ECharts

ECharts的安装方式与上面类似。

npm install echarts --save


2.3 具体的命令

现在我将项目中需要输入的命令写在下面&＃xff0c;请注意&＃xff0c;Webpack和ECharts最好先创建项目&＃xff0c;再进行安装。
创建项目的命令如下所示&＃xff0c;这里project_name用实际的项目名称代替&＃xff0c;过程比较慢&＃xff0c;请耐心等待&＃xff1a;

vue init webpack project_name


进入项目

cd project_name


安装Webpack

npm install webpack --save-dev


安装ECharts

npm install echarts --save


所有的js项目依赖都放在了本项目目录下的node_modules文件夹中。
运行npm run dev
项目一般运行在http://localhost:8080/&＃xff0c;至此一个项目框架就搭建完毕了。我们可以开始进行正式的工作了。

三、Echarts简单使用方法

项目建立之后&＃xff0c;项目目录大概是这样的&＃xff0c;注意src目录下的comm/js目录是我手动建立的。

之所以要展示一下目录&＃xff0c;是为了提醒一下初学者&＃xff0c;对于一个vue项目而言&＃xff0c;代码的相对路径是以src目录为基点的。也就是说&＃xff0c;如果要引入一个新的js数据包&＃xff0c;可以这样引入

import myCharts from &＃39;./comm/js/myCharts.js&＃39;


我们大部分的工作也是要在src文件夹下进行的。
首先我们在src目录下创建comm文件夹及子文件夹js文件夹&＃xff0c;在该文件下创建一个文件myCharts.js。
我们在该文件中写入具体的ECharts业务代码。
创建完毕后&＃xff0c;我们在main.js文件中引入myCharts.js文件。

下面我们写具体的业务代码&＃xff0c;绘制出一个简单的折线图。

这里Object.defineProperties方法提供了常见的set、get方法。咱们先抛开涉及Vue的相关知识&＃xff0c;我们只看涉及ECharts的代码。
如何绘制一个折线图&＃xff1f;通常情况下&＃xff0c;我们只需要提供x轴和y轴的数据就可以了。

const optionData &＃61; {xAxis:{type:&＃39;category&＃39;,data:[&＃39;1&＃39;,&＃39;2&＃39;,&＃39;3&＃39;,&＃39;4&＃39;,&＃39;5&＃39;,&＃39;6&＃39;,&＃39;7&＃39;]},yAxis:{type:&＃39;value&＃39;},series:[{data:[11,22,33,44,55,66,77],type:&＃39;line&＃39;,smooth:true}]};


对于一个可以展示的HTML文档&＃xff0c;我们需要先定义一个标签元素上&＃xff0c;再将ECharts挂载到该元素上。否则连标签元素都没有&＃xff0c;我们自然没办法看到相应图表了。
官网提供的案例如下所示。

div id&＃61;"main" style&＃61;"width: 600px;height:400px;"></div>// 基于准备好的dom&＃xff0c;初始化echarts实例var myChart &＃61; echarts.init(document.getElementById(&＃39;main&＃39;));


完成初始化工作后&＃xff0c;这里的myChart就相当于一张空白的画布。
每种图标给我们划定了一个数据输入的接口&＃xff0c;我们通过填写配置项&＃xff0c;来描述具体的数据是什么&＃xff0c;例如上面的x、y和series。
真正展示图片的语句只有一句话&＃xff1a;

myChart.setOption(option);


有了这张图&＃xff0c;我们现在要告诉浏览器&＃xff0c;这张图需要出现在哪里。
秉承模块化设计的原则&＃xff0c;我们在main.js里把myCharts注册到Vue里。

import myCharts from &＃39;./comm/js/myCharts.js&＃39;
Vue.use(myCharts)


这意味着我们可以在其它的vue文件里&＃xff0c;例如HelloWorld.vue调用这个折线图。

至此&＃xff0c;一个项目里的基本部分就完成了。我们可以运行该项目看看了。
运行代码为npm run dev。

效果如下所示&＃xff1a;

当然可能会报错&＃xff0c;比如&＃xff1a;

大部分错误都是涉及eslint的错误&＃xff0c;可以根据错误提示进行修改配置文件。但是一般不用管也不会影响效果呈现。

四、上线部署

对于一个需要上线的项目而言&＃xff0c;我们不可能再运行npm run dev。
为什么呢&＃xff1f;因为我们现在的工作只涉及前端&＃xff0c;按理说任意一个浏览器都能展现出我们上面的折线图。理想情况下&＃xff0c;我们只需要把静态文件拷贝到服务器上就能实现需要的效果。
要达成上述目的&＃xff0c;我们只需要运行npm run build即可。在项目根目录下会生成一个dist文件夹。即使不开启本地服务器&＃xff0c;我们双击index.html也可以获得需要的效果。

五、可能存在的问题

在实际复现上述代码时&＃xff0c;可能会出现一系列的问题。下面我列举若干问题&＃xff0c;如果您发现还有其它问题&＃xff0c;可以在本文下方留言。
首先可能出现的问题是环境安装问题&＃xff0c;通常这些问题都是路径问题或者依赖版本问题。这里列举几个常见的问题以及处理方法。
1、Error: Cannot find module &＃39;webpack-cli/bin/config-yargs’
对于这个问题&＃xff0c;直接把node_modules文件夹删除&＃xff0c;再重新安装一下依赖即可&＃xff08;命令为npm i&＃xff09;。
2、Error: Cannot find module &＃39;webpack&＃39;
出现这个问题说明webpack没有安装好&＃xff0c;需要重新安装&＃xff0c;命令为&＃xff1a;

npm install --save-dev webpack


3、Vue 项目启动webpack服务器报错&＃xff1a; webpack-dev-server: command not found
运行npm i可以解决这个问题。
4、This relative module was not found
出现这个问题说明文件&＃xff08;myChart.js&＃xff09;的位置没有放对&＃xff0c;前文提过&＃xff0c;组件代码要放在src文件夹下。
5、Expected indentation of 2 spaces but found 4
执行npm run dev时&＃xff0c;可能会报如上错误。其实不用理会这个问题&＃xff0c;程序照样运行。如果非要解决这个问题&＃xff0c;可以到.eslintrc.js这个文件中找到rules列表&＃xff0c;添加&＃39;indent&＃39;: [&＃39;off&＃39;, 2]即可。
6、使用npm run build后&＃xff0c;出现Loading failed for the with source “file:///static/等问题。
这个问题与打包时的相对路径设置有关。要解决这个问题&＃xff0c;用户可以到config文件下修改index.js文件。只需要把build下的assetsPublicPath: &＃39;/&＃39;,改成assetsPublicPath: &＃39;./&＃39;即可。注意在同一文件中还有一个dev的assetsPublicPath配置项。注意不要修改错了。
7、vue 出现 Cannot GET / 的问题
在运行npm run dev时出现这个问题说明assetsPublicPath错误&＃xff0c;需要修改config文件夹下面的index.js里面,把dev中的assetsPublicPath: &＃39;./&＃39;改成“assetsPublicPath: &＃39;/&＃39;

六、待改进的部分

至此&＃xff0c;本文的主要内容就介绍完毕了。但是我们不难发现&＃xff0c;打完包后的文件非常大&＃xff0c;这不利于提升用户体验。此外本文仅仅介绍了一个非常简单的例子&＃xff0c;读者可能看得不是特别过瘾。所以在后续文章中&＃xff0c;笔者将一步步介绍ECharts的更深入的使用方法。