<template>
<div ref="chart" :style="dataStyle"></div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
const echarts = require("echarts");
require("echarts-liquidfill"); // 水波图
@Component({
})
// 将option抽离出去
export default class Echarts extends Vue {
@Prop() private option!: {};
@Prop() private dataStyle!: {};
private myChart: any;
@Watch("option", { deep: true})
public xvalueChange(val: any) {
this.myChart && this.myChart.setOption(this.option);
}
//随着屏幕大小改变尺寸
private addlist() {
this.myChart.resize();
}
mounted() {
this.myChart = echarts.init(this.$refs.chart);
this.myChart.setOption(this.option);
const that = this;
window.addEventListener("resize", that.addlist);
}
}
</script>
<style lang="scss" scoped>
</style>