components.d.ts

@@ -28,7 +28,6 @@ declare module 'vue' {
     CustomEchartPieGauge: typeof import('./src/components/custom-echart-pie-gauge/index.vue')['default']
     CustomEchartRadar: typeof import('./src/components/custom-echart-radar/index.vue')['default']
     CustomEchartScatterBlister: typeof import('./src/components/custom-echart-scatter-blister/index.vue')['default']
-    CustomEchartTriangle: typeof import('./src/components/custom-echart-triangle/index.vue')['default']
     CustomEchartWaterDroplet: typeof import('./src/components/custom-echart-water-droplet/index.vue')['default']
     CustomEchartWordCloud: typeof import('./src/components/custom-echart-word-cloud/index.vue')['default']
     CustomIframe: typeof import('./src/components/custom-iframe/index.vue')['default']

src/components/custom-echart-triangle/index.vue

@@ -1,125 +0,0 @@
-<template>
-  <div ref="chartRef" :style="{ height, width }"></div>
-</template>
-<script>
-import { ref, reactive, watch, watchEffect } from 'vue';
-import { cloneDeep } from 'lodash';
-import { useEcharts } from '@/hooks/useEcharts';
-
-export default {
-  name: 'CustomEchartTriangle',
-  props: {
-    chartData: {
-      type: Array,
-      default: () => [],
-    },
-    size: {
-      type: Object,
-      default: () => {},
-    },
-    option: {
-      type: Object,
-      default: () => ({}),
-    },
-    width: {
-      type: String,
-      default: '100%',
-    },
-    height: {
-      type: String,
-      default: 'calc(100vh - 78px)',
-    },
-  },
-  emits: ['click'],
-  setup(props, { emit }) {
-    const chartRef = ref(null);
-    const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
-    const option = reactive({
-      tooltip: {
-        // trigger: 'axis',
-        // axisPointer: {
-        //   type: 'shadow',
-        // },
-        backgroundColor: 'rgba(18, 55, 85, 0.8);',
-        borderColor: '#35d0c0',
-        formatter: (data) => {
-          const params = data.data;
-          let str = `<div class="custom-echarts-tips">
-                            <span>${params.name}</span><br/>
-                            <span>${params.reaVal}%</span>
-                        </div>`;
-          return str;
-        },
-      },
-      series: [
-        {
-          zlevel: 1,
-          name: '漏斗图',
-          type: 'funnel',
-          left: 'center',
-          width: '28%',
-          sort: 'ascending',
-          gap: 0,
-          label: {
-            show: true,
-            position: 'right',
-            width: '200px',
-            align: 'right',
-            formatter: function (params) {
-              let arr = [`{a|${params.data.name}}`, `{b| ${params.data.reaVal}%}`];
-              return arr.join('\n');
-              // params.data.name + ':' + params.data.reaVal + '%'};
-            },
-            rich: {
-              a: { color: '#fff', fontSize: '16px' },
-              b: { color: '#05FCC6', fontSize: '16px' },
-            },
-          },
-          labelLine: {
-            show: false,
-          },
-          itemStyle: {
-            show: false,
-            borderColor: '#fff',
-            borderWidth: 1,
-          },
-          emphasis: {
-            label: {
-              fontSize: 20,
-            },
-          },
-          data: [],
-        },
-      ],
-    });
-
-    watchEffect(() => {
-      props.chartData && initCharts();
-    });
-
-    watch(
-      () => props.size,
-      () => {
-        resize();
-      },
-      {
-        immediate: true,
-      }
-    );
-
-    function initCharts() {
-      if (props.option) {
-        Object.assign(option, cloneDeep(props.option));
-      }
-      option.series[0].data = props.chartData;
-      setOptions(option);
-    }
-
-    function onClick(params) {
-      emit('click', params);
-    }
-
-    return { chartRef };
-  },
-};
-</script>

src/components/custom-scroll-title/index.vue

@@ -57,7 +57,7 @@ const props = defineProps({
         { label: '首页', value: 'home' },
         { label: '土地资源', value: 'land' },
         { label: '投入品监管', value: 'inputs' },
-        { label: '产出品管理', value: 'entities' },
+        { label: '生产经营主体', value: 'entities' },
         // { label: '智慧种植监测', value: 'plant' },
         // { label: '智慧养殖监测', value: 'breed' },
         { label: '全流程溯源', value: 'trace' },

src/components/index.js

@@ -22,7 +22,7 @@ import customEchartMaps from './custom-echart-maps';
 import customScrollTitle from './custom-scroll-title';
 import customEchartHyalineCake from './custom-echart-hyaline-cake';
 import customEchartColumnLine from './custom-echart-column-line';
-import customEchartTriangle from './custom-echart-triangle';
+
 export {
   SvgIcon,
   CustomIframe,
@@ -48,5 +48,4 @@ export {
   customScrollTitle,
   customEchartHyalineCake,
   customEchartColumnLine,
-  customEchartTriangle,
 };

src/router/modules/v2.js

@@ -29,7 +29,7 @@ export default {
       path: 'entities',
       name: 'entities',
       component: () => import('@/views/entities/index.vue'),
-      meta: { title: '产出品管理', icon: '' },
+      meta: { title: '生产经营主体', icon: '' },
     },
     // {
     //   path: 'breed',

src/views/entities/components/categoryCharts.vue

@@ -29,27 +29,12 @@ const option = reactive({
   k: 0.2,
   opacity: 0.6,
   itemGap: 0,
-  autoItemHeight: 3,
+  autoItemHeight: 10,
   legend: {
     orient: 'horizontal',
     bottom: 10,
     left: 'center',
   },
-  title: {
-    text: '23亿元',
-    textStyle: {
-      color: '#fff',
-      fontSize: '26px',
-      fontWeight: 'bold',
-    },
-    subtext: '22.2%',
-    subtextStyle: {
-      color: '#07f7c4',
-      fontSize: '18px',
-    },
-    top: 'center',
-    left: 'center',
-  },
   grid3D: {
     show: false,
     boxHeight: 5,

src/views/entities/components/entitiesCategoryCharts.vue

@@ -44,14 +44,12 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
-      borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips">
-     <span>${params.name}</span><br/>
+          <span>${params.name}</span><br/>
-     <span>${params.marker} ${params.data} 万元</span>
+          <span>${params.marker} ${params.data} 万元</span>
-    </div>`;
+        </div>`;
         return str;
       },
     },

src/views/entities/components/hotCharts.vue

@@ -1,18 +1,84 @@
 <template>
   <div ref="chartsWarp" class="hot-charts">
-    <custom-echart-triangle :chart-data="data" height="100%" :option="option" />
+    <custom-echart-bubble :chart-data="seriesData" height="100%" :option="chartsData.option" />
   </div>
 </template>
 <script setup>
 import { ref, reactive, onMounted } from 'vue';
 
-const data = ref([
+const chartsData = reactive({
-  { value: 40, name: '一级', reaVal: '20' },
+  option: {},
-  { value: 80, name: '二级', reaVal: '30' },
+  valData: [
-  { value: 120, name: '三级', reaVal: '50' },
+    { name: '多菌灵', value: 6833.37 },
-]);
+    { name: '复合肥', value: 6823.93 },
-const option = reactive({});
+    { name: '水溶肥', value: 3529.8 },
-onMounted(() => {});
+    { name: '大豆种子', value: 9773.04 },
+    { name: '农膜', value: 2992.33 },
+    { name: '草甘膦', value: 1448.23 },
+    { name: '其他', value: 3800.77 },
+  ],
+});
+
+let chartsWarp = ref(null);
+let seriesData = reactive([]);
+
+const compare = (propertyName) => {
+  return (object1, object2) => {
+    var value1 = object1[propertyName];
+    var value2 = object2[propertyName];
+    if (value2 < value1) {
+      return 1;
+    } else if (value2 > value1) {
+      return -1;
+    } else {
+      return 0;
+    }
+  };
+};
+
+onMounted(() => {
+  if (chartsData.valData && chartsData.valData.length) {
+    let datas = chartsData.valData.sort(compare('value')).reverse();
+    let maxValue = datas[0].value;
+    let colors = ['#4983F5', '#3D993D', '#525CCC', '#3344FF', '#39ACE5', '#008099', '#2985CC'];
+    let total = datas.reduce((acc, current) => {
+      return acc + current.value;
+    }, 0);
+    for (var i = 0; i < datas.length; i++) {
+      let acct = parseFloat((datas[i].value / total).toFixed(2));
+      if (acct < 0.2) {
+        acct = 0.2;
+      }
+      if (acct > 0.6) {
+        acct = 0.6;
+      }
+      let reference =
+        chartsWarp.value.clientHeight < chartsWarp.value.clientWidth
+          ? parseInt(chartsWarp.value.clientHeight)
+          : parseInt(chartsWarp.value.clientWidth);
+
+      var ss = parseInt(acct * reference * 1.3);
+      var color = colors[i];
+      var item = {
+        name: datas[i].name,
+        value: datas[i].value,
+        symbolSize: ss,
+        draggable: true,
+        itemStyle: {
+          normal: {
+            shadowBlur: 10,
+            shadowColor: color,
+            color: color,
+          },
+        },
+      };
+
+      seriesData.push(item);
+    }
+
+    console.info('seriesData', seriesData);
+  }
+});
 </script>
 <style lang="scss" scoped>
 .hot-charts {