安装

$ npm install --save breeze-suixin 

或

yarn add --save breeze-suixin 

引用

用户注册全局事件或组件

import breeze from 'breeze-suixin'
import 'breeze-suixin/breeze-suixin.css'

单独引用

import {Breeze, BreezeChart} from 'breeze-suixin'

Breeze 基础函数及方法 BreezeChart vue2组件

使用方法

<breeze-chart
  chartType="bar0"  // 类型 *必传

  :chartCustom="{echarts配置}" // 自定义配置

  // 数据的赋值 二选一 实际格式参照 ### 数据格式
  :rawData="{}" // 数据格式
  :loadData="()=>{return new Promsize()}" // Promise

  :formatData="function(){}" // 图表类中的格式化数据函数
  :setEvent="function(){}" // 图表类中的设置事件函数

  :isSetEvent="Boolean" // 图表是否设置事件,配合注册类型时的事件功能使用
/>

组件属性

| 属性名 | 类型 | 默认值 | 描述 | |--------|------|--------|------| | chartType | String | 'default' | 图表类型，决定渲染哪种图表 | | rawData | Object | null | 图表数据源 | | chartCustom | Object | null | 图表个性化配置 | | chartOption | Object | null | 直接配置图表参数 |

支持的图表类型

BreezeChart 支持以下图表类型：

• 柱状图 (bar0, bar1, bar2, bar3, bar4, bar5, bar6, bar7)
• 折线图 (line0, line1, line2, line3, line4, line5, line6, line7, line8, line9)
• 饼图 (pie0, pie1, pie2, pie3, pie4, pie5, pie6, pie7, pie9)
• 雷达图 (radar0)
• 漏斗图 (funnel0, funnel1)
• 热力图 (treeMap0)

数据格式

1.折线图 2.饼图 3.柱图 4.雷达图 5.漏斗图 6.仪表盘 这几项图表的简单样式数据格式如下，（ 复杂样式在注册时要实现对应的格式化数据方法 ）

{
  "code": 1, // 接口返回的标识，1：成功，0：失败 ...
  "message": "message", // 接口返回的提示信息
  "data": {  // 接口返回的实际数据
    /**
      * text 为图表展示的标题（仅当实际的配置项或自定义配置项存在时，优先自定义配置项中的设置生效，生效规则breezeConfig.js中饼状图类型的setTitleInfo函数）
      * 1.当text的数据只有一个项时，text的数据会被赋给echarts的title.text
      * 2.当text的数据为数组时，text的第一个数据会被赋给echarts的title.text，第二个数据会被赋给echarts的title.subtext，其他的无意义
      * 3.当text的值或数组的第一个值为'%'时，则title.text值为chartData.source的第一个数据占总数的百分比，为total时，则title.text值为chartData.source的所有数据总和，如果为null/undefined/''时，则越过这项设置
      * */
    "text": []/"String", // 提示内容，多项为数组、单项为字符串
    "subtext": "String", // 副标题提示内容
    "chartData": {
      // 传入错误时，提示 数据格式错误
      "dimensions": [], // 维度，
      // 传入错误时，提示 数据格式错误
      "source": [
        {
          "name": "单项数据名称", // 类型 
          "data": [] // 此类型下每个维度对应的数据
        },
        ...
        {
          "name": "单项数据名称", // 类型 
          "data": [] // 此类型下每个维度对应的数据
        }
      ]
    }
  }
}

2.组件新提供 this.$refs."组件的ref".getConfig("对应类型").drawCanvas() 用于放回类型的原始配置，在自定义配置时使用

示例
类型：pie9
rawData: {
  "code": 1,
  "message": "成功",
  "data": {
    "text": "告警总数",
    "chartData": {
      "dimensions": [
        {
          "name": "省份",
          "data": ["黑龙江", "辽宁"]
        },
        {
          "name": "地市",
          "data": ["哈尔滨", "大庆", "佳木斯", "沈阳", "铁岭"],
          "legend": true
        }
      ],
      "source": [
        {
          "name": "省份总数",
          "data": [8, 3]
        },
        {
          "name": "地市数",
          "data": [4, 2, 2, 2, 1]
        },
      ]
    }
  }
}
chartCustom : {
  "title": [{
    "show": false,
    "text": 60,
    "subtext": "自定义",
  }],
  "legend": {
    "orient": "vertical",
    "right": 0,
    "top": "center",
    "itemWidth": 8,
    "itemHeight": 8,
    "icon": "circle"
  }
}