<template>
<div class="row q-pa-sm">
<div style="margin-top:90px;margin-left:150px;">
<div ref="chart1" style="height: 400px;width:500px;display: inline-block;"></div>
<div ref="chart2" style="height: 400px;width:500px;display: inline-block;"></div>
</div>
</div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { ref,onMounted} from 'vue';
const chart1 = ref();
const chart2 = ref();
let myChart: echarts.ECharts;
let myChart2: echarts.ECharts;
onMounted(() => {
myChart = echarts.init(chart1.value);
myChart.setOption(getChartSetOption());
myChart2 = echarts.init(chart2.value);
myChart2.setOption(getChartSetOption2());
window.addEventListener('resize', resizeHandler);
});
const resizeHandler = () => {
if (myChart) {
myChart.resize()
}
if (myChart2) {
myChart2.resize()
}
}
function getChartSetOption(){
type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
return option;
}
function getChartSetOption2(){
type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
option = {
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 150],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
]
}
]
};
return option;
}
</script>
<style></style>
