github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

'更新vue-schart版本'

pull/96/head
lin-xin 2018-05-05 14:46:24 +08:00
parent ffd10f7d29
commit 25322e0bb0
3 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -18,7 +18,7 @@
"vue-cropperjs": "^2.2.0", "vue-cropperjs": "^2.2.0",
"vue-quill-editor": "3.0.6", "vue-quill-editor": "3.0.6",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-schart": "^0.1.4", "vue-schart": "^1.0.0",
"vuedraggable": "^2.16.0" "vuedraggable": "^2.16.0"
}, },
"devDependencies": { "devDependencies": {

4
src/components/common/Sidebar.vue
View File

@ -112,6 +112,10 @@
left: 0; left: 0;
top: 70px; top: 70px;
bottom:0; bottom:0;
overflow-y: scroll;
}
.sidebar::-webkit-scrollbar{
width: 0;
} }
.sidebar-el-menu:not(.el-menu--collapse){ .sidebar-el-menu:not(.el-menu--collapse){
width: 250px; width: 250px;

55
src/components/page/BaseCharts.vue
View File

@ -11,21 +11,21 @@
vue-schart：vue.js封装sChart.js的图表组件。 vue-schart：vue.js封装sChart.js的图表组件。
访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a> 访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
</div> </div>
<div class="schart"> <div class="schart-box">
<div class="content-title">柱状图</div> <div class="content-title">柱状图</div>
<schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart> <schart class="schart" canvasId="bar" :data="data1" type="bar" :options="options1"></schart>
</div> </div>
<div class="schart"> <div class="schart-box">
<div class="content-title">折线图</div> <div class="content-title">折线图</div>
<schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart> <schart class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart>
</div> </div>
<div class="schart"> <div class="schart-box">
<div class="content-title">饼状图</div> <div class="content-title">饼状图</div>
<schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart> <schart class="schart" canvasId="pie" :data="data2" type="pie" :options="options3"></schart>
</div> </div>
<div class="schart"> <div class="schart-box">
<div class="content-title">环形图</div> <div class="content-title">环形图</div>
<schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart> <schart class="schart" canvasId="ring" :data="data2" type="ring" :options="options4"></schart>
</div> </div>
</div> </div>
</div> </div>
@ -55,26 +55,47 @@
], ],
options1: { options1: {
title: '某商店近年营业总额', title: '某商店近年营业总额',
bgColor: '#009688', autoWidth: true, // 设置宽高自适应
titleColor: '#ffffff', showValue: false,
fillColor: '#e0f2f1', bgColor: '#F9EFCC',
axisColor: '#ffffff', fillColor: '#00887C',
contentColor: '#999' contentColor: 'rgba(46,199,201,0.3)',
yEqual: 7
}, },
options2: { options2: {
title: '某商店近年营业总额',
bgColor: '#D5E4EB',
titleColor: '#00887C',
fillColor: 'red',
contentColor: 'rgba(46,199,201,0.3)'
},
options3: {
title: '某商店各商品年度销量', title: '某商店各商品年度销量',
bgColor: '#607d8b', bgColor: '#829dca',
titleColor: '#ffffff', titleColor: '#ffffff',
legendColor: '#ffffff' legendColor: '#ffffff',
radius: 120
},
options4: {
title: '某商店各商品年度销量',
bgColor: '#829daa',
titleColor: '#ffffff',
legendColor: '#ffffff',
radius: 120,
innerRadius:80
} }
}) })
} }
</script> </script>
<style scoped> <style scoped>
.schart-box{
display: inline-block;
margin: 20px;
}
.schart{ .schart{
width: 600px; width: 500px;
display: inline-block; height: 400px;
} }
.content-title{ .content-title{
clear: both; clear: both;