1

src/view/echarts_work/bubble.vue

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

src/view/echarts_work/eP1.vue

@@ -0,0 +1,218 @@
+<template>
+  <div ref="chart" style="width: 100%; height:250px;"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const data = [120, 200, 50, 80, 70, ];
+const lineData = [150, 230, 24, 218, 135,];
+const max = data
+  .concat(lineData)
+  .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
+// 背景颜色
+const color = [
+  {
+    type: "linear",
+    x: 0,
+    x2: 0,
+    y: 0,
+    y2: 1,
+    colorStops: [
+      {
+        offset: 0,
+        color: "rgba(142, 187, 255, 1)",
+      },
+      {
+        offset: 0.5,
+        color: "rgba(142, 187, 255, 0.5)",
+      },
+      {
+        offset: 1,
+        color: "rgba(142, 187, 255, 0.20)",
+      },
+    ],
+  },
+];
+const option = {
+  tooltip: {
+    trigger: "axis",
+    formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
+    axisPointer: {
+      type: "cross",
+      label: {
+        backgroundColor: "#3F82F7", //提示文字标题颜色
+      },
+    },
+  },
+  legend: {
+    data: ["救助金额", "救助人数"],
+    top: "8%",
+    textStyle: {
+      fontSize: 12,
+      color: "#ffffff", //上文字标题颜色
+    },
+  },
+  grid: {
+    left: "6%",
+    right: "9%",
+    bottom: "0%",
+    containLabel: true,
+    color: "#ffffff",
+  },
+  calculable: true,
+  color,
+  xAxis: [
+    {
+      type: "category",
+
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      axisTick: {
+      show: false, // 设置轴刻度不显示
+    },
+      data: ["2019", "2020", "2021", "2022", "2023"],
+    },
+    {
+      type: "category",
+      show: false,
+      data: ["2019", "2020", "2021", "2022", "2023"],
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      scale: true,
+      name: "救助人数",
+      max: max,
+      splitLine: {
+        //分割线配置
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //y轴文字的配置
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+          type: "solid",
+        },
+      },
+    },
+    {
+      type: "value",
+      scale: true,
+      min: 0,
+      max: max,
+      name: "救助金额/万",
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //y轴文字的配置
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      axisLine: {
+        //y轴线的颜色以及宽度
+        show: false,
+        lineStyle: {
+          color: "#ffffff",
+          width: 1,
+          type: "solid",
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      name: "救助金额",
+      data: data,
+      barWidth: 20,
+      type: "bar",
+    },
+    {
+      name: "救助人数",
+      data: lineData,
+      type: "line", //线状图
+      itemStyle: {
+        borderColor: "#00FCFF",
+        borderWidth: 1,
+        color: "#00FCFF",
+      },
+    },
+    {
+      xAxisIndex: 1,
+      itemStyle: {
+        color: "rgba(180, 180, 180, 0.2)", //外阴影背景
+      },
+      data: data.map(() => max),
+      barWidth: 40, //外阴影背景宽
+      emphasis: {
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            x2: 0,
+            y: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(64, 247, 176, 0.25)",
+              },
+              {
+                offset: 1,
+                color: "rgba(17, 34, 64, 0.25)",
+              },
+            ],
+          },
+        },
+      },
+      type: "bar",
+    },
+  ],
+};
+
+// 使用生命钩子
+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>