98 lines
1.7 KiB
Vue
98 lines
1.7 KiB
Vue
<template>
|
|
<div class="chart-wrap">
|
|
<v-chart class="chart" :option="chartOption" autoresize />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import VChart from 'vue-echarts';
|
|
export default {
|
|
components: {
|
|
VChart,
|
|
},
|
|
props: {
|
|
chartData: {
|
|
type: Object,
|
|
default: () => {},
|
|
require: true,
|
|
},
|
|
isLegend: {
|
|
type: Boolean,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
isDarkMode: 'isDarkMode',
|
|
}),
|
|
chartOption() {
|
|
let chartOption = { ...this.option };
|
|
if (this.chartData) {
|
|
chartOption.xAxis.data = this.chartData.xAxis;
|
|
chartOption.series = this.chartData.series;
|
|
chartOption.toolbox = this.chartData.toolbox;
|
|
chartOption.dataZoom = this.chartData.dataZoom;
|
|
if (this.chartData.color) chartOption.color = this.chartData.color;
|
|
}
|
|
return chartOption;
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
option: {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
confine: true,
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
top: '3%',
|
|
bottom: this.isLegend ? '30' : '0',
|
|
containLabel: true,
|
|
},
|
|
legend: this.isLegend
|
|
? {
|
|
top: 'bottom',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#95A0A9',
|
|
fontSize: 10,
|
|
},
|
|
}
|
|
: null,
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#767D83',
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLabel: {
|
|
color: '#767D83',
|
|
fontSize: 10,
|
|
},
|
|
data: [], //xAxis text
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
showBackground: true,
|
|
data: [],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
// this.
|
|
},
|
|
};
|
|
</script>
|