?//echarts清空歷史數(shù)據(jù)；
echart.setOption(option,?true);? ?
//?echarts圖表自適應(yīng)
? e_resize(echart){
? ? window.addEventListener("resize",?function?()?{
? ? ? echart.resize();
? ? });
//?側(cè)邊欄收縮時echarts圖表自適應(yīng)
方法一：
html ==>? <div ref="echartLine" class="echart-line" v-resize="resize" />
export default {
directives: {
? ? // 使用局部注冊指令的方式
? ? resize: {
? ? ? // 指令的名稱
? ? ? bind(el, binding) {
? ? ? ? // el為綁定的元素，binding為綁定給指令的對象
? ? ? ? let { width,height } = "";
? ? ? ? function isReize() {
? ? ? ? ? const style = document.defaultView.getComputedStyle(el);
? ? ? ? ? if (width !== style.width || height !== style.height) {
? ? ? ? ? ? binding.value(); // 關(guān)鍵
? ? ? ? ? }
? ? ? ? ? width = style.width;
? ? ? ? ? height = style.height;
? ? ? ? }
? ? ? ? el.__vueSetInterval__ = setInterval(isReize, 300);
? ? ? },
? ? ? unbind(el) {
? ? ? ? clearInterval(el.__vueSetInterval__);
? ? ? },
? ? },
? },
}
方法二：通過vuex給側(cè)邊欄添加狀態(tài)監(jiān)控變量，對其進(jìn)行監(jiān)聽，發(fā)生改變時觸發(fā)resize方法；
import { mapGetters } from "vuex";
computed: {
? ? ...mapGetters(["sidebar"]),
? },
watch:{
? ?sidebar: {
? ? ? handler() {
? ? ? ? setTimeout(() => {
? ? ? ? ? this.myChart.resize();
? ? ? ? }, 200);
? ? ? },
? ? ? deep: true,
? ? },
