jinql
/
vue-element-admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

rm:remove keyboard2 demo

pull/300/head
Pan 2017-11-17 15:07:21 +08:00
parent 339d760771
commit 8c204b9837
6 changed files with 62 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/Charts/keyboard.vue
View File

@ -45,21 +45,22 @@ export default {
const xAxisData = []
const data = []
for (let i = 0; i < 30; i++) {
xAxisData.push(i + '号')
data.push(Math.round(Math.random() * 2 + 3))
const data2 = []
for (let i = 0; i < 50; i++) {
xAxisData.push(i)
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
}
this.chart.setOption(
{
backgroundColor: '#08263a',
tooltip: {
trigger: 'axis'
},
xAxis: {
xAxis: [{
show: false,
data: xAxisData
},
}, {
show: false,
data: xAxisData
}],
visualMap: {
show: false,
min: 0,
@ -84,28 +85,64 @@ export default {
color: '#08263f'
}
},
axisTick: {}
axisTick: {
show: false
}
},
series: [{
name: 'back',
type: 'bar',
data,
name: '撸文数',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 10,
shadowBlur: 3,
shadowColor: '#111'
}
},
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
}
}]
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
}
})
}
}

150
src/components/Charts/keyboard2.vue
View File

@ -1,150 +0,0 @@
<template>
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>
<script>
import echarts from 'echarts'
export default {
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id))
const xAxisData = []
const data = []
const data2 = []
for (let i = 0; i < 50; i++) {
xAxisData.push(i)
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
}
this.chart.setOption(
{
backgroundColor: '#08263a',
xAxis: [{
show: false,
data: xAxisData
}, {
show: false,
data: xAxisData
}],
visualMap: {
show: false,
min: 0,
max: 50,
dimension: 0,
inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
}
},
yAxis: {
axisLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {
show: false
}
},
series: [{
name: 'back',
type: 'bar',
data: data2,
z: 1,
itemStyle: {
normal: {
opacity: 0.4,
barBorderRadius: 5,
shadowBlur: 3,
shadowColor: '#111'
}
}
}, {
name: 'Simulate Shadow',
type: 'line',
data,
z: 2,
showSymbol: false,
animationDelay: 0,
animationEasing: 'linear',
animationDuration: 1200,
lineStyle: {
normal: {
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
}
}, {
name: 'front',
type: 'bar',
data,
xAxisIndex: 1,
z: 3,
itemStyle: {
normal: {
barBorderRadius: 5
}
}
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20
},
animationDelayUpdate(idx) {
return idx * 20
}
})
}
}
}
</script>

1
src/lang/en.js
View File

@ -21,7 +21,6 @@ export default {
charts: 'Charts',
chartsIndex: 'Introduction',
keyboardChart: 'Keyboard Chart',
keyboardChart2: 'Keyboard Chart2',
lineChart: 'Line chart',
mixChart: 'Mix Chart',
example: 'Example',

1
src/lang/zh.js
View File

@ -21,7 +21,6 @@ export default {
charts: '图表',
chartsIndex: '介绍',
keyboardChart: '键盘图表',
keyboardChart2: '键盘图表2',
lineChart: '折线图',
mixChart: '混合图表',
example: '综合实例',

9
src/router/index.js
View File

@ -87,8 +87,6 @@ export const asyncRouterMap = [
{
path: '/components',
component: Layout,
redirect: '/components/index',
name: 'components',
meta: {
title: 'components',
icon: 'component'
@ -119,10 +117,9 @@ export const asyncRouterMap = [
},
children: [
{ path: 'index', component: _import('charts/index'), name: 'chartsIndex', meta: { title: 'chartsIndex' }},
{ path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboardChart', meta: { title: 'keyboardChart' }},
{ path: 'keyboard2', component: _import('charts/keyboard2'), name: 'keyboardChart2', meta: { title: 'keyboardChart2' }},
{ path: 'line', component: _import('charts/line'), name: 'lineChart', meta: { title: 'lineChart' }},
{ path: 'mixchart', component: _import('charts/mixChart'), name: 'mixChart', meta: { title: 'mixChart' }}
{ path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboardChart', meta: { title: 'keyboardChart', noCache: true }},
{ path: 'line', component: _import('charts/line'), name: 'lineChart', meta: { title: 'lineChart', noCache: true }},
{ path: 'mixchart', component: _import('charts/mixChart'), name: 'mixChart', meta: { title: 'mixChart', noCache: true }}
]
},

25
src/views/charts/keyboard2.vue
View File

@ -1,25 +0,0 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<chart height='100%' width='100%'></chart>
</div>
</div>
</template>
<script>
import Chart from '@/components/Charts/keyboard2'
export default {
name: 'keyboardChart2',
components: { Chart }
}
</script>
<style scoped>
.chart-container{
position: relative;
width: 100%;
height: 90%;
}
</style>