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

Posted 2023-03-12

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

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

Echarts  步骤：

一、安装插件

        cnpm install echarts -D

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

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

import echarts from 'echarts'

也可以在main.js中引入，然后修改原型链

Vue.prototype.$echarts = echarts

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

let mychart = this.$echarts.init(document.getElementById('mychart'))

二、创建图表

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

数据导入

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

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

二、按需引入

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

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

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

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

可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js

继续引出问题：在echarts中图表宽高如果不写，那么就相当于作死，所以nozuonodie，所以：

三、适应容器

let chartBox = document.getElementsByClassName('charts')[0]

let myChart = document.getElementById('myChart')

// 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽

function resizeCharts ()

  myChart.style.width = chartBox.style.width + 'px'

  myChart.style.height = chartBox.style.height + 'px'



// 设置容器高宽

resizeCharts()

let mainChart = echarts.init(myChart)

mainChart.setOption(options)

四、扩展

可以把这个案例模块化，设计成一个可复用组件，只需传入id、options既可完成图表渲染

参考案例：https://www.2cto.com/kf/201707/660054.html

刚好，参考案例中用的是highcharts