forked from AkkomaGang/admin-fe
refine echarts demo
This commit is contained in:
parent
b15caf637f
commit
4b4bf494b0
8 changed files with 703 additions and 699 deletions
|
@ -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 = [];
|
||||
|
|
|
@ -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 = [];
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue