vue-cli项目中使用的电子海图示例

我们经常需要用到一些折线图、直方图、饼图等。在项目中。我们之前用的是heightCharts，后来觉得这个产品不是开源的，但是展示出来就是浪费时间。所以我们阅读了echart，所以我们在vue-cli构建的项目中添加了echart。以下是具体步骤和一些学习笔记。参考Echarts3官方网站。

如今，前端通常需要可视化大量数据。现在是大数据和云计算的时代，所以数据可视化逐渐成为一种趋势。而ECharts和d3.js是成熟的可视化框架。对于制作图表，可以说是满足了你的创造力。

与两者相比，D3被许多其他形式的插件使用。它允许将任意数据绑定到DOM，然后将数据驱动的转换应用到Document。您可以使用它来创建带有数组的基本HTML表，或者使用它的过度流畅和交互来创建具有相似数据的惊人的SVG条形图。

echart图表更适合应用，外套华丽，但很实用。

安装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

//从“电子图表”导入电子图表。原型。$电子图表=要使用的echartshome.vue//the页面

//初始化echarts实例var mychart=this。$ eCharts。基于准备好的dom的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。