Skip to content

V
VueElementTemplate
Commit 4b4bf494 authored by Pan's avatar Pan
Browse files
Options

refine echarts demo

parent b15caf63
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 673 additions and 669 deletions
src/components/Charts/keyboard.vue
View file @ 4b4bf494
...@@ -2,111 +2,111 @@ ...@@ -2,111 +2,111 @@
<div :class="className" :id="id" :style="{height:height,width:width}"></div> <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template> </template>
<script> <script>
// 引入 ECharts 主模块 import echarts from 'echarts';
const echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/visualMap'); export default {
export default { props: {
name: 'barPercent', className: {
props: { type: String,
className: { default: 'chart'
type: String, },
default: 'chart' id: {
}, type: String,
id: { default: 'chart'
type: String, },
default: 'chart' width: {
}, type: String,
width: { default: '200px'
type: String, },
default: '200px' height: {
}, type: String,
height: { default: '200px'
type: String, }
default: '200px' },
} data() {
}, return {
data() { chart: null
return {}; };
}, },
mounted() { mounted() {
this.initBar(); this.initChart();
}, },
methods: { beforeDestroy() {
initBar() { if (!this.chart) {
this.chart = echarts.init(document.getElementById(this.id)); return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
const xAxisData = []; const xAxisData = [];
const data = []; const data = [];
for (let i = 0; i < 30; i++) { for (let i = 0; i < 30; i++) {
xAxisData.push(i + '号'); xAxisData.push(i + '号');
data.push(Math.round(Math.random() * 2 + 3)) data.push(Math.round(Math.random() * 2 + 3))
} }
this.chart.setOption( this.chart.setOption(
{ {
backgroundColor: '#08263a', backgroundColor: '#08263a',
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
xAxis: { xAxis: {
show: false, show: false,
data: xAxisData data: xAxisData
}, },
visualMap: { visualMap: {
show: false, show: false,
min: 0, min: 0,
max: 50, max: 50,
dimension: 0, dimension: 0,
inRange: { inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'] color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
} }
}, },
yAxis: { yAxis: {
axisLine: { axisLine: {
show: false show: false
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#4a657a' color: '#4a657a'
} }
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#08263f' color: '#08263f'
} }
}, },
axisTick: {} axisTick: {}
}, },
series: [{ series: [{
type: 'bar', type: 'bar',
data, data,
name: '撸文数', name: '撸文数',
itemStyle: { itemStyle: {
normal: { normal: {
barBorderRadius: 5, barBorderRadius: 5,
shadowBlur: 10, shadowBlur: 10,
shadowColor: '#111' shadowColor: '#111'
} }
}, },
animationEasing: 'elasticOut', animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut', animationEasingUpdate: 'elasticOut',
animationDelay(idx) { animationDelay(idx) {
return idx * 20; return idx * 20;
}, },
animationDelayUpdate(idx) { animationDelayUpdate(idx) {
return idx * 20; return idx * 20;
} }
}] }]
}) })
} }
} }
} }
</script> </script>
src/components/Charts/keyboard2.vue
View file @ 4b4bf494
...@@ -2,148 +2,148 @@ ...@@ -2,148 +2,148 @@
<div :class="className" :id="id" :style="{height:height,width:width}"></div> <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template> </template>
<script> <script>
// 引入 ECharts 主模块 import echarts from 'echarts';
const echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/visualMap'); export default {
export default { props: {
name: 'barPercent', className: {
props: { type: String,
className: { default: 'chart'
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
}, },
data() { id: {
return {}; type: String,
default: 'chart'
}, },
mounted() { width: {
this.initBar(); type: String,
default: '200px'
}, },
methods: { height: {
initBar() { type: String,
this.chart = echarts.init(document.getElementById(this.id)); 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 xAxisData = [];
const data = []; const data = [];
const data2 = []; const data2 = [];
for (let i = 0; i < 50; i++) { for (let i = 0; i < 50; i++) {
xAxisData.push(i); xAxisData.push(i);
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5); data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3); data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
} }
this.chart.setOption( this.chart.setOption(
{ {
backgroundColor: '#08263a', backgroundColor: '#08263a',
xAxis: [{ xAxis: [{
show: false, show: false,
data: xAxisData data: xAxisData
}, { }, {
show: false, show: false,
data: xAxisData data: xAxisData
}], }],
visualMap: { visualMap: {
show: false, show: false,
min: 0, min: 0,
max: 50, max: 50,
dimension: 0, dimension: 0,
inRange: { inRange: {
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055'] color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
} }
},
yAxis: {
axisLine: {
show: false
}, },
yAxis: { axisLabel: {
axisLine: { textStyle: {
show: false color: '#4a657a'
},
axisLabel: {
textStyle: {
color: '#4a657a'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#08263f'
}
},
axisTick: {
show: false
} }
}, },
series: [{ splitLine: {
name: 'back', show: true,
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: { lineStyle: {
normal: { color: '#08263f'
color: 'transparent'
}
},
areaStyle: {
normal: {
color: '#08263a',
shadowBlur: 50,
shadowColor: '#000'
}
} }
}, { },
name: 'front', axisTick: {
type: 'bar', show: false
data, }
xAxisIndex: 1, },
z: 3, series: [{
itemStyle: { name: 'back',
normal: { type: 'bar',
barBorderRadius: 5 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'
} }
}],
animationEasing: 'elasticOut',
animationEasingUpdate: 'elasticOut',
animationDelay(idx) {
return idx * 20;
}, },
animationDelayUpdate(idx) { areaStyle: {
return idx * 20; 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> </script>
src/components/Charts/lineMarker.vue
View file @ 4b4bf494
This diff is collapsed.
src/components/Charts/mixchart.vue
View file @ 4b4bf494
This diff is collapsed.
src/views/charts/keyboard.vue
View file @ 4b4bf494
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<keyboardChart height='100%' width='100%' /> <keyboard-chart height='100%' width='100%'></keyboard-chart>
</div> </div>
</div> </div>
</template> </template>
......
src/views/charts/keyboard2.vue
View file @ 4b4bf494
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<keyboardChart2 id='apple' height='100%' width='100%' /> <keyboard-chart2 id='apple' height='100%' width='100%'></keyboard-chart2>
</div> </div>
</div> </div>
</template> </template>
......
src/views/charts/line.vue
View file @ 4b4bf494
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<lineMarker height='100%' width='100%' /> <line-marker height='100%' width='100%'></line-marker>
</div> </div>
</div> </div>
</template> </template>
......
src/views/charts/mixchart.vue
View file @ 4b4bf494
<template> <template>
<div class="components-container" style='height:100vh'> <div class="components-container" style='height:100vh'>
<div class='chart-container'> <div class='chart-container'>
<mixchart id='apple' height='100%' width='100%' /> <mix-chart id='apple' height='100%' width='100%'></mix-chart>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import mixchart from 'components/Charts/mixchart'; import mixChart from 'components/Charts/mixChart';
export default { export default {
components: { mixchart } components: { mixChart }
}; };
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment