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>
</template>
<script>
// 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');
import echarts from 'echarts';
require('echarts/lib/component/visualMap');
export default {
name: 'barPercent',
props: {
className: {
type: String,
@ -33,13 +24,22 @@
}
},
data() {
return {};
return {
chart: null
};
},
mounted() {
this.initBar();
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initBar() {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
const xAxisData = [];

View File

@ -2,18 +2,9 @@
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>
<script>
// 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');
import echarts from 'echarts';
require('echarts/lib/component/visualMap');
export default {
name: 'barPercent',
props: {
className: {
type: String,
@ -33,13 +24,22 @@
}
},
data() {
return {};
return {
chart: null
};
},
mounted() {
this.initBar();
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initBar() {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
const xAxisData = [];

View File

@ -2,16 +2,9 @@
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>
<script>
// ECharts
const echarts = require('echarts/lib/echarts');
import echarts from 'echarts';
require('echarts/lib/chart/line');
//
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
name: 'barPercent',
props: {
className: {
type: String,
@ -31,11 +24,20 @@
}
},
data() {
return {};
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));
@ -215,5 +217,5 @@
})
}
}
}
}
</script>

View File

@ -2,17 +2,9 @@
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>
<script>
// 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');
import echarts from 'echarts';
export default {
name: 'barPercent',
props: {
className: {
type: String,
@ -32,10 +24,20 @@
}
},
data() {
return {};
return {
chart: null
};
},
mounted() {
this.initChart();
this.chart = null;
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {

View File

@ -1,7 +1,7 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<keyboardChart height='100%' width='100%' />
<keyboard-chart height='100%' width='100%'></keyboard-chart>
</div>
</div>
</template>

View File

@ -1,7 +1,7 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<keyboardChart2 id='apple' height='100%' width='100%' />
<keyboard-chart2 id='apple' height='100%' width='100%'></keyboard-chart2>
</div>
</div>
</template>

View File

@ -1,7 +1,7 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<lineMarker height='100%' width='100%' />
<line-marker height='100%' width='100%'></line-marker>
</div>
</div>
</template>

View File

@ -1,15 +1,15 @@
<template>
<div class="components-container" style='height:100vh'>
<div class='chart-container'>
<mixchart id='apple' height='100%' width='100%' />
<mix-chart id='apple' height='100%' width='100%'></mix-chart>
</div>
</div>
</template>
<script>
import mixchart from 'components/Charts/mixchart';
import mixChart from 'components/Charts/mixChart';
export default {
components: { mixchart }
components: { mixChart }
};
</script>