xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
姚宇浩 2024-04-16 14:21:31 +08:00
parent ca0e2e9fb9
commit ce9e87bd3f
5 changed files with 750 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
src/view/echart_analyze/bubble.vue Normal file
View File

@ -0,0 +1,150 @@
<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>

150
src/view/echarts_education/bubble.vue Normal file
View File

@ -0,0 +1,150 @@
<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>

150
src/view/echarts_hygiene/bubble.vue Normal file
View File

@ -0,0 +1,150 @@
<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>

150
src/view/echarts_sy/bubble.vue Normal file
View File

@ -0,0 +1,150 @@
<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>

150
src/view/echarts_work/bubble.vue Normal file
View File

@ -0,0 +1,150 @@
<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>