breeze-suixin v2.2.1

安装

$ 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" // 图表是否设置事件,配合注册类型时的事件功能使用
/>

数据格式

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

{
  "code": 1, // 接口返回的标识，1：成功，0：失败 ...
  "message": "message", // 接口返回的提示信息
  "data": {  // 接口返回的实际数据
    "text": []/"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"
  }
}

特殊类型配置

柱状图：bar4 类型
为了更改图表的背景配置，
{
  series: [
    {},
    {},
    ...,
    {
      bg: true,
      itemStyle: {
        color: "#00ff00"
      }
    }
  ]
}
请在自定义 series 字段的最后一项且只能是最后一项数据中加入 bg:true 配置用来指定当前项为背景配置项

或
{
  series: {
    bg: true,
    itemStyle: {
      color: "#00ff00"
    }
  }
}

请在自定义 series 字段的配置中加入 bg:true 来指定当前为背景配置项