Features

aile-chart 是一款运行在 vue 2.x 环境下的 Apache ECharts 5.x 组件，基于 vue-echarts 进行的二次开发

• aile-chart 通过 use 安装插件的方式来实现 echarts 皮肤、地图、默认参数的配置

• aile-chart 无缝对接 echarts 文档板块；

Install 安装

• 通过 npm 或者 yarn 安装项目

npm i aile-chart

# 或者
yarn add aile-chart

Quick Start

• 全局引用（推荐）

// >>> main.js
import Vue from 'vue'

import AileChart from 'aile-chart'
import themeJSON from '@/theme/echarts-theme.js'
import { LineOption, BarOption } from '@/assets/chart-options'

Vue.use(AileChart, {
  notMerge: true,
  autoResize: true,
  defaultTheme: 'red',
  themes: [
    { name: 'red', theme: themeJSON.theme }
  ],
  presets: [
    { name: 'line', option: LineOption },
    { name: 'bar', option: BarOption }
  ]
});

• 组件内引入

import AileChart from 'aile-chart'
export default {
    components: {
        AileChart
    }
}

Global Config 全局配置项

AileChart 支持在 main.js 中使用 Vue.use(AileChart[, option]) 的方式配置参数，具体参数如下：

参数	数据类型	默认值	示例	说明
defaultTheme	String	-	'custom'	默认主题名称
themes	Array	[]	[{ name: 名称string, theme: 内容object, extra: 其他配置object }]	需要注册的主题列表
maps	Array	[]	[{ name: 名称string, map: GeoJson 格式的数据, specialAreas:可选。将地图中的部分区域缩放到合适的位置 }]	需要注册的地图列表，参考 echarts.registerMap
presets	Array	[]	[{ name: 名称string, option: echarts optionobjedt }]	需要预置的配置列表

Attributes/Props 属性

使用方式： <aile-chart preset="red" :option="calcOption" ... />

参数	数据类型	默认值	可选值	说明
preset	String	undefined	-	要使用的默认配置名称,默认配置使用 presets 导入
option	Object	{}	-	chart的配置，可采用官方提供的结构也可使用以“_”开头的结构将与默认参数特殊合并，需配合preset使用
width	String	100%	-	图表宽度
height	String	100%	-	图表高度
theme	String	undefined	-	已经通过 echarts.registerTheme 注册的主题名称
group	String	undefined	-	图表的分组，用于联动
initOptions	Object	{ renderer: 'canvas' }	-	附加参数，用于配置devicePixelRatio，renderer，width，height
group	String	undefined	-	图表的分组，用于联动
watchShallow	Boolean	false	false/true	watch不使用deep属性
manualUpdate	Boolean	false	false/true	手动控制图表更新
notMerge	Boolean	false	false/true	是否不跟之前设置的 option 进行合并
autoResize	Boolean	false	false/true	当尺寸变化时自动重绘

Util Methods 工具方法

getThemeOption

说明

getThemeOption(theme, path) 获取主题配置JSON，该JSON在aile-chart注册时设置themes中的theme

参数

• theme(string) 主题名称，必填

• path(string) 属性路径，设置该值则返回主题JSON该路径下的值，否则返回全部

返回值

• (*): 任意值

getExtraOption

说明

getExtraOption(theme, path) 获取主题额外配置的JSON，该JSON在aile-chart注册时设置themes中的extra

参数

• theme(string) 主题名称，必填

• path(string) 属性路径，设置该值则返回主题JSON该路径下的值，否则返回全部

返回值

• (*): 任意值

Usage Example 使用示例

• 预先配置好的 ECharts Option

export default {
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#fff',
    position: 'top',
    textStyle: {
      fontSize: 12,
      color: '#606266',
      align: 'left'
    }
  },
  grid: {
    left: '3%',
    right: '6%',
    top: '3%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: '#efefef',
        width: 1
      }
    },
    axisLabel: {
      color: '#909399',
      showMaxLabel: true,
      textStyle: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei'
      }
    },
    axisTick: { show: false },
  },
  yAxis: {
    type: 'value',
    axisLine: { show: false },
    axisLabel: {
      color: '#909399',
      textStyle: { fontSize: 12 },
      formatter: value => {
        if (value >= 1000) {
          return (value / 1000) + 'K'
        } else {
          return value
        }
      }
    },
    splitLine: { lineStyle: { color: '#ebeef5' } },
    axisTick: { show: false }
  },
  series: [{
    smooth: true,
    symbol: 'circle',
    type: 'line',
    lineStyle: { color: '#5a7acc' }
  }]
}

• main.js 全局引入

import Vue from 'vue';
import AileChart from 'aile-chart';

// 引入预设Option
import LineOption from './chart-options/lineChart';

// 引入 ECharts Theme JSON 文件 （由官网主题生成工具制作）
import redThemeJSON from '@/themes/echarts-archaism.json';
import blueThemeJSON from '@/themes/echarts-business.json';

// 官方主题工具提供的配置如果不够，可以再额外设置 Option JSON
import { redExtra, blueExtra } from '@/themes/echarts-extra-option';

Vue.use(AileChart, {
  notMerge: true,
  autoResize: true,
  theme: 'red'
  themes: [
    { 
      name: redThemeJSON.themeName,
      theme: redThemeJSON.theme,
      extra: redExtra 
    },
    { 
      name: blueThemeJSON.themeName,
      theme: blueThemeJSON.theme,
      extra: blueExtra
    }
  ],
  presets: [
    { name: 'custom-line', option: LineOption }
  ]
});

• 实际使用

/**
 * template使用示例
 */
<aile-chart
  :option="option"
  preset="custom-line"
  theme="blue"
/>