前端可视化图表展示使用Echarts还是v-charts ｜ 8月更文挑战

2021年08月03日 13:51 · 阅读 1294

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

介绍

Echarts和v-charts都是用来做图形展示的

Echarts功能强大、丰富，但是数据转换很麻烦

v-charts功能较少，但是基本够用，数据简单。

Echarts官网 echarts.apache.org/zh

V-charts官网 v-charts.js.org/#/

v-charts是基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

npm包下载量对比

Echarts

下载

你可以通过以下几种方式获取 Apache ECharts (incubating)TM。

从 Apache ECharts (incubating) 官网下载界面获取官方源码包后构建。
在 ECharts 的 GitHub 获取。
通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
通过 jsDelivr 等 CDN 引入

引入

全局引入

在vue的main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
复制代码

局部引入

在需要使用echarts的组件中引入echarts

import echarts from ‘echarts’;
复制代码

运用

<div id="myChart" ref="myChart" :style="{width: '300px', height: '300px'}"/>
复制代码

静态数据使用js代码

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
         const myChart = echarts.init(this.$refs.myChart)
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}
复制代码

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

显示效果

图片.png

动态引用

Echarts在与后端联调的时候，根据后端返回的数据经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts的出现可以解决这个痛点

v-charts

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

npm安装

npm i v-charts echarts -S
复制代码

引入

全局引入

// 在main中引入 v - charts
import VCharts from 'v-charts'
Vue.use(VCharts)
复制代码

按需引入

v-charts的每种图表组件，都已经单独打包到lib文件夹下了

|- lib/
    |- line.common.js  -------------- 折线图
    |- bar.common.js  --------------- 条形图
    |- histogram.common.js  --------- 柱状图
    |- pie.common.js  --------------- 饼图
    |- ring.common.js  -------------- 环图
    |- funnel.common.js  ------------ 漏斗图
    |- waterfall.common.js  --------- 瀑布图
    |- radar.common.js  ------------- 雷达图
    |- map.common.js  --------------- 地图
    |- sankey.common.js  ------------ 桑基图
    |- heatmap.common.js  ----------- 热力图
    |- scatter.common.js  ----------- 散点图
    |- candle.common.js  ------------ k线图
    |- gauge.common.js  ------------- 仪表盘
    |- tree.common.js  -------------- 树图
    |- bmap.common.js  -------------- 百度地图
    |- amap.common.js  -------------- 高德地图
复制代码

import VeLine from 'v-charts/lib/line.common' //折线图
Vue.component(VeLine.name, VeLine)
复制代码

v-charts 的数据由指标和维度组成。维度类似我们X轴的参数，指标就是我们当前维度我们需要展示的数据，所以注意我们的数据结构。

columns 中是维度和指标的集合，v-charts 中的大部分图表都是单维度多指标，所以默认第一个值为维度，剩余的值为指标
rows 中是数据的集合。

图表的 setting 属性中统一有两个配置：

dimension 用于指定维度
metrics 用于指定指标

给出一个例子

按需引入折线图

<template>
  <ve-line :data="chartData"></ve-line>
</template>

<script>
  export default {
    data: function () {
      return {
        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        }
      }
    }
  }
</script>
复制代码

页面显示效果

动态引入

对于v-charts的使用，在动态引入数据时，基本上不需要做转换数据格式等，按照v-charts官网demo格式数据与后端商量好返回数据类型即可。

v-charts还有个好处是可以做图表切换，也就是一种数据可以用多种图形展示可参考官网v-charts.js.org/#/toggle

结论：v-charts相比Echarts做简单展示还是比较好的，学习成本和前端与后端联调配置成本较低。日常需求常见的一些图表展示使用v-charts即可。

小调研一下，大家在做可视化展示的时候，使用echarts还是v-charts呀？可在评论区回复哦~