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>
|