浏览代码

修改图表

Q-ABAB 2 年之前
父节点
当前提交
5a4b7077d2
共有 1 个文件被更改,包括 11 次插入8 次删除
  1. 11 8
      src/views/echarts.vue

+ 11 - 8
src/views/echarts.vue

@@ -136,13 +136,12 @@
               data: [
                 {
                   value: 30,
-                  name:"个人创客"
+                  name:"创客活动"
                 },
                 {
                   value: 70,
-                  name:"创客活动"
+                  name:"个人创客"
                 },
-              
               ],
             }
           ]
@@ -152,6 +151,7 @@
           grid: {
             top: 80, // 设置网格顶部的边距为 50px 
             left:10,
+            bottom:0,
             right:"100px"
             // left:'-10px'
           },
@@ -161,7 +161,7 @@
           dataset: {
             source: [
               ['amount', 'product'],
-              [ 100, '物联网激光切割器'],
+              [ 0, '物联网激光切割器'],
               [ 1000, '人工智能领跑马拉松'],
               [ 2000, '3D演奏智能工具'],
               [ 3000, '人工智能分链机器'],
@@ -180,10 +180,9 @@
           yAxis: {
             type: 'category',
             zlevel:1,
-            splitNumber:5,
             axisLabel:{
               inside:true,
-              margin:10,
+              margin:4,
               formatter: function (value) {
                 const vl = Math.floor(value.length/2);
                 let newText = value.slice(0,vl)+'\n'+value.slice(vl)
@@ -199,7 +198,11 @@
           series: [
             {
               type: 'bar',
-              barWidth:50,
+              barWidth:55,
+              label:{
+                show:true,
+                position:"right"
+              },
               encode: {
                 x: 'amount',
                 y: 'product'
@@ -269,7 +272,7 @@
             }
           },
           // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
-          series: [{ type: 'bar' }]
+          series: [{ type: 'bar' ,itemStyle:{color:"#5aaef3"}}]
         },
         tableData: []
       };