@@ -7,30 +7,58 @@ | |||
<template> | |||
<chart-container class="chip-invest-chart"> | |||
<div class="chart-title">chip-invest</div> | |||
<div class="chart-body" style="width: 1000px; background: #f024;"> | |||
<div class="chart-item">chip-invest</div> | |||
<div class="chart-item">chip-invest</div> | |||
<div class="chart-item">chip-invest</div> | |||
<div class="chart-item">chip-invest</div> | |||
</div> | |||
<div ref="chart" style="max-width: 22vw; height: 34vh"></div> | |||
</chart-container> | |||
</template> | |||
<script> | |||
import ChartContainerVue from "../components/ChartContainer.vue"; | |||
import chartMixin from "../mixins/chart.js"; | |||
export default { | |||
name: "chip-investChart", | |||
components: { | |||
ChartContainer: ChartContainerVue, | |||
}, | |||
mixins: [chartMixin], | |||
props: {}, | |||
data() { | |||
return {}; | |||
return { | |||
options: { | |||
grid: { | |||
left: "3%", | |||
right: "4%", | |||
bottom: "0", | |||
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.initOptions(this.options); | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
@@ -7,27 +7,57 @@ | |||
<template> | |||
<chart-container class="fto-chart"> | |||
<div class="chart-title">FTO</div> | |||
<div class="chart-body"> | |||
<div class="chart-item">FTO</div> | |||
<div class="chart-item">FTO</div> | |||
<div class="chart-item">FTO</div> | |||
<div class="chart-item">FTO</div> | |||
</div> | |||
<div ref="chart" style="max-width: 22vw; height: 100%"></div> | |||
</chart-container> | |||
</template> | |||
<script> | |||
import ChartContainerVue from "../components/ChartContainer.vue"; | |||
import chartMixin from "../mixins/chart.js"; | |||
export default { | |||
name: "FtoChart", | |||
components: { | |||
ChartContainer: ChartContainerVue, | |||
}, | |||
mixins: [chartMixin], | |||
props: {}, | |||
data() { | |||
return {}; | |||
return { | |||
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.initOptions(this.options); | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
@@ -28,7 +28,7 @@ export default { | |||
<style scoped lang="scss"> | |||
.chart-container { | |||
background: #151516; | |||
height: 100%; | |||
height: 0; | |||
flex: 1; | |||
overflow-x: scroll; | |||
} | |||
@@ -62,6 +62,7 @@ export default { | |||
<style scoped lang="scss"> | |||
.dashboard-container { | |||
height: 0; | |||
flex: 1; | |||
display: flex; | |||
flex-direction: column; | |||
@@ -86,7 +87,9 @@ export default { | |||
.container-body { | |||
padding: 12px; | |||
display: flex; | |||
flex-direction: column; | |||
flex: 1; | |||
height: 0; | |||
} | |||
.corner { | |||
@@ -49,18 +49,19 @@ h1 { | |||
.side { | |||
position: absolute; | |||
font-size: 1.18vw; | |||
line-height: 24px; | |||
// line-height: 24px; | |||
line-height: 1.277vw; | |||
letter-spacing: 2px; | |||
color: #69b4ff; | |||
} | |||
.left { | |||
left: 22vw; | |||
top: 4.65vh; | |||
top: 4.9vh; | |||
} | |||
.right { | |||
right: 15vw; | |||
top: 4.65vh; | |||
top: 4.9vh; | |||
} | |||
</style> |
@@ -0,0 +1,97 @@ | |||
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 < 400 ? 400 : contentBoxSize.inlineSize, | |||
height: contentBoxSize.blockSize, | |||
}); | |||
} else { | |||
// manipulate contentRect | |||
this.chart_mixin_chartInstance.resize({ | |||
width: entry.contentRect.width < 400 ? 400 : entry.contentRect.width, | |||
height: entry.contentRect.height, | |||
}); | |||
} | |||
console.log("[resizing.......] "); | |||
} | |||
} | |||
export default { | |||
data() { | |||
const resizeObserver = new ResizeObserver(__resizeHandler.bind(this)); | |||
return { | |||
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(); | |||
} | |||
}, | |||
}; |