物化介绍与安装

物化简介

物化是一款快速构建数据可视化应用的工具，基于Vue.js和Element UI构建而成，具有易用性和高度的可扩展性。它不仅可以直接使用已经构建好的组件，还可以轻松地自定义和扩展现有的组件，使得开发数据可视化应用的过程更加轻松和高效。

物化特点

• 支持图表、表格、地图等丰富的可视化组件
• 高度可定制化，可扩展
• 易于使用，可通过简单的 JSON 配置文件即可构建可视化界面
• 兼容性强，可以和多种数据源进行交互

物化安装

前置条件

在安装物化之前，需要先配置好如下环境：

• Node.js（推荐使用 v12.0.0 或更高版本）

安装物化

在命令行中执行以下命令即可安装物化：

npm install @huoban/vis

物化使用

初始化

<template>
  <el-vis :option="option" />
</template>

<script>
import { ElVis } from '@huoban/vis'

export default {
  components: {
    ElVis
  },
  data() {
    return {
      option: {
        // 配置信息
      }
    }
  }
}
</script>

编写配置文件

在 data 中定义配置文件 option，这里以 Bar 折线图为例：

option: {
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval: 0,
      rotate: 30
    }
  },
  yAxis: {},
  series: [
    {
      type: 'bar'
    },
    {
      type: 'bar'
    },
    {
      type: 'bar'
    }
  ]
}

物化扩展

物化支持自定义组件和主题，可以方便的进行组件和主题的扩展。

自定义组件

自定义组件需要继承基类 Component，并实现三个方法：createSeries、updateSeries、destroy。

import Component from '@huoban/vis/lib/component'

class MyComponent extends Component {
  createSeries() {
    // 创建新系列
  }

  updateSeries() {
    // 更新已有系列
  }

  destroy() {
    // 销毁
  }
}

自定义主题

自定义主题需要继承基类 Theme，并实现三个方法：mergeOption、beforeRender、afterRender。

import Theme from '@huoban/vis/lib/theme'

class MyTheme extends Theme {
  mergeOption(option) {
    // 合并主题配置
  }

  beforeRender(chart) {
    // 渲染前修改图表状态
  }

  afterRender(chart) {
    // 渲染后修图表状态
  }
}