饼子图

src/components/generateEcharts/components/echart/commonChartsLine.js

@@ -11,59 +11,32 @@ export default {
     return {
       options: {
         title: {
-          text: ''
+          text: 'Basic Radar Chart'
         },
         legend: {
-          data: [],
-          left: 'right'
+          data: ['Allocated Budget', 'Actual Spending']
         },
-        tooltip: {
-          position: 'top',
-          formatter: function (params) {
-            return (
-              params.value[2] +
-              ' commits in ' +
-              hours[params.value[0]] +
-              ' of ' +
-              days[params.value[1]]
-            );
-          }
-        },
-        grid: {
-          left: 2,
-          bottom: 10,
-          right: 10,
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          data: [],
-          boundaryGap: false,
-          splitLine: {
-            show: true
-          },
-          axisLine: {
-            show: false
-          }
-        },
-        yAxis: {
-          type: 'category',
-          data: [],
-          axisLine: {
-            show: false
-          }
+        radar: {
+          // shape: 'circle',
+          indicator: [
+            { name: 'Sales', max: 6500 },
+            { name: 'Administration', max: 16000 },
+            { name: 'Information Technology', max: 30000 },
+            { name: 'Customer Support', max: 38000 },
+            { name: 'Development', max: 52000 },
+            { name: 'Marketing', max: 25000 }
+          ]
         },
         series: [
           {
-            name: 'Punch Card',
-            type: 'scatter',
-            symbolSize: function (val) {
-              return val[2] * 2;
-            },
-            data: [],
-            animationDelay: function (idx) {
-              return idx * 5;
-            }
+            name: 'Budget vs spending',
+            type: 'radar',
+            data: [
+              {
+                value: [4200, 3000, 20000, 35000, 50000, 18000],
+                name: 'Allocated Budget'
+              }
+            ]
           }
         ]
       }

src/components/generateEcharts/index.vue

@@ -154,20 +154,89 @@
               <el-input clearable v-model="inHourDataOption.series[0].itemStyle.color.colorStops[2].color"  size="small" placeholder="请输入"></el-input>
             </el-form-item>
           </el-form>
-
+          <el-form
+          v-if="type == 3"
+            :model="inHourDataOption"
+            ref="foldline"
+          >
+            <el-form-item label="图形名称">
+              <el-input clearable v-model="inHourDataOption.title.text"  size="small" placeholder="图形名称"></el-input>
+            </el-form-item>
+            <el-form-item label="图形标记">
+              <el-input clearable type="string" v-model="inHourDataOption.legend.data"  size="small" placeholder="请输入图形标记"></el-input>
+            </el-form-item>
+            <el-form-item label="外圈颜色">
+              <el-input clearable type="string" v-model="inHourDataOption.series[0].color"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="内圈颜色">
+              <el-input clearable type="string" v-model="inHourDataOption.series[1].color"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="显示名称">
+              <el-select
+                v-model="inHourDataOption.series[0].label.show"
+                filterable
+                default-first-option
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in optionbreakname"
+                  :key="item.v"
+                  :label="item.k"
+                  :value="item.v"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <!-- <el-form-item label="名称位置">
+              <el-select
+                v-model="inHourDataOption.series[0].label.position"
+                filterable
+                default-first-option
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in optionbreakpo"
+                  :key="item.v"
+                  :label="item.k"
+                  :value="item.v"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+            <el-form-item label="外圈大小">
+              <el-input clearable type="string" v-model="inHourDataOption.series[0].radius"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="内圈大小">
+              <el-input clearable type="string" v-model="inHourDataOption.series[1].radius"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-form>
+          <el-form
+          v-if="type == 4"
+            :model="inHourDataOption"
+            ref="foldline"
+          >
+            <el-form-item label="图形名称">
+              <el-input clearable v-model="inHourDataOption.title.text"  size="small" placeholder="图形名称"></el-input>
+            </el-form-item>
+            <el-form-item label="图形标记">
+              <el-input clearable type="string" v-model="inHourDataOption.legend.data"  size="small" placeholder="请输入图形标记"></el-input>
+            </el-form-item>
+          </el-form>
         </div>
       </el-drawer>
     <div class="cont">
-      <BarCharts id="hover" :option="inHourDataOption"/>
+      <BarChartsr id="hover" :option="inHourDataOption" v-if="type == 4"/>
+      <BarCharts id="hover" :option="inHourDataOption" v-else/>
     </div>
-    <!-- <BarCharts :option="inHourDataOption"/> -->
   </div>
 </template>
 
 <script>
 // import StatisticsHeader from "../../components/echart/statisticsHeader.vue";
 import BarCharts from './components/echart/commonChartsBar.vue'
-// import BarChartsr from '../../components/echart/commonChartsLine.vue'
+import BarChartsr from './components/echart/commonChartsLine.vue'
 import { Query } from '@/api/webApi'
 const barOption = {
   title: {
@@ -358,13 +427,27 @@ const cakeOption = {
   },
   legend: {
     orient: 'vertical',
-    left: 'left'
+    left: 'left',
+    data: ['Search Engine','Direct','Email','Union Ads','Video Ads','搜索引擎','直接访问']
   },
   series: [
     {
       name: 'Access From',
       type: 'pie',
       radius: ["40%", "60%"],
+      // itemStyle: {
+      //   normal: {
+      //     color: function (params) {
+      //       let colorList = ["#3893F0", "#4ECAE9"];
+      //       return colorList[params.dataIndex];
+      //     },
+      //   },
+      // },
+      label: {
+        show: false,
+        position: 'left'
+      },
+      color: ["red",'yellow','blue','black','green'],
       data: [
         { value: 1048, name: 'Search Engine' },
         { value: 735, name: 'Direct' },
@@ -372,15 +455,15 @@ const cakeOption = {
         { value: 484, name: 'Union Ads' },
         { value: 300, name: 'Video Ads' }
       ],
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)'
-        }
-      }
+      // emphasis: {
+      //   itemStyle: {
+      //     shadowBlur: 10,
+      //     shadowOffsetX: 0,
+      //     shadowColor: 'rgba(0, 0, 0, 0.5)'
+      //   }
+      // }
     },
-        {
+    {
       name: "访问来源",
       type: "pie",
       // silent:true,
@@ -389,25 +472,58 @@ const cakeOption = {
       label: {
         show: false,
       },
-      color: ["red"],
-      itemStyle: {
-        normal: {
-          color: function (params) {
-            let colorList = ["#3893F0", "#4ECAE9"];
-            return colorList[params.dataIndex];
-          },
-        },
-      },
+      color: ["red",'yellow','blue','black','green'],
+      // color: ["red"],
+      // itemStyle: {
+      //   normal: {
+      //     color: function (params) {
+      //       let colorList = ["#3893F0", "#4ECAE9"];
+      //       return colorList[params.dataIndex];
+      //     },
+      //   },
+      // },
       labelLine: {
         show: false,
       },
       data: [
-        { value: 1048, name: "搜索引擎" },
+        { value: 0, name: "搜索引擎" },
         { value: 735, name: "直接访问" },
       ],
     },
   ]
 };
+const radarOption = {
+  title: {
+    text: 'Basic Radar Chart'
+  },
+  legend: {
+    data: ['Allocated Budget', 'Actual Spending']
+  },
+  radar: {
+    // shape: 'circle',
+    indicator: [
+      { name: 'Sales', max: 6500 },
+      { name: 'Administration', max: 16000 },
+      { name: 'Information Technology', max: 30000 },
+      { name: 'Customer Support', max: 38000 },
+      { name: 'Development', max: 52000 },
+      { name: 'Marketing', max: 25000 }
+    ]
+  },
+  series: [
+    {
+      name: 'Budget vs spending',
+      type: 'radar',
+      data: [
+        {
+          value: [4200, 3000, 20000, 35000, 50000, 18000],
+          name: 'Allocated Budget'
+        }
+      ]
+    }
+  ]
+};
+
 export default {
   name: "Newecharts",
   props: {
@@ -459,10 +575,27 @@ export default {
         v: false,
         k: '取消'
       }],
+      optionbreakname:[{
+        v: true,
+        k: '显示'
+      },
+      {
+        v: false,
+        k: '关闭'
+      }],
+      optionbreakpo:[{
+        v: 'left',
+        k: '外'
+      },
+      {
+        v: 'center',
+        k: '里'
+      }],
     }
   },
   components: {
-    BarCharts
+    BarCharts,
+    BarChartsr
   },
   watch: {
     tableForm: {
@@ -476,10 +609,10 @@ export default {
         } else if (val.parenttype == '饼图') {
           this.type = 3
           this.inHourDataOption = this._.cloneDeep(cakeOption)
-        } else if (val.parenttype == '柱状雷达图图') {
+        } else if (val.parenttype == '雷达图') {
           this.type = 4
+          this.inHourDataOption = this._.cloneDeep(radarOption)
         }
-        // this.inHourDataOption = val.parenttype
       },
       deep: true,
       immediate: true,