Skip to content

Commit

Permalink
Merge pull request #58 from ElemeFE/1010-add-data-status
Browse files Browse the repository at this point in the history
新增:数据loading, empty状态,slot
  • Loading branch information
西瓜 authored Oct 11, 2017
2 parents c11f403 + 2d93f24 commit 409106d
Show file tree
Hide file tree
Showing 37 changed files with 415 additions and 113 deletions.
7 changes: 6 additions & 1 deletion build/rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ var babel = require('rollup-plugin-babel')
var eslint = require('rollup-plugin-eslint')
var componentInfo = require('../src/component-list')
var uglify = require('rollup-plugin-uglify')
var autoprefixer = require('autoprefixer')
var cssnano = require('cssnano')
var pkg = []
var pkgTypeList = [
{ type: 'cjs', min: false, suffix: '.common.js' },
Expand Down Expand Up @@ -41,12 +43,15 @@ pkg = pkg.concat(addons)
pkg.forEach(item => { rollupFn(item) })

function rollupFn (item) {
const vueSettings = item.min
? { css: 'lib/style.min.css', postcss: [autoprefixer, cssnano] }
: { css: 'lib/style.css', postcss: [autoprefixer] }
var plugins = [
eslint({
throwError: true,
exclude: 'node_modules/**'
}),
vue(),
vue(vueSettings),
resolve({
extensions: ['.js', '.vue']
}),
Expand Down
3 changes: 2 additions & 1 deletion docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<link rel="stylesheet" href="//unpkg.com/[email protected]/lib/theme-default/index.css">
<link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./style.min.css">
<script>
var _hmt = _hmt || [];
(function() {
Expand All @@ -36,6 +37,6 @@
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script src="./v-charts.min.js"></script>
<script src="./index.min.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions docs/index.min.js

Large diffs are not rendered by default.

107 changes: 107 additions & 0 deletions docs/props-demo.md
Original file line number Diff line number Diff line change
Expand Up @@ -278,3 +278,110 @@
}
</script>
</script>

#### 设置加载状态

<vuep template="#set-loading"></vuep>

<script v-pre type="text/x-template" id="set-loading">
<template>
<ve-line
:data="chartData"
:loading="loading">
</ve-line>
</template>

<script>
// 使用loading属性前先引入css
// import 'v-charts/lib/style.css'
module.exports = {
data () {
return {
chartData: {
columns: ['日期', '成本', '利润'],
rows: [
{ '日期': '1月1日', '成本': 15, '利润': 12 },
{ '日期': '1月2日', '成本': 12, '利润': 25 },
{ '日期': '1月3日', '成本': 21, '利润': 10 },
{ '日期': '1月4日', '成本': 41, '利润': 32 },
{ '日期': '1月5日', '成本': 31, '利润': 30 },
{ '日期': '1月6日', '成本': 71, '利润': 55 }
]
},
loading: true
}
}
}
</script>
</script>

#### 设置暂无数据状态

<vuep template="#set-data-empty"></vuep>

<script v-pre type="text/x-template" id="set-data-empty">
<template>
<ve-line
:data="chartData"
:data-empty="dataEmpty">
</ve-line>
</template>

<script>
// 使用data-empty属性前先引入css
// import 'v-charts/lib/style.css'
module.exports = {
data () {
return {
chartData: {
columns: ['日期', '成本', '利润'],
rows: []
},
dataEmpty: true
}
}
}
</script>
</script>

#### 增加自定义内容

<vuep template="#set-content"></vuep>

<script v-pre type="text/x-template" id="set-content">
<style>
.data-empty {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, .7);
color: #888;
font-size: 14px;
}
</style>

<template>
<ve-line
:data="chartData">
<div class="data-empty">没有数据😂</div>
</ve-line>
</template>

<script>
module.exports = {
data () {
return {
chartData: {
columns: ['日期', '成本', '利润'],
rows: []
}
}
}
}
</script>
</script>
14 changes: 9 additions & 5 deletions docs/props.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,19 @@
| after-config | 对生成好的echarts配置<br>进行额外的处理 | Function | 在数据转化为配置项结束后触发<br>参数为 options,返回值为 echarts 配置 |
| after-set-option | 生成图后获取echarts实例 | Function | 参数为echarts实例 |
| after-set-option-once | 生成图后获取echarts实例(只执行一次) | Function | 参数为echarts实例 |
| mark-line | 图表标线 | Object | 配置项内容对应echarts中<br>关于markLine的部分<br>使用时需额外引入对应模块<br>`'echarts/lib/component/markLine'` |
| mark-point | 图表标点 | Object | 配置项内容对应echarts中<br>关于markPoint的部分<br>使用时需额外引入对应模块<br>`'echarts/lib/component/markPoint'` |
| mark-area | 图表标志区域 | Object | 配置项内容对应echarts中<br>关于markArea的部分<br>使用时需额外引入对应模块<br>`'echarts/lib/component/markAreae'` |
| visual-map | 视觉映射组件 | Array, Object | 内容参考[文档](http://echarts.baidu.com/option.html#visualMap)<br>使用时需额外引入对应模块<br>`'echarts/lib/component/visualMap'` |
| mark-line | 图表标线 | Object | 配置项内容对应echarts中<br>关于markLine的部分<br>使用时需额外引入对应模块<br>`'echarts/lib/component/markLine'` |
| mark-point | 图表标点 | Object | 配置项内容对应echarts中<br>关于markPoint的部分<br>使用时需额外引入对应模块<br>`'echarts/lib/component/markPoint'` |
| mark-area | 图表标志区域 | Object | 配置项内容对应echarts中<br>关于markArea的部分<br>使用时需额外引入对应模块<br>`'echarts/lib/component/markAreae'` |
| visual-map | 视觉映射组件 | Array, Object | 内容参考[文档](http://echarts.baidu.com/option.html#visualMap)<br>使用时需额外引入对应模块<br>`'echarts/lib/component/visualMap'` |
| data-zoom | 区域缩放组件 | Array, Object | 内容参考[文档](http://echarts.baidu.com/option.html#dataZoom)<br>使用时需额外引入对应模块<br>`'echarts/lib/component/dataZoom'` |
| toolbox | 工具箱 | Object | 内容参考[文档](http://echarts.baidu.com/option.html#toolbox)<br>使用时需额外引入对应模块<br>`'echarts/lib/component/toolbox'` |
| init-options | init 附加参数 | Object | 内容参考[文档](http://echarts.baidu.com/api.html#echarts.init) |
| theme | 自定义主题 | Object | 内容为自定义主题参数 |
| theme-name | 自定义主题名称 | String | 内容为全局注册的自定义主题名称 |
| loading | 加载状态 | Boolean | 默认为false |
| dataEmpty | 暂无数据状态 | Boolean | 默认为false |

> 备注:使用loading和dataEmpty属性前需引入css `import 'v-charts/lib/style.css'`
同时,为了能够更方便的设置属性配置项等,下面这些与echarts配置项对应的属性也被加到了组件上,使用方式可参考[文档](http://echarts.baidu.com/option.html)
```
Expand All @@ -52,7 +56,7 @@ textStyle: Object

##### 另外一种是图表自身的属性,比如用户设置数据类型的`dataType`,这样的属性被置于settings内,每种图表的配置项不完全相同,具体参数参考下述图表文档中的配置项

>
>
### 示例

Expand Down
14 changes: 14 additions & 0 deletions docs/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,17 @@ iframe {
color: rgba(255, 83, 112, 1) !important;
background-color: inherit !important;
}

.data-empty {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, .7);
color: #888;
font-size: 14px;
}
2 changes: 2 additions & 0 deletions docs/style.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"main": "lib/index.js",
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.config.js",
"build": "rm -f -r lib && node build/rollup.config.js && cp -f lib/index.min.js docs/v-charts.min.js",
"build": "rm -f -r lib && node build/rollup.config.js && cp -f lib/index.min.js lib/style.min.css docs/",
"prepublish": "npm run build",
"test": "karma start ./test/karma.conf.js"
},
Expand All @@ -27,6 +27,7 @@
"echarts": "^3.0.0"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-core": "6.24.0",
"babel-eslint": "7.1.1",
"babel-loader": "6.4.1",
Expand All @@ -37,6 +38,7 @@
"babel-preset-stage-2": "6.22.0",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.27.3",
"cssnano": "^3.10.0",
"eslint": "3.17.1",
"eslint-config-standard": "7.0.1",
"eslint-friendly-formatter": "2.0.7",
Expand Down Expand Up @@ -72,7 +74,7 @@
"rollup-plugin-eslint": "3.0.0",
"rollup-plugin-node-resolve": "2.0.0",
"rollup-plugin-uglify": "2.0.1",
"rollup-plugin-vue": "2.4.2",
"rollup-plugin-vue": "2.5.2",
"style-loader": "0.14.1",
"url-loader": "0.5.8",
"vue": "2.4.2",
Expand Down
22 changes: 11 additions & 11 deletions src/component-list.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
module.exports = {
VeBar: { src: 'src/packages/bar/index.vue', dist: 'lib/bar' },
VeHistogram: { src: 'src/packages/histogram/index.vue', dist: 'lib/histogram' },
VeFunnel: { src: 'src/packages/funnel/index.vue', dist: 'lib/funnel' },
VeLine: { src: 'src/packages/line/index.vue', dist: 'lib/line' },
VePie: { src: 'src/packages/pie/index.vue', dist: 'lib/pie' },
VeRing: { src: 'src/packages/ring/index.vue', dist: 'lib/ring' },
VeRadar: { src: 'src/packages/radar/index.vue', dist: 'lib/radar' },
VeWaterfall: { src: 'src/packages/waterfall/index.vue', dist: 'lib/waterfall' },
VeBar: { src: 'src/packages/bar/index.js', dist: 'lib/bar' },
VeHistogram: { src: 'src/packages/histogram/index.js', dist: 'lib/histogram' },
VeFunnel: { src: 'src/packages/funnel/index.js', dist: 'lib/funnel' },
VeLine: { src: 'src/packages/line/index.js', dist: 'lib/line' },
VePie: { src: 'src/packages/pie/index.js', dist: 'lib/pie' },
VeRing: { src: 'src/packages/ring/index.js', dist: 'lib/ring' },
VeRadar: { src: 'src/packages/radar/index.js', dist: 'lib/radar' },
VeWaterfall: { src: 'src/packages/waterfall/index.js', dist: 'lib/waterfall' },
VeIndex: { src: 'src/packages/index/index.js', dist: 'lib/index' },
VeChart: { src: 'src/packages/chart/index.vue', dist: 'lib/chart' },
VeMap: { src: 'src/packages/map/index.vue', dist: 'lib/map' },
VeBmap: { src: 'src/packages/bmap/index.vue', dist: 'lib/bmap' }
VeChart: { src: 'src/packages/chart/index.js', dist: 'lib/chart' },
VeMap: { src: 'src/packages/map/index.js', dist: 'lib/map' },
VeBmap: { src: 'src/packages/bmap/index.js', dist: 'lib/bmap' }
}
21 changes: 21 additions & 0 deletions src/components/data-empty.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<template>
<div class="v-charts-data-empty">
暂无数据
</div>
</template>

<style>
.v-charts-data-empty {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, .7);
color: #888;
font-size: 14px;
}
</style>
61 changes: 61 additions & 0 deletions src/components/loading.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<template>
<div class="v-charts-component-loading">
<div class="loader">
<div class="loading-spinner">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
</svg>
</div>
</div>
</div>
</template>

<style>
.v-charts-component-loading {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, .8);
}
.v-charts-component-loading .circular {
width: 42px;
height: 42px;
animation: loading-rotate 2s linear infinite;
}
.v-charts-component-loading .path {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90,150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: #20a0ff;
stroke-linecap: round;
}
@keyframes loading-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
</style>
27 changes: 25 additions & 2 deletions src/core.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,28 @@
import { color, default as echarts } from './echarts-base'
import { getType } from './util'
import { getType, toKebab } from './utils'
import Loading from './components/loading'
import DataEmpty from './components/data-empty'

export default {
render (h) {
return h('div', {
class: [toKebab(this.$options.name || this.$options._componentTag)],
style: this.canvasStyle
}, [
h('div', {
style: this.canvasStyle,
ref: 'canvas'
}),
h(Loading, {
style: { display: this.loading ? '' : 'none' }
}),
h(DataEmpty, {
style: { display: this.dataEmpty ? '' : 'none' }
}),
this.$slots.default
])
},

props: {
data: { type: [Object, Array], default () { return {} } },
settings: { type: Object, default () { return {} } },
Expand Down Expand Up @@ -40,7 +61,9 @@ export default {
textStyle: Object,
animation: Object,
theme: Object,
themeName: String
themeName: String,
loading: Boolean,
dataEmpty: Boolean
},

watch: {
Expand Down
Loading

0 comments on commit 409106d

Please sign in to comment.