数据检测图形完成

src/views/echarts.vue

@@ -28,15 +28,13 @@
 
       <!-- 中部大饼区开始 -->
      <div class="midBlock">
-        <div class="mid" style="background: ;"></div>
-        <div class="mid"></div>
+        <div ref="Circular" class="mid"></div>
+        <div ref="Horizontal" class="mid"></div>
      </div>
       <!-- 中部大饼区结束 -->
 
       <!-- 柱状图区域开始 -->
-      <div class="histogram">
-        
-      </div>
+      <div ref="Columnar" class="histogram"></div>
       <!-- 柱状图区域结束 -->
 
       <!-- 底部表格区域开始 -->
@@ -108,17 +106,191 @@
   </template>
     
   <script>
- 
+ import * as echarts from 'echarts';
   export default {
    
     data() {
       return {
+        //圆形
+        CircularData:{
+          title:{
+            text:"创新创业项目类型"
+          },
+          legend: {
+            data:[
+              "创客活动",
+              "个人创客"
+            ],
+            orient: 'vertical',
+            top:"10%",
+            left:"left"
+          },
+          series: [
+            {
+              type: 'pie',
+              label: {
+                show:true,
+                position:"inner",
+                formatter:'{d}%'
+              },
+              data: [
+                {
+                  value: 30,
+                  name:"个人创客"
+                },
+                {
+                  value: 70,
+                  name:"创客活动"
+                },
+              
+              ],
+            }
+          ]
+        },
+        //横行的柱状
+        HorizontalData:{
+          grid: {
+            top: 80, // 设置网格顶部的边距为 50px 
+            left:10,
+            right:"100px"
+            // left:'-10px'
+          },
+          title:{
+            text:"创客活动资金"
+          },
+          dataset: {
+            source: [
+              ['amount', 'product'],
+              [ 100, '物联网激光切割器'],
+              [ 1000, '人工智能领跑马拉松'],
+              [ 2000, '3D演奏智能工具'],
+              [ 3000, '人工智能分链机器'],
+            ],
+          },
+          xAxis: { 
+            position:"top",
+            name:"单位：万元",
+            nameTextStyle:{
+              fontSize:14,
+              align:"left",
+              verticalAlign:"bottom",
+              padding:[0,0,7,10],
+            }
+          },
+          yAxis: {
+            type: 'category',
+            zlevel:1,
+            axisLabel:{
+              inside:true,
+              margin:10,
+              formatter: function (value) {
+                const vl = Math.floor(value.length/2);
+                let newText = value.slice(0,vl)+'\n'+value.slice(vl)
+                return newText;
+            },
+            color:(value,index)=>{
+              const textWidth = this.HorizontalData['dataset']['source'][this.HorizontalData['dataset']['source'].length-1][0]/6/2;
+              const vl = this.HorizontalData['dataset']['source'][index+1][0]
+              return vl >= textWidth ? 'white' : '#3c4654';
+            }
+            },
+          },
+          series: [
+            {
+              type: 'bar',
+              encode: {
+                x: 'amount',
+                y: 'product'
+              },
+              itemStyle:{
+                color:"#3eb370"
+              }
+            }
+          ]
+        },
+        // 柱状
+        ColumnarData:{
+          grid: {
+            top: 80,
+          },
+          title:{
+            text:"个人创客资金",
+            top:0
+          },
+          dataset: {
+            // 提供一份数据。
+            source: [
+              ['3D智能分链机器', 2000],
+              ['3D智能分链机器1',3000],
+              ['3D智能分链机器2', 2500],
+              ['3D智能分链机器3', 1000],
+              ['3D智能分链机器4', 2000],
+              ['3D智能分链机器5',3000],
+              ['3D智能分链机器6', 2500],
+              ['3D智能分链机器7', 1000],
+              ['3D智能分链机器8', 2000],
+              ['3D智能分链机器9',3000],
+              ['3D智能分链机器10', 2500],
+              ['3D智能分链机器11', 1000],
+              ['3D智能分链机器12', 2000],
+              ['3D智能分链机器13',3000],
+              ['3D智能分链机器14', 2500],
+              ['3D智能分链机器15', 1000],
+            ]
+          },
+          // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
+          xAxis: { 
+            type: 'category',
+            axisLabel: {
+              formatter: function (value) {
+                // 设置每行显示的最大字符数
+                var maxLength = 4;
+                // 计算文本需要换行的行数
+                var rowNumber = Math.ceil(value.length / maxLength);
+                // 拼接换行后的文本
+                var newText = '';
+                for (var i = 0; i < rowNumber; i++) {
+                  var start = i * maxLength;
+                  var end = start + maxLength;
+                  newText += value.slice(start, end) + '\n';
+                }
+                return newText;
+              }
+            }
+          },
+          // 声明一个 Y 轴，数值轴。
+          yAxis: {
+            name:"单位：万元",
+            nameTextStyle:{
+              fontSize:14,
+              align:"center",
+            }
+          },
+          // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
+          series: [{ type: 'bar' }]
+        },
         tableData: []
       };
     },
     methods: {
-
-    }
+      setCircularData(){
+        const Circular = echarts.init(this.$refs['Circular']);
+        Circular.setOption(this.CircularData)
+      },
+      setHorizontalData(){
+        const Horizontal = echarts.init(this.$refs['Horizontal']);
+        Horizontal.setOption(this.HorizontalData)
+      },
+      setColumnarData(){
+        const Columnar = echarts.init(this.$refs['Columnar']);
+        Columnar.setOption(this.ColumnarData)
+      }
+    },
+    mounted() {
+      this.setCircularData();
+      this.setHorizontalData();
+      this.setColumnarData();
+    },
   };
   </script>
     
@@ -164,7 +336,7 @@
   }
   .midBlock{     //中部大饼
     width: 100%;
-    height: 300px;
+    height: 400px;
     margin-top: 20px;
     // background: #ce7070;
     display: flex;
@@ -173,14 +345,18 @@
     .mid{
       height: 95%;
       width: 49%;
+      padding: 20px;
+      box-sizing: border-box;
       background: #f3f6f7;
     }
   }
 
   .histogram{       //柱状图
     margin-top: 20px;
+    box-sizing: border-box;
+    padding: 20px;
     width: 100%;
-    height: 350px;
+    height: 400px;
     background: #f3f6f7;
   }