安装vue依赖项

使用国家预防机制

Npm安装echarts节省使用纱线

纱加echarts采用国内淘宝形象：

//安装淘宝镜像npminstall-gcnpm-registry=https://registry.npm.taobao.org//download cnpm从淘宝镜像安装echart-S并导入echart

安装的ECharts将被放在node_modules目录中。

介绍所有人

1.直接在项目代码中引入

您可以通过在项目代码中要求(' echart ')来直接获得echart。声明一个echarts变量并直接使用它。

主页使用的页面

//引入var echart=required(' echart ')；//根据准备好的dom，初始化echarts实例var mychart=ecarts . init(document . getelementbyid(' main '))；//绘制图表my chart . setoption({ title : { text : ' e charts introduction example ' }，tooltip : {}，xaxis 3360 {data : ['衬衫'，'毛衣'，'雪纺衬衫'，'长裤'，'高跟鞋'，')。Yaxis : {}，系列： [{name : '销量'，type :' bar '，data : [5，20，36，10，10，20]}])；2.全球简介

在mian.js中全局引入，在vue.prototype属性中添加echart属性为$ echarts，这个可以用这个。$echarts在代码中。

main.js

//从‘echart’vue . prototype导入echart . $ echart=要使用的echartshome.vue//Page。/基于准备好的dom，初始化eCharts实例varmychart=this。$ echart . init(document . getelementbyid(' main '))；//绘制图表my chart . setoption({ title : { text : ' e charts introduction example ' }，tooltip : {}，xaxis 3360 {data : ['衬衫'，'毛衣'，'雪纺衬衫'，'长裤'，'高跟鞋'，')。Yaxis : {}，系列： [{name : '销量'，type :' bar '，data : [5，20，36，10，10，20]}])；3.操作结果

按需引入

默认情况下，require(' echart ')用于获取加载了所有图表和组件的echart包，因此体积会相对较大。如果项目中对体积要求严格，只需根据需要引入所需模块即可。

如果只使用直方图、提示框和标题组件，只需要引入这些模块，就可以有效地将打包量从400 KB以上降低到170 KB以上。

引入后，其使用方式与全局引入相同。

1.直接在项目代码中引入

Home.vue

//介绍ecarts var ecarts=require(' ecarts/lib/ecarts ')的主要模块；//引入直方图要求(' echart/lib/chart/bar ')；//引入提示框和标题组件require(' e charts/lib/component/tooltip ')；要求(' echart/lib/component/title ')；2.全球简介

main.js

从“echart/lib/echart”导入*作为echart；//介绍echarts主模块。导入' echarts/lib/echarts'//导入' e charts/lib/chart/bar '//导入' e charts/lib/chart/pie '///导入提示框组件、标题组件、工具箱和图例组件。import ' echart/lib/component/tooltip ' import ' echart/lib/component/title ' import ' echart/lib/component/toolbox ' import ' echart/lib/component/legend ' vue . prototype . $ echart=echart；注意

问题：

在上面的例子中，我们获取dom的方式是通过document.getElementById('main ')，也就是元素的Id，这会导致问题。

代码如下

Div id=' main'/div this。$ echart . init(document . getelementbyid(' main ')由于vue是单页应用程序，如果上述组件使用两次，一页中的id不允许相同，第一个组件会正常显示，但第二个组件不会显示。

变通方法：

在vue，我们可以用另一种方式得到dom。vue有一个$ refs的对象，只要该组件注册为ref。

代码如下

Div ref=' main'/div this。$ echarts.init(这。$ refs.main)或此。$ echarts.init(这。$ refs ['main'])通过上述方法获取dom，无论组件被重用多少次，都不需要担心唯一id。