refine echarts demo

This commit is contained in:
Pan 2017-06-30 15:36:21 +08:00
parent b15caf637f
commit 4b4bf494b0
8 changed files with 703 additions and 699 deletions

View file

@ -2,18 +2,9 @@
<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 {
name: 'barPercent',
props: { props: {
className: { className: {
type: String, type: String,
@ -33,13 +24,22 @@
} }
}, },
data() { data() {
return {}; return {
chart: null
};
}, },
mounted() { mounted() {
this.initBar(); this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
}, },
methods: { methods: {
initBar() { initChart() {
this.chart = echarts.init(document.getElementById(this.id)); this.chart = echarts.init(document.getElementById(this.id));
const xAxisData = []; const xAxisData = [];

View file

@ -2,18 +2,9 @@
<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 {
name: 'barPercent',
props: { props: {
className: { className: {
type: String, type: String,
@ -33,13 +24,22 @@
} }
}, },
data() { data() {
return {}; return {
chart: null
};
}, },
mounted() { mounted() {
this.initBar(); this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
}, },
methods: { methods: {
initBar() { initChart() {
this.chart = echarts.init(document.getElementById(this.id)); this.chart = echarts.init(document.getElementById(this.id));
const xAxisData = []; const xAxisData = [];

View file

@ -2,16 +2,9 @@
<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/line');
//
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default { export default {
name: 'barPercent',
props: { props: {
className: { className: {
type: String, type: String,
@ -31,11 +24,20 @@
} }
}, },
data() { data() {
return {}; return {
chart: null
};
}, },
mounted() { mounted() {
this.initChart(); this.initChart();
}, },
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(document.getElementById(this.id)); this.chart = echarts.init(document.getElementById(this.id));

View file

@ -2,17 +2,9 @@
<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/legend');
require('echarts/lib/component/dataZoom');
export default { export default {
name: 'barPercent',
props: { props: {
className: { className: {
type: String, type: String,
@ -32,10 +24,20 @@
} }
}, },
data() { data() {
return {}; return {
chart: null
};
}, },
mounted() { mounted() {
this.initChart(); this.initChart();
this.chart = null;
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
}, },
methods: { methods: {
initChart() { initChart() {

View file

@ -1,7 +1,7 @@
<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>

View file

@ -1,7 +1,7 @@
<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>

View file

@ -1,7 +1,7 @@
<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>

View file

@ -1,15 +1,15 @@
<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>