aile-chart v0.1.1

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]) 的方式配置参数，具体参数如下：

Attributes/Props 属性

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

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"
/>