在Vue项目中实现数据可视化 *** 作

        话说最近一直在攻在网上花二十块大洋买的vue音乐播放器项目，收获颇多！对vue项目整体的流程有了更进一步的了解，打算花点空余时间把这个项目再撸几遍，然后转入京东的项目实战中。。。

        实际工作中一直涉及的是数据可视化 *** 作（Echarts、Highcharts），即大量数据图表展示，却独独没有用到丁点儿的vue知识，感觉实在是让人憋得心慌，晚上没事干脆试验一把，如题：在Vue项目中实现数据可视化 *** 作

Echarts  步骤：

一、安装插件

        cnpm install echarts -D

注：echarts 也不能通过 Vueuse() 进行全局调用

所以，通常在需要使用图表的 vue文件中直接引入

import echarts from 'echarts'

也可以在mainjs中引入，然后修改原型链

Vueprototype$echarts = echarts

这样在全局中就可以直接使用了

let mychart = this$echartsinit(documentgetElementById('mychart'))

二、创建图表

        由于一般情况我们会在组件中使用，这里我也贴近实际开发，举的例子就是应用于组件中

数据导入

这样图表就可以在页面中展示出来了

问题：这里引入的 echarts 包含了所有图表，但有时候我们只需要一两个基本图表，这时候完整的 echarts 就显得累赘，所以：

二、按需引入

    // 引入基本模板letecharts = require('echarts/lib/echarts')

  // 引入饼图组件require('echarts/lib/chart/pie')

  // 引入提示框和图例组件require('echarts/lib/component/tooltip')

  require('echarts/lib/component/legend')

可以按需引入的模块列表见 >

vue项目中使用到的echarts折线图，当个别数据差异过大时，又因为echarts所在的容器高度不够高，就会使echarts 出现折线图展示不全。

如下图没修改之前：

经过协调整后进行优化：

设置一个最大的纵轴，超过最大的数据按最达的展示，tooltip按实际数值展示。

我们经常使用Echarts制作各种图表，那么如何运用Echarts制作标准折线图呢？下面我给大家演示一下。

01

首先打开Sublime Text软件，新建一个HTML文档，并在文档中添加如下图所示的HTML结构

02

接下来运用scripts标签在HTML中引入echarts的库文件，如下图所示

03

然后我们在body标签中创建一个div区域用来存放折线图，如下图所示，注意给div设置高度

04

接下来我们通过echarts的init方法对刚才创建的div区域进行初始化，如下图所示

05

然后我们设置折线图的参数，包括X，Y坐标轴数据，折线图标题等信息，如下图所示

06

接下来在series参数中设置折线图所需要的数据，如下图所示，一条折线配置一个大括号

07

参数和数据设置完毕以后我们调用echarts的setOption方法将内容都填充进折线图展示区域，如下图所示

08

最后我们运行HTML文件，就可以看到如下图所示的标准折线图了，点击顶部的折线标题可以隐藏或者显示折线

你就不要使用默认的tooltip了，可以对应写一个label记录值，然后控制它的display：block/none 可以试一下，用一个公有的静态变量存储着这个值，然后触发不显示事件时，把tooltip的值清空。最后鼠标移动到listview时，把这个静态变量赋值给这个to

以上就是关于在Vue项目中实现数据可视化 *** 作全部的内容，包括:在Vue项目中实现数据可视化 *** 作、怎么改变ECharts的canvas的width和height、vue使用echarts数据差距过大导致折线图展示不完全等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！