<template> 
  <div ref="chart" style="width:100%;height:300px;"></div>
</template>

<script setup >
import {onMounted, reactive, ref} from "vue";
// 局部引入echarts核心模块
import * as echarts from 'echarts'
 
const chart =ref(); // 创建DOM引用

var plantCap = [{
    name: '中国工程院 \n\n 院士' 
}, {
    name: '计算机应用 \n\n 专家'
}, {
    name: '浙江大学计算机 \n\n 科学与技术学院 \n\n 教授' 
}, {
    name: '国家数码喷印工程 \n\n 技术研究中心 \n\n 首席科学家'
}, {
    name: '浙江大学信息 \n\n 学部主任'
}, {
    name: '博士生导师'
}];

var datalist = [{
    offset: [10, 73],
    symbolSize: 90,
    opacity: .95,
    color: '#C58F5A'
}, {
    offset: [40, 63],
    symbolSize: 90,
    opacity: .88,
    color: '#076097'
}, {
    offset: [80, 73],
    symbolSize: 130,
    opacity: .84,
    color: '#BF74CF'
}, {
    offset: [20, 23],
    symbolSize: 140,
    opacity: .84,
    color: '#2D90ED'
}, {
    offset: [60, 23],
    symbolSize: 95,
    opacity: .84,
    color: '#079773'
}, {
    offset: [90, 33],
    symbolSize: 80,
    opacity: .84,
    color: '#C89D4A'
}];
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
    var item = plantCap[i];
    var itemToStyle = datalist[i];
    datas.push({
        name:   item.name,
        value: itemToStyle.offset,
        symbolSize: itemToStyle.symbolSize,
        label: {
            normal: {
                textStyle: {
                    fontSize: 12
                }
            }
        },
        itemStyle: {
            normal: { 
                color: itemToStyle.color,
                opacity: itemToStyle.opacity
            }
        },
    })
}

let option = {
    grid: {
        show: false,
        top: 10,
        bottom: 10
    },
    xAxis: [{
        gridIndex: 0,
        type: 'value',
        show: false,
        min: 0,
        max: 100,
        nameLocation: 'middle',
        nameGap: 5
    }],
    yAxis: [{
        gridIndex: 0,
        min: 0,
        show: false,
        max: 100,
        nameLocation: 'middle',
        nameGap: 30
    }],
    series: [{
        type: 'scatter',
        symbol: 'circle',
        symbolSize: 120,
        label: {
            normal: {
                show: true,
                formatter: '{b}',
                color: '#fff',
                textStyle: {
                    fontSize: '20'
                }
            },
        },
        itemStyle: {
            normal: {
                color: '#00acea'
            }
        },
        data: datas
    }]
};


// 使用生命钩子
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  // var myChart = echarts.init(document.getElementById('main'));
  // Vue3中： 需要引入
  var myChart = echarts.init(chart.value)

  // init(); // vue3.2没有this
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  // 单图表响应式: 跟随浏览器大小改变
  window.addEventListener('resize',()=>{
      myChart.resize()
  })

})

</script>

<style scoped>

</style>