yunjie-components

曲线组件、ElementUI深色主题

Remark

需要引入element-ui: ^2.15.8

组件 icon 单独使用 添加属性 class="shenyunjie-icon-dark"

组件 el-dropdown-menu 添加属性 class="shenyunjie-dark"

组件 el-color-picker 添加属性 popper-class="shenyunjie-dark"

组件 el-submenu 添加属性 popper-class="shenyunjie-dark"

组件 el-pagination 添加属性 popper-class="shenyunjie-dark"

组件 el-popover 添加属性 popper-class="shenyunjie-dark"

组件 el-popconfirm 添加属性 popper-class="shenyunjie-dark"

组件 el-cascader 添加属性 :append-to-body="false" 或 popper-class="shenyunjie-dark"

组件 el-date-picker 添加属性 :append-to-body="false" 或 popper-class="shenyunjie-dark"

组件 el-time-select 添加属性 :append-to-body="false" 或 popper-class="shenyunjie-dark"

组件 el-time-picker 添加属性 :append-to-body="false" 或 popper-class="shenyunjie-dark"

组件 el-autocomplete 添加属性 :popper-append-to-body="false" 或 popper-class="shenyunjie-dark"

组件 el-select 添加属性 :popper-append-to-body="false" 或 popper-class="shenyunjie-dark"

组件 el-dialog 二次叠加时，内部dialog 添加属性 custom-class="shenyunjie-dark" 和 :append-to-body="true"

组件 el-drawer 二次叠加时，内部drawer 添加属性 custom-class="shenyunjie-dark" 和 :append-to-body="true"

组件 el-table 使用 filters 自带过滤器时 body 添加属性 class="shenyunjie-dark"

组件 el-table 使用 el-popover 时 body 添加属性 class="shenyunjie-dark"

组件 el-image 使用 预览功能时 body 添加属性 class="shenyunjie-dark"

组件 Message 添加属性 customClass: "shenyunjie-dark"

组件 MessageBox 添加属性 customClass: "shenyunjie-dark"

组件 Notification 添加属性 customClass: "shenyunjie-dark"

组件 Loading 全屏加载遮罩 添加属性 element-loading-custom-class="shenyunjie-dark"

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Installing

npm and webpack

npm install shenyunjie-components

Import all

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import yunjieComponents from "shenyunjie-components";
import "shenyunjie-components/src/theme/elementUI-dark/index.css"

Vue.use(ElementUI).use(yunjieComponents);

Basic Usage

charts

普通曲线

<yun-jie-chart-simple
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :x-data="x轴数据"
  :x-type="x轴数据类型(类目轴:category,时间轴:time)"
  :y-data="y轴数据"
  :y-type="曲线类型(曲线:line,柱状图:bar)"
  :tooltip="数据提示框(显示:true,隐藏:false)"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-simple>

曲线叠加

<yun-jie-chart-multicurve
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :x-type="x轴数据类型(类目轴:category,时间轴:time)"
  :x-data="x轴数据"
  :y-data="y轴数据"
  :symbol="曲线数据点(显示:true,隐藏:false)"
  :tooltip="数据提示框(显示:true,隐藏:false)"
  :x-label-format="x轴标签格式"
  :tooltip-format="提示框x轴格式"
  :data-zoom="数据缩放"
  :sampling="大数据渲染优化"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-multicurve>

频谱

<yun-jie-chart-spectrum
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :frequency="主频"
  :amplitude="幅值"
  :x-data="x轴数据"
  :y-data="y轴数据"
  :unit="y轴单位"
  :tooltip="数据提示框(显示:true,隐藏:false)"
  :precision="小数精度"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-spectrum>

饼图

<yun-jie-chart-pie
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :value="数据"
  :pattern="饼图类型"
  :tooltip="数据提示框(显示:true,隐藏:false)"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-pie>

水滴图

<yun-jie-chart-water-drop
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :value="百分比(小数)"
  :font-size="字体大小"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-water-drop>

温湿度计1.0

<yun-jie-chart-thermometer-e
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :pattern="类型(温度:temperature,湿度:humidity)"
  :value="数值"
  :change-colour="颜色随数值变化"
  :size="图形大小"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-thermometer-e>

温湿度计2.0

<yun-jie-chart-thermometer-h
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :pattern="类型(温度:temperature,湿度:humidity)"
  :value="数值"
  :change-colour="颜色随数值变化"
  :size="图形大小"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-thermometer-h>

水平仪

<yun-jie-chart-gradienter
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :value="倾斜角度"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-gradienter>

电池电量

<yun-jie-chart-battery
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :value="剩余电量"
  :pattern="展示类型(1,2,3)"
  :tooltip="数据提示框(显示:true,隐藏:false)"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-battery>

仪表盘

<yun-jie-chart-dashboard
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :value="数值"
  :min="量程最小值"
  :max="量程最大值"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-dashboard>

大气压强

<yun-jie-chart-atmos
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :atmos="标准大气压"
  :value="压强(kPa)"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-atmos>

风速/风向

<yun-jie-chart-wind
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :x-data="x轴数据"
  :y-data="y轴数据[风速,风向]"
  :unit="风速单位"
  :grade="显示风力等级"
  :alarm="显示风力报警"
  :origin-north="风向正北角度"
  :direction="风向角度换算为方位"
  :direction-icon="显示风向图标"
  :tooltip="数据提示框(显示:true,隐藏:false)"
  :data-zoom="数据缩放"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-wind>

风向罗盘

<yun-jie-chart-wind-compass
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :value="[风速,风向]"
  :unit="风速单位"
  :grade="显示风力等级"
  :alarm="显示风力报警"
  :origin-north="风向正北角度"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-wind-compass>

穹顶沉降

<yun-jie-chart-dome-settlement
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :value="平面模式:[[x,y],...],三维模式:[{name: 监测点, value: [x,y,z]},...]"
  :x="x坐标名称"
  :y="y坐标名称"
  :z="z坐标名称"
  :unit="数据单位"
  :s-type="曲线类型(平面:plane,三维:3D)"
  :time-type="时间类型(实时:realtime,历史:history)"
  :tooltip="数据提示框(显示:true,隐藏:false)"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-dome-settlement>

3D动点图

<yun-jie-chart-moving-point
  :id="唯一标识"
  :theme="曲线主题(标准模式:standard,深色模式:darkness)"
  :title="曲线标题"
  :value="[x,y,z]"
  :range="坐标轴量程"
  :unit="数据单位"
  :load-chart="首次曲线加载"
  :option="自定义配置参数"
  :update-option="参数初始化后回调"
>
</yun-jie-chart-moving-point>

详见：git仓库中：image