150 lines
3.0 KiB
Vue
150 lines
3.0 KiB
Vue
<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> |