图表

起步

声明：

1. 这些图表依赖于ECharts
2. 理论上支持ECharts的所有图表
3. 此组件库的目的在于快速提供常见的图表，免于从零开始的各种配置麻烦
4. 支持自定义，请参照自定义图表
5. 为了更好的性能，这些组件默认使用svg渲染

使用：

1. 如果还没有下载haru-ui, 请使用以下语句安装：

npm install haru-ui --save

注意

• 使用这些图表组件需要依赖ECharts
• 而且<ha-scatter-reg>还需要额外依赖echarts-stat

2. 引入：

• 引入全部图表

import HaCharts from 'haru-ui/dist/ha-charts'

Vue.use(HaCharts) // 注册所有图表，所有图表已经实现异步加载

• 按需引入单个图表

警告

• 单组件引入时引用的是源码， 故在打包时需要支持vue和sass，以及vue的jsx语法的编译
• 本组件库使用webpack打包编译

// 图表组件名如下表所示
import 图表组件名(PascalCase) from 'haru-ui/lib/charts/图表组件名(kebab-case)' 

Vue.use(图表组件名(PascalCase))

• 可选图表组件名：

图表组件名	图表组件名	图表组件名
HaLineCate	HaLineTime	HaBarCate
HaPie	HaScatterReg	HaCustomChart

3. 使用：

<使用容器包裹，例如ha-rectangle> 
 <ha-line-cate 传入prop></ha-line-cate>
</ha-rectangle>

注意：

所有图表组件的默认宽高都为100%，使用时请包裹一个具有实际宽高的容器

<ha-line-cate>

• 简介：

  简单的类目折线图

• props:

  • title

    1. 图表名称
    2. 类型为String
    3. 默认值为'category-line-chart'

  • theme

    1. 图表的主题
    2. 类型为String
    3. 默认为'shine'
    4. 使用主题， 参加使用主题

  • xAxis

    1. x轴的标签
    2. 类型为Object
    3. 此对象的默认值及示例如下：

    {
      name: 'xName',
      data: ['x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'x7']
    }
    

  • yAxis

    1. y轴的名字
    2. 类型为String
    3. 默认为'yName'
    4. y轴在此组件中被设置为数值轴， 不提供修改prop，如有需要， 请参见自定义图表

  • pType

    1. 鼠标放置时的样式
    2. 类型为String
    3. 默认值为'line'
    4. 可选值有：'line', 'cross', 'shadow', 'none'

  • smooth

    1. 设置折线是否平滑
    2. 类型为Boolean
    3. 默认为false

  • series

    1. 所要展示的折线数组
    2. 类型为Array
    3. 这个数组的length表示折线的数量
    4. 这个数组的每个成员为一个对象
    5. 此对象表示每条折线
    6. 此对象的示例如下：

    {
      name: 'legend1', //折线的name
      data: [120, 132, 101, 134, 90, 230, 210] //折线的数据
    },
    

    7. 该数组默认值为：

    [
      {
        name: 'legend1',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'legend2',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'legend3',
        data: [150, 232, 201, 154, 190, 330, 410]
      }
    ]
    

  • setChart

    1. 用来设置图表实例的函数
    2. 类型为Function
    3. 此函数有一个参数，表示此图表的实例对象
    4. 该实例对象参见EChart:echartsInstance
    5. 默认值为：

    function(Chart) { // 参数 Chart 为此图表的实例对象
      return false
    } 
    

• 实例：

代码：

<ha-line-cate></ha-line-cate>

结果：

<ha-line-time>

• 简介：

  简单的时间折线图

• props:

  • title

    1. 图表名称
    2. 类型为String
    3. 默认值为'time-line-chart'

  • theme

    1. 图表的主题
    2. 类型为String
    3. 默认为'shine'
    4. 使用主题， 参加使用主题

  • yAxis

    1. y轴的名字
    2. 类型为String
    3. 默认为'yName'
    4. y轴在此组件中被设置为数值轴， 不提供修改prop，如有需要， 请参见自定义图表

  • pType

    1. 鼠标放置时的样式
    2. 类型为String
    3. 默认值为'cross'
    4. 可选值有：'line', 'cross', 'shadow', 'none'

  • smooth

    1. 设置折线是否平滑
    2. 类型为Boolean
    3. 默认为false

  • series

    1. 所要展示的折线数组
    2. 类型为Array
    3. 这个数组的length表示折线的数量
    4. 这个数组的每个成员为一个对象
    5. 此对象表示每条折线
    6. 此对象的示例如下：

    {
      name: 'legend1', // 必需，折线的legend
      data: [ //必需，折线的数据
        {
          name: new Date().toString() // 可选， 每个数据的名字
          value: [
            [
              now.getFullYear(),
              now.getMonth(), 
              now.getDate()
            ].join('/'), // 必需，1998/08/31等等时间格式的字符串,用来表示x轴的位置
            1000 // 必需，y轴的数值
          ] 
        }
      ] 
    },
    

  • setChart

    1. 用来设置图表实例的函数
    2. 类型为Function
    3. 此函数有一个参数，表示此图表的实例对象
    4. 该实例对象参见EChart:echartsInstance
    5. 默认值为：

    function(Chart) { // 参数 Chart 为此图表的实例对象
      return false
    } 
    

• 实例：

代码：

<ha-line-time></ha-line-time>

结果：

<ha-bar-cate>

• 简介：

  简单的类目柱状图

• props:

  • title

    1. 图表名称
    2. 类型为String
    3. 默认值为'category-bar-chart'

  • theme

    1. 图表的主题
    2. 类型为String
    3. 默认为'shine'
    4. 使用主题， 参加使用主题

  • xAxis

    1. x轴的标签
    2. 类型为Object
    3. 此对象的默认值及示例如下：

    {
      name: 'xName',
      data: ['x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'x7']
    }
    

  • yAxis

    1. y轴的名字
    2. 类型为String
    3. 默认为'yName'
    4. y轴在此组件中被设置为数值轴， 不提供修改prop，如有需要， 请参见自定义图表

  • pType

    1. 鼠标放置时的样式
    2. 类型为String
    3. 默认值为'shadow'
    4. 可选值有：'line', 'cross', 'shadow', 'none'

  • hor

    1. 设置是否横向显示，即x轴和y轴交换
    2. 类型为Boolean
    3. 默认值为false

  • series

    1. 所要展示的折线数组
    2. 类型为Array
    3. 这个数组的length表示折线的数量
    4. 这个数组的每个成员为一个对象
    5. 此对象表示每条折线
    6. 此对象的示例如下：

    {
      name: 'legend1', //折线的name
      data: [120, 132, 101, 134, 90, 230, 210] //折线的数据
    }
    

    7. 该数组默认值为：

    [
      {
        name: 'legend1',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'legend2',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'legend3',
        data: [150, 232, 201, 154, 190, 330, 410]
      }
    ]
    

  • setChart

    1. 用来设置图表实例的函数
    2. 类型为Function
    3. 此函数有一个参数，表示此图表的实例对象
    4. 该实例对象参见EChart:echartsInstance
    5. 默认值为：

    function(Chart) { // 参数 Chart 为此图表的实例对象
      return false
    } 
    

• 实例：

代码：

<ha-bar-cate :hor="true"></ha-bar-cate>

结果：

<ha-pie>

• 简介：

  简单的饼图

• props:

  • title

    1. 图表名称
    2. 类型为String
    3. 默认值为'pie-chart'

  • theme

    1. 图表的主题
    2. 类型为String
    3. 默认为'shine'
    4. 使用主题， 参加使用主题

  • roseType

    1. 设置是否为南丁格尔图（玫瑰图）
    2. 类型为String
    3. 默认值为undefined
    4. 可选值为'radius'或者'area'
    5. 当值为'radius'时， 同时使用角度和半径长度（即面积）表示每项大小
    6. 当值为'area'时， 使用半径长度（即面积）表示每项大小

  • itemColor

    1. 设置每个项目的颜色
    2. 类型为String
    3. 值为表示颜色的字符串(常见的颜色名词和16进制的颜色值)
    4. 默认为undefined

  • series

    1. 所要展示的数据对象
    2. 类型为Object
    3. 此对象的示例及默认值如下：

    {
      name: 'legend1',
      data: [
          {value: 335, name: 'name1'},
          {value: 110, name: 'name2'},
          {value: 203, name: 'name3'},
          {value: 275, name: 'name4'},
          {value: 400, name: 'name5'}
      ].sort(function (a, b) { return (a.value - b.value) })
    }
    

  • setChart

    1. 用来设置图表实例的函数
    2. 类型为Function
    3. 此函数有一个参数，表示此图表的实例对象
    4. 该实例对象参见EChart:echartsInstance
    5. 默认值为：

    function(Chart) { // 参数 Chart 为此图表的实例对象
      return false
    } 
    

• 实例：

代码：

<ha-pie theme="dark" roseType="radius" itemColor="red"></ha-pie>

结果：

<ha-scatter-reg>

• 简介：

  简单的饼图

• props:

  • title

    1. 图表名称
    2. 类型为String
    3. 默认值为'scatter-reg-chart'

  • theme

    1. 图表的主题
    2. 类型为String
    3. 默认为'shine'
    4. 使用主题， 参加使用主题

  • regMethod

    1. 设置回归方法
    2. 类型为String
    3. 默认值为'polynomial'
    4. 可选值为'linear','polynomial','logarithmic','exponential'

  • order

    1. 设置多项式的阶数
    2. 只有在名为regMethod的prop设置为'polynomial'才有效
    3. 类型为Number
    4. 默认为1

  • series

    1. 所要展示的数据对象
    2. 类型为Object
    3. 此对象的示例及默认值如下：

    {
      name: 'legend1',
      data: [
        [10.0, 8.04],
        [8.0, 6.95],
        [13.0, 7.58],
        [9.0, 8.81],
        [11.0, 8.33],
        [14.0, 9.96],
        [6.0, 7.24],
        [4.0, 4.26],
        [12.0, 10.84],
        [7.0, 4.82],
        [5.0, 5.68]  
      ]
    }
    

  • setChart

    1. 用来设置图表实例的函数
    2. 类型为Function
    3. 此函数有一个参数，表示此图表的实例对象
    4. 该实例对象参见EChart:echartsInstance
    5. 默认值为：

    function(Chart) { // 参数 Chart 为此图表的实例对象
      return false
    } 
    

• 实例：

代码：

<ha-scatter-reg :order="2" regMethod="polynomial"></ha-scatter-reg>

结果：

自定义图表

• 请使用以下组件进行自定义

<ha-custom-chart>

• 简介：

  自定义图表所用组件，理论上支持ECharts的所有图表

• props:

  • theme

    1. 图表的主题
    2. 类型为String
    3. 默认为'shine'
    4. 使用主题， 参加使用主题

  • option

    1. 图表的配置项
    2. 详情参见ECharts:option

  • setChart

    1. 用来设置图表实例的函数
    2. 类型为Function
    3. 此函数有一个参数，表示此图表的实例对象
    4. 该实例对象参见EChart:echartsInstance
    5. 默认值为：

    function(Chart) { // 参数 Chart 为此图表的实例对象
      return false
    } 
    

使用主题

提示

默认主题为shine

官方主题

官方默认主题已下载内置，使用如下：

1. 引入主题文件:

import 'haru-ui/charts/theme/主题名'

提示

主题名dark不需要引入，官方默认引入

2. 在图表组件名为theme的prop中传入'主题名':

<ha-line-cate theme="主题名"></ha-line-cate>

提示

主题名shine不需要设置， 这是默认值

3. 可选主题名如下：

主题名	主题名	主题名	主题名	主题名
dark	vintage	macarons	infographic	roma

自定义主题

1. 在这里下载自定义主题
2. 引入主题文件
3. 设置名为theme的prop为自定义主题名