102 lines
2.5 KiB
JavaScript
102 lines
2.5 KiB
JavaScript
|
import * as echarts from "echarts";
|
||
|
|
|
||
|
|
function __resizeHandler(entries) {
|
||
|
|
for (const entry of entries) {
|
||
|
|
if (entry.contentBoxSize) {
|
||
|
|
// manipulate contentBoxSize
|
||
|
|
const contentBoxSize = Array.isArray(entry.contentBoxSize)
|
||
|
|
? entry.contentBoxSize[0]
|
||
|
|
: entry.contentBoxSize;
|
||
|
|
this.chart_mixin_chartInstance.resize({
|
||
|
|
width:
|
||
|
|
contentBoxSize.inlineSize < this.MIN_WIDTH
|
||
|
|
? this.MIN_WIDTH
|
||
|
|
: contentBoxSize.inlineSize,
|
||
|
|
height: contentBoxSize.blockSize,
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
// manipulate contentRect
|
||
|
|
this.chart_mixin_chartInstance.resize({
|
||
|
|
width:
|
||
|
|
entry.contentRect.width < this.MIN_WIDTH
|
||
|
|
? this.MIN_WIDTH
|
||
|
|
: entry.contentRect.width,
|
||
|
|
height: entry.contentRect.height,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
const resizeObserver = new ResizeObserver(__resizeHandler.bind(this));
|
||
|
|
|
||
|
|
return {
|
||
|
|
MIN_WIDTH: 400,
|
||
|
|
chart_mixin_chartInstance: null,
|
||
|
|
chart_mixin_observer: resizeObserver,
|
||
|
|
chart_mixin_options: {
|
||
|
|
grid: {
|
||
|
|
left: "3%",
|
||
|
|
right: "4%",
|
||
|
|
bottom: "3%",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
tooltip: {},
|
||
|
|
legend: {
|
||
|
|
data: ["Sales"],
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
data: [
|
||
|
|
"shirt",
|
||
|
|
"cardign",
|
||
|
|
"chiffon shirt",
|
||
|
|
"pants",
|
||
|
|
"heels",
|
||
|
|
"socks",
|
||
|
|
],
|
||
|
|
},
|
||
|
|
yAxis: {},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "Sales",
|
||
|
|
type: "bar",
|
||
|
|
data: [5, 20, 36, 10, 10, 20],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// this.$nextTick(() => {
|
||
|
|
// this.initChart().then(() => {
|
||
|
|
// this.initOptions(this.chart_mixin_options);
|
||
|
|
// this.initListener();
|
||
|
|
// });
|
||
|
|
// });
|
||
|
|
this.initChart();
|
||
|
|
this.initListener();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initChart() {
|
||
|
|
(this.$refs.chart ||
|
||
|
|
console.warn('[mixins/chart] 注意是否有 ref="chart" 的元素存在')) &&
|
||
|
|
(this.chart_mixin_chartInstance = echarts.init(this.$refs.chart));
|
||
|
|
// return new Promise((resolve, reject) => {
|
||
|
|
// this.$refs.chart ? resolve(true) : reject(false);
|
||
|
|
// });
|
||
|
|
},
|
||
|
|
initOptions(options) {
|
||
|
|
this.chart_mixin_chartInstance.setOption(options);
|
||
|
|
},
|
||
|
|
initListener() {
|
||
|
|
this.chart_mixin_observer.observe(this.$refs.chart);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
if (this.chart_mixin_chartInstance) {
|
||
|
|
this.chart_mixin_chartInstance.dispose();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|