From ce9e87bd3f75991056efcc1b9d7dedf14423c591 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Tue, 16 Apr 2024 14:21:31 +0800
Subject: [PATCH] 1

---
 src/view/echart_analyze/bubble.vue    | 150 ++++++++++++++++++++++++++
 src/view/echarts_education/bubble.vue | 150 ++++++++++++++++++++++++++
 src/view/echarts_hygiene/bubble.vue   | 150 ++++++++++++++++++++++++++
 src/view/echarts_sy/bubble.vue        | 150 ++++++++++++++++++++++++++
 src/view/echarts_work/bubble.vue      | 150 ++++++++++++++++++++++++++
 5 files changed, 750 insertions(+)
 create mode 100644 src/view/echart_analyze/bubble.vue
 create mode 100644 src/view/echarts_education/bubble.vue
 create mode 100644 src/view/echarts_hygiene/bubble.vue
 create mode 100644 src/view/echarts_sy/bubble.vue
 create mode 100644 src/view/echarts_work/bubble.vue

diff --git a/src/view/echart_analyze/bubble.vue b/src/view/echart_analyze/bubble.vue
new file mode 100644
index 0000000..5e5f966
--- /dev/null
+++ b/src/view/echart_analyze/bubble.vue
@@ -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>
\ No newline at end of file
diff --git a/src/view/echarts_education/bubble.vue b/src/view/echarts_education/bubble.vue
new file mode 100644
index 0000000..5e5f966
--- /dev/null
+++ b/src/view/echarts_education/bubble.vue
@@ -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>
\ No newline at end of file
diff --git a/src/view/echarts_hygiene/bubble.vue b/src/view/echarts_hygiene/bubble.vue
new file mode 100644
index 0000000..5e5f966
--- /dev/null
+++ b/src/view/echarts_hygiene/bubble.vue
@@ -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>
\ No newline at end of file
diff --git a/src/view/echarts_sy/bubble.vue b/src/view/echarts_sy/bubble.vue
new file mode 100644
index 0000000..5e5f966
--- /dev/null
+++ b/src/view/echarts_sy/bubble.vue
@@ -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>
\ No newline at end of file
diff --git a/src/view/echarts_work/bubble.vue b/src/view/echarts_work/bubble.vue
new file mode 100644
index 0000000..5e5f966
--- /dev/null
+++ b/src/view/echarts_work/bubble.vue
@@ -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>
\ No newline at end of file