forked from github/dataease
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
|
<template>
|
|||
|
|
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
|
|||
|
|
<div id="echart" style="width: 100%;height: 80vh;" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { BASE_BAR, BASE_LINE } from '../chart/chart'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'ChartComponent',
|
|||
|
|
props: {
|
|||
|
|
chart: {
|
|||
|
|
type: Object,
|
|||
|
|
required: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
chart() {
|
|||
|
|
this.drawEcharts()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
drawEcharts() {
|
|||
|
|
const chart = this.chart
|
|||
|
|
let chart_option = {}
|
|||
|
|
// todo type
|
|||
|
|
if (chart.type === 'bar') {
|
|||
|
|
chart_option = JSON.parse(JSON.stringify(BASE_BAR))
|
|||
|
|
} else if (chart.type === 'line') {
|
|||
|
|
chart_option = JSON.parse(JSON.stringify(BASE_LINE))
|
|||
|
|
}
|
|||
|
|
// console.log(chart_option);
|
|||
|
|
if (chart.data) {
|
|||
|
|
chart_option.title.text = chart.title
|
|||
|
|
chart_option.xAxis.data = chart.data.x
|
|||
|
|
chart.data.series.forEach(function(y) {
|
|||
|
|
chart_option.legend.data.push(y.name)
|
|||
|
|
chart_option.series.push(y)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// console.log(chart_option);
|
|||
|
|
this.myEcharts(chart_option)
|
|||
|
|
},
|
|||
|
|
myEcharts(option) {
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = this.$echarts.init(document.getElementById('echart'))
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
setTimeout(myChart.setOption(option, true), 500)
|
|||
|
|
window.onresize = function() {
|
|||
|
|
myChart.resize()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
|
|||
|
|
</style>
|