v-echarts组件在Vue中如何使用

5,056 阅读9分钟

介绍

基于 Vue2.0 和 echarts 封装的 v-charts图表组件

只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。

npm安装

npm i v-charts echarts -S

vue中引入使用

1.完整引入(使用过)

直接在main.js中引入,之后就可以在index.vue页面中直接引入

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'

Vue.use(VCharts)

new Vue({
  el: '#app',
  render: h => h(App)
})

2.按需引入(该方法没有尝试)

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  -------------- 高德地图

在main.js中引入后,可以直接将单个图表引入到项目中的index.vue页面

import Vue from 'vue'
import VeLine from 'v-charts/lib/line.common'
import App from './App.vue'

Vue.component(VeLine.name, VeLine)

new Vue({
  el: '#app',
  render: h => h(App)
})

在项目中使用的基本配置

官方案例是直接在template中使用,使用v-指令+图标名称

<ve-line :data="chartData" width="100px" :events="chartEvents"></ve-line>

本人使用的是pug模板,所以引入方式如下

ve-line.echarts(height="heightElectric" // 设置canvas高度
              :after-set-option="getConfig" // 设置钩子函数
              :data="chartData" // 设置图标展示的数据
              :extend="chartExtend" // 设置标识元素的属性
              :loading="loading" // 设置数据未加载的等待状态
              :settings="chartSettings" // 设置数据类型相关的属性
              :colors="color") // 设置图表展示颜色和样式

echarts的属性实在太多,这里就只写一下使用过的一些基本属性,具体的属性可以看

echarts官网的api文档

v-echarts的api文档

文档写的还是很全的,基本的使用场景都能覆盖

1.data属性的设置

方式一.基本的使用

这是使用当前数据格式的折线图

其他类型的统计图的数据格式都是一样的,格式都是标题colums和 数据rows

{
  columns: ['日期', '访问用户', '下单用户'],
  rows: [
    { '日期': '2018-05-22', '访问用户': 32371, '下单用户': 19810 },
    { '日期': '2018-05-23', '访问用户': 12328, '下单用户': 4398 },
    { '日期': '2018-05-24', '访问用户': 92381, '下单用户': 52910 }
  ]
}

方式二.设置别名的使用

实际项目中,肯定不会使用中文来当字段名,返回的是英文字段,但是我们又想展示的时候用中文展示标题,这个时候就需要在settings里面设置别名,代码如下

<template>
  <ve-line :data="chartData" :settings="chartSettings"></ve-line>
</template>
<script>
  export default {
    data () {
      this.chartSettings = {
        labelMap: {
          PV: '访问用户',
          Order: '下单用户'
        }
      }
      return {
        chartData: {
          columns: ['date', 'PV', 'Order'],
          rows: [
            { 'date': '2018-05-22', 'PV': 32371, 'Order': 19810 },
            { 'date': '2018-05-23', 'PV': 12328, 'Order': 4398 },
            { 'date': '2018-05-24', 'PV': 92381, 'Order': 52910 }
          ]
        }
      }
    }
  }

我们看下效果

如果是单个数据的统计图,colums只需要传一组数据,rows也只需要传一组数据就行

2.extends属性的设置

我们看下基本的属性配置

配置项 简介 类型 备注
dimension 维度 string 默认 columns[0]
metrics 指标 array 默认 [columns[0], columns[1]]
dataType 数据类型 object -
xAxisType x轴类型 string 可选值: category, value, time, log
xAxisName x轴标题 string -
yAxisName y轴标题 string -
digit 设置数据类型为percent时保留的位数 number 默认为2
labelMap 设置指标的别名 object -
legendName 设置图表上方图例的别名 object -
tooltipTrigger 提示框的触发方式 string 可选值: item, axis
axisVisible 是否显示坐标轴 boolean -
symbolSizeMax 气泡最大值 number 默认为50
symbol 标记的图形 string 内容参考文档
symbolSize 标记的大小 number, array, Function 内容参考文档
symbolRotate 标记的旋转角度 number 内容参考文档
symbolOffset 标记相对于原本位置的偏移 array 内容参考文档
cursor 鼠标悬浮时在图形元素上时鼠标的样式 string 内容参考文档
scale 是否是脱离 0 值比例 boolean -
min y轴最小值 number -
max y轴最大值 number -

2.1 双y轴的extend属性设置

this.chartExtend = {
        tooltip: { // 修改提示框样式
          trigger: 'axis',
          formatter: function(params){ // 自定义X轴坐标点对应的label
            return params[0].axisValue + "</br>" +
              "<div style='float: left'> "+ params[0].seriesName +":"+ params[0].data[1] + "V" +"</div>" +
              "</br><div style='float: left'> "+ params[1].seriesName +":"+ params[1].data[1] + "A" +"</div>";
          },
        },
        series: {},
        axisVisible: false, // 是否显示坐标轴
        scale: [true],
        legend: { // 标题的展示位置
          left: 'right',
          show: true,
          textStyle: { // 标题的颜色
            color: 'white'
          }
        },
        xAxis: {// x轴设置
          boundaryGap: false, // 是否贴边显示图表
          axisLabel: {
            color: 'white'
          }
        },
        yAxis (item) { // 因为是双轴,所以需要指定双轴的y轴样式
          item[0].splitLine = Object.assign ({}, {
            lineStyle: { // 左y轴的颜色
              color: ['#3755DA'],
            }
          });
          item[0].axisLabel = Object.assign ({}, { // 左y轴的颜色 间隔线颜色
            color: 'white'
          });
          item[0].nameTextStyle = Object.assign ({}, { // 左y轴的文字颜色
            color: 'white',//正常是不用添加
          });
          item[1].splitLine = Object.assign ({}, {
            show: false, // 是否展示右y轴,这是是不展示
            lineStyle: { //右y轴的颜色
              color: ['#3755DA'],
            }
          });
          item[1].axisLabel = Object.assign ({}, { //右y轴的颜色 间隔线颜色
            color: 'white'
          });
          item[1].nameTextStyle = Object.assign ({}, { //右y轴的文字颜色
            color: 'white',//正常是不用添加
          });
          return item
        },
        grid: { // 设置图表在canvas画布的位置
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '2%',
        },
      }

3.settings属性的设置

setting的基本属性

配置项 简介 类型 备注
dimension 维度 array 默认columns第一项为维度
metrics 指标 array 默认columns第二项起为指标
xAxisType 横轴的数据类型 string 可选值: category, value, time, log
yAxisType 左右坐标轴数据类型 array 可选值: KMB, normal, percent
yAxisName 左右坐标轴标题 array -
axisSite 指标所在的轴 object 默认不在right轴的指标都在left轴
stack 堆叠选项 object -
area 是否展示为面积图 boolean 默认为false
scale 是否是脱离 0 值比例 array 默认为[false, false],表示左右
两个轴都不会脱离0值比例。
设置成 true 后坐标刻度不会
强制包含零刻度
min 左右坐标轴最小值 array -
max 左右坐标轴最大值 array -
digit 设置数据类型为percent时保留的位数 number 默认为2
labelMap 设置指标的别名,同时作用于提示框和图例 object -
legendName 设置图表上方图例的别名 object -

3.1 双y轴的setting设置

this.chartSettings = {
        labelMap: {
          PV: '访问用户',
          Order: '下单用户'
        },
        axisSite: { // 指定右y轴的数据源
            right: ['Order'] 
        },
      }
      return {
        chartData: {
          columns: ['date', 'PV', 'Order'],
          rows: [
            { 'date': '2018-05-22', 'PV': 32371, 'Order': 19810 },
            { 'date': '2018-05-23', 'PV': 12328, 'Order': 4398 },
            { 'date': '2018-05-24', 'PV': 92381, 'Order': 52910 }
          ]
        }
  }

双y轴的堆叠面积图效果如下

4.钩子函数的设置

共有属性中的钩子函数用于在配置项生成过程中进行调整以及获取实例。

配置项 说明 参数
before-config 对数据提前进行额外的处理,
在数据转化为配置项开始前触发
参数为 data,返回值为表格数据
after-config 对生成好的echarts配置进行额外的处理,
在数据转化为配置项结束后触发
参数为 options,返回值为 echarts 配置
after-set-option 生成图之后获取echarts实例 参数为echarts实例
after-set-option-once 生成图后获取echarts实例
(只执行一次)
参数为echarts实例

4.1 设置定时刷新echarts图表

如果你想是一个如图一样的效果怎么办,这个时候就需要用到after-set-option这个钩子函数

我们首先需要写一个定时器用来获取数据,获取完数据之后,就需要用到这个钩子函数来定时刷新图表所在canvas

// template模板内
ve-line.echarts(:after-set-option="getConfig") // 设置钩子函数
// methods钩子函数内
/**
     * 处理刷新后的echarts图表
     * @param e
     */
    getConfig(e) {
      if (this.chartDataElectric.rows.length > 6 ) { // 如果数据长度大于6,则删除第一条数据
        this.chartDataElectric.rows.splice(0,1)
      }
      e.setOption(this.chartDataElectric) //数据获取后,刷新图表
    },

5. 宽度高度自适应

首先父级容器的宽高一定要有,接着使用judge-width属性来控制canvas跟随父级容易变换

div.left
    ve-line.left1-echarts(height="100%"
                          :judge-width="true"
                          :data="chartDataLeft1"
                          :settings="chartSettingsLeft1"
                          :extend="chartExtend1")

效果如下,我们可以看到canvas的宽高跟随父级容器的宽高,在实时变化

6. 自定义饼图数据显示

看下官方的定义的字符串模板

模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。

在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。

不同图表类型下的 {a},{b},{c},{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:

  • 折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

  • 散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)

  • 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)

  • 饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

6-1. 设置富文本

  1. 在extend里面的series属性设置,饼图的设置初始值应该是三个{b},{c},{d}
  2. 设定label的formatter属性,设定rich属性,在里面加入定义好的样式
  3. 设定文本的颜色,边框颜色,边框宽度,边框圆角
  4. 然后设置b,{b}是数据,写入{a|{b}},把rich属性下面的a样式,就是色号,行高,居中方式a 5 接着设置\n 换行后设置c,{c}是数据,写入{aa|{c}} ,就是把rich属性下面的aa样式加入,设置了一个字体大小
  5. 接着设置d,{d}是数据, 写入{per|{d}%},就是把rich属性下面的per样式加入,设置了一个色号,背景,内间距,背景圆角,然后添加了一个'%'作为单位
 series: {
      name: '数值',
      label: {
        formatter: '{a|{b}\n{hr|}\n {aa|{c}} {per|{d}%} ',
        backgroundColor: '#eee',
        borderColor: '#aaa',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#999',
            lineHeight: 22,
            align: 'center'
          },
          // abg: {
          //     backgroundColor: '#333',
          //     width: '100%',
          //     align: 'right',
          //     height: 22,
          //     borderRadius: [4, 4, 0, 0]
          // },
          hr: {
            borderColor: '#aaa',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
          b: {
            fontSize: 10,
            lineHeight: 22
          },
          aa: {
            fontSize: 10,
          },
          per: {
            color: '#eee',
            backgroundColor: '#334455',
            padding: [2, 4],
            borderRadius: 2
          }
        }
      }
},

效果图

6-2. 设置鼠标hover样式

在extend里面的tooltip属性设置

tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
},

或者也可以用formatter回调函数的方式,自定义样式

formatter: function(params){ // 自定义X轴坐标点对应的label
    return params[0].axisValue + "</br>" +
    "<div style='float: left'> "+ params[0].seriesName +":"+ params[0].data[1] + "V" +"</div>" +
    "</br><div style='float: left'> "+ params[1].seriesName +":"+ params[1].data[1] + "A" +"</div>";
},

效果图

参考文章:

v-charts.js