feat: 新增首个图表布局

src/assets/scss/style.scss

@@ -40,6 +40,12 @@ a {
   }
 }
 
+// 图标
+.iconfont {
+  font-size: 20px!important;
+  color: #5cd9e8;
+}
+
 //浮动
 .float-r {
   float: right;

src/common/map/theme.js

@@ -0,0 +1,453 @@
+const theme = {
+  color: ['#2d8cf0', '#19be6b', '#ff9900', '#E46CBB', '#9A66E4', '#ed3f14'],
+  backgroundColor: 'rgba(0,0,0,0)',
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: '#516b91'
+    },
+    subtextStyle: {
+      color: '#93b7e3'
+    }
+  },
+  line: {
+    itemStyle: {
+      normal: {
+        borderWidth: '2'
+      }
+    },
+    lineStyle: {
+      normal: {
+        width: '2'
+      }
+    },
+    symbolSize: '6',
+    symbol: 'emptyCircle',
+    smooth: true
+  },
+  radar: {
+    itemStyle: {
+      normal: {
+        borderWidth: '2'
+      }
+    },
+    lineStyle: {
+      normal: {
+        width: '2'
+      }
+    },
+    symbolSize: '6',
+    symbol: 'emptyCircle',
+    smooth: true
+  },
+  bar: {
+    itemStyle: {
+      normal: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc'
+      },
+      emphasis: {
+        barBorderWidth: 0,
+        barBorderColor: '#ccc'
+      }
+    }
+  },
+  pie: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  scatter: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  boxplot: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  parallel: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  sankey: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  funnel: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  gauge: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      },
+      emphasis: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    }
+  },
+  candlestick: {
+    itemStyle: {
+      normal: {
+        color: '#edafda',
+        color0: 'transparent',
+        borderColor: '#d680bc',
+        borderColor0: '#8fd3e8',
+        borderWidth: '2'
+      }
+    }
+  },
+  graph: {
+    itemStyle: {
+      normal: {
+        borderWidth: 0,
+        borderColor: '#ccc'
+      }
+    },
+    lineStyle: {
+      normal: {
+        width: 1,
+        color: '#aaa'
+      }
+    },
+    symbolSize: '6',
+    symbol: 'emptyCircle',
+    smooth: true,
+    color: ['#2d8cf0', '#19be6b', '#f5ae4a', '#9189d5', '#56cae2', '#cbb0e3'],
+    label: {
+      normal: {
+        textStyle: {
+          color: '#eee'
+        }
+      }
+    }
+  },
+  map: {
+    itemStyle: {
+      normal: {
+        areaColor: '#f3f3f3',
+        borderColor: '#516b91',
+        borderWidth: 0.5
+      },
+      emphasis: {
+        areaColor: 'rgba(165,231,240,1)',
+        borderColor: '#516b91',
+        borderWidth: 1
+      }
+    },
+    label: {
+      normal: {
+        textStyle: {
+          color: '#000'
+        }
+      },
+      emphasis: {
+        textStyle: {
+          color: 'rgb(81,107,145)'
+        }
+      }
+    }
+  },
+  geo: {
+    itemStyle: {
+      normal: {
+        areaColor: '#f3f3f3',
+        borderColor: '#516b91',
+        borderWidth: 0.5
+      },
+      emphasis: {
+        areaColor: 'rgba(165,231,240,1)',
+        borderColor: '#516b91',
+        borderWidth: 1
+      }
+    },
+    label: {
+      normal: {
+        textStyle: {
+          color: '#000'
+        }
+      },
+      emphasis: {
+        textStyle: {
+          color: 'rgb(81,107,145)'
+        }
+      }
+    }
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#cccccc'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333'
+      }
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#eeeeee']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
+      }
+    }
+  },
+  valueAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#cccccc'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333'
+      }
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#eeeeee']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
+      }
+    }
+  },
+  logAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#cccccc'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333'
+      }
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: '#999999'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#eeeeee']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
+      }
+    }
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#cccccc'
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333'
+      }
+    },
+    axisLabel: {
+      show: true,
+      textStyle: {
+        color: '#999999'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#eeeeee']
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
+      }
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      normal: {
+        borderColor: '#999'
+      },
+      emphasis: {
+        borderColor: '#666'
+      }
+    }
+  },
+  legend: {
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: '#ccc',
+        width: 1
+      },
+      crossStyle: {
+        color: '#ccc',
+        width: 1
+      }
+    }
+  },
+  timeline: {
+    lineStyle: {
+      color: '#8fd3e8',
+      width: 1
+    },
+    itemStyle: {
+      normal: {
+        color: '#8fd3e8',
+        borderWidth: 1
+      },
+      emphasis: {
+        color: '#8fd3e8'
+      }
+    },
+    controlStyle: {
+      normal: {
+        color: '#8fd3e8',
+        borderColor: '#8fd3e8',
+        borderWidth: 0.5
+      },
+      emphasis: {
+        color: '#8fd3e8',
+        borderColor: '#8fd3e8',
+        borderWidth: 0.5
+      }
+    },
+    checkpointStyle: {
+      color: '#8fd3e8',
+      borderColor: 'rgba(138,124,168,0.37)'
+    },
+    label: {
+      normal: {
+        textStyle: {
+          color: '#8fd3e8'
+        }
+      },
+      emphasis: {
+        textStyle: {
+          color: '#8fd3e8'
+        }
+      }
+    }
+  },
+  visualMap: {
+    color: ['#516b91', '#59c4e6', '#a5e7f0']
+  },
+  dataZoom: {
+    backgroundColor: 'rgba(0,0,0,0)',
+    dataBackgroundColor: 'rgba(255,255,255,0.3)',
+    fillerColor: 'rgba(167,183,204,0.4)',
+    handleColor: '#a7b7cc',
+    handleSize: '100%',
+    textStyle: {
+      color: '#333'
+    }
+  },
+  markPoint: {
+    label: {
+      normal: {
+        textStyle: {
+          color: '#eee'
+        }
+      },
+      emphasis: {
+        textStyle: {
+          color: '#eee'
+        }
+      }
+    }
+  }
+}
+export default theme

src/components/echart/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    ref="chartRef"
+    :id="id"
+    :class="className"
+    :style="{ height: height, width: width }"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue'
+import '@/common/map/fujian'
+import theme from '@/common/map/theme' // 引入默认主题
+import * as echarts from "echarts";
+
+const PropsType = {
+  id: String,
+  className: {
+    type: String,
+    default: 'chart'
+  },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  height: {
+    type: String,
+    default: '400px'
+  },
+  options: {
+    type: Object,
+    default: () => ({})
+  }
+} as const
+
+export default defineComponent({
+  name: 'Echarts',
+  props: PropsType,
+  setup(props) {
+    const chartRef = ref<HTMLElement>()
+    const chart = ref<any>();
+    // 定义实例
+    chart.value = echarts.init(chartRef.value, 'myTheme')
+    
+    // 生命周期
+    onMounted(() => {
+      echarts.registerTheme('myTheme', theme) // 覆盖默认主题
+      initChart()
+    })
+
+    // 初始化echart
+    const initChart = () => {
+      chart.value.setOption(props.options, true)
+    }
+    return {chartRef}
+  }
+})
+</script>

src/main.ts

@@ -12,8 +12,6 @@ import * as echarts from 'echarts';
 
 const app = createApp(App)
 
-// 全局挂载
-app.config.globalProperties.$echarts = echarts
 app.use(dataV)
 app.use(store)
 app.use(router)

src/views/centerLeft1/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="centreLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon class="iconfont icon-tongji4"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务通过率</span>
+          <dv-decoration-3 class="dv-dec-3" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <CentreLeft1Chart />
+      </div>
+      <!-- 4个主要的数据 -->
+      <div class="bottom-data">
+        <div class="item-box" v-for="(item, index) in numberData" :key="index">
+          <div class="d-flex jc-end">
+            <span class="coin">￥</span>
+            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
+          </div>
+          <p>
+            <span> {{ item.text }} </span>
+            <span class="colorYellow">(件)</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, reactive } from 'vue'
+
+export default defineComponent({
+  setup() {
+    // 下层数据
+    const numberData = reactive([
+      {
+        number: {
+          number: [15],
+          toFixed: 1,
+          content: '{nt}'
+        },
+        text: '今日构建总量'
+      },
+      {
+        number: {
+          number: [144],
+          toFixed: 1,
+          content: '{nt}'
+        },
+        text: '总共完成数量'
+      },
+      {
+        number: {
+          number: [361],
+          toFixed: 1,
+          content: '{nt}'
+        },
+        text: '正在编译数量'
+      },
+      {
+        number: {
+          number: [157],
+          toFixed: 1,
+          content: '{nt}'
+        },
+        text: '未通过数量'
+      }
+    ])
+
+    onMounted(()=>{
+      changeTiming()
+    })
+
+    const changeTiming = () => {
+      setInterval(() => {
+        changeNumber()
+      }, 2000)
+    }
+    const changeNumber = () => {
+      numberData.forEach((item, index) => {
+        item.number.number[0] += ++index
+        item.number = { ...item.number }
+      })
+    }
+    return { numberData }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.centreLeft1 {
+  padding: 16px;
+  height: 410px;
+  min-width: 300px;
+  border-radius: 5px;
+  .bg-color-black {
+    height: 385px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+
+  .bottom-data {
+    .item-box {
+      &>div{
+        padding-right: 10px;
+      }
+      float: right;
+      position: relative;
+      width: 50%;
+      color: #d3d6dd;
+      .dv-digital-flop {
+        width: 80px;
+        height: 40px;
+      }
+      // 金币
+      .coin {
+        font-size: 20px;
+        color: #ffc107;
+        line-height: 40px;
+      }
+      .colorYellow {
+        color: yellowgreen;
+      }
+      p {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/views/index.vue

@@ -54,7 +54,7 @@
           <div class="content-box">
             <div>
               <dv-border-box-12>
-                <!-- <centerLeft1 /> -->
+                <centerLeft1 />
               </dv-border-box-12>
             </div>
             <div>
@@ -98,8 +98,12 @@ import { formatTime } from '@/utils/index'
 import { WEEK } from '@/constant/index'
 import useIndex from '@/utils/useDraw'
 import { title, subtitle, moduleInfo } from '@/constant/index'
+import CenterLeft1 from "./centerLeft1/index.vue";
 
 export default defineComponent({
+  components: {
+    CenterLeft1,
+  },
   setup() {
     // * 加载标识
     const loading = ref<boolean>(true)
@@ -150,5 +154,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/scss/index.scss';
+@import '@/assets/scss/index.scss';
 </style>