扇形

src/components/generateEcharts/index.vue

@@ -35,6 +35,7 @@
             </el-form-item>
           </el-form>
           <el-form
+          v-if="type == 1"
             :model="inHourDataOption"
             ref="foldline"
           >
@@ -65,7 +66,30 @@
               </el-select>
             </el-form-item>
             <el-form-item label="x轴颜色">
-              <el-input clearable v-model="inHourDataOption.xAxis[0].axisLine.lineStyle.color"  size="small" placeholder="请输入折点颜色"></el-input>
+              <el-input clearable v-model="inHourDataOption.xAxis[0].axisLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="y轴颜色">
+              <el-input clearable v-model="inHourDataOption.yAxis[0].axisLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="y轴网线">
+              <el-select
+                v-model="inHourDataOption.yAxis[0].splitLine.show"
+                filterable
+                default-first-option
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in optionbreaky"
+                  :key="item.v"
+                  :label="item.k"
+                  :value="item.v"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="网线颜色">
+              <el-input clearable v-model="inHourDataOption.yAxis[0].splitLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
             </el-form-item>
             <el-form-item label="折线颜色">
               <el-input clearable v-model="inHourDataOption.series[0].itemStyle.normal.lineStyle.color"  size="small" placeholder="请输入折线颜色"></el-input>
@@ -94,6 +118,43 @@
               <el-input clearable v-model="inHourDataOption.series[0].symbolSize"  size="small" placeholder="折点大小"></el-input>
             </el-form-item>
           </el-form>
+          <el-form
+          v-if="type == 2"
+            :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="图形x轴">
+              <el-input clearable type="string" v-model="inHourDataOption.xAxis.data"  size="small" placeholder="请输入x轴名称"></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="x轴颜色">
+              <el-input clearable v-model="inHourDataOption.xAxis.axisLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="y轴颜色">
+              <el-input clearable v-model="inHourDataOption.yAxis.axisLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="网线颜色">
+              <el-input clearable v-model="inHourDataOption.yAxis.splitLine.lineStyle.color"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="柱子宽度">
+              <el-input clearable v-model="inHourDataOption.series[0].barWidth"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="柱上颜色">
+              <el-input clearable v-model="inHourDataOption.series[0].itemStyle.color.colorStops[0].color"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="柱中颜色">
+              <el-input clearable v-model="inHourDataOption.series[0].itemStyle.color.colorStops[1].color"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="柱下颜色">
+              <el-input clearable v-model="inHourDataOption.series[0].itemStyle.color.colorStops[2].color"  size="small" placeholder="请输入"></el-input>
+            </el-form-item>
+          </el-form>
+
         </div>
       </el-drawer>
     <div class="cont">
@@ -139,13 +200,20 @@ const barOption = {
   xAxis: [
     {
       type: 'category',
+      show: true,
       boundaryGap: false,
       axisLine:{
         lineStyle:{
-          color:'#000000',
+          color:'red',
           width:2
         }
       },
+      splitLine: {  
+        show:false,   //X网格线
+        lineStyle:{   //x网格线
+          color: '#000000'
+        }
+      },
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     }
   ],
@@ -153,11 +221,20 @@ const barOption = {
     {
       type: 'value',
         //y轴颜色
-        axisLine: {
-            lineStyle: {
-                color: '#0000000'
-            }
-        },
+      axisLine: { 
+        lineStyle: {   // Y 轴颜色配置
+          color: '#3366CC'  
+        } 
+      },
+      splitArea: {
+        show: true  //y网格区域颜色
+      },
+      splitLine: {
+        show:false,     //y网格线
+        lineStyle:{
+          color: '#ffffff'
+        }
+      },
     }
   ],
   series: [
@@ -182,13 +259,162 @@ const barOption = {
     }
   ]
 };
+const hisOption = {
+  title: {
+    text: 'Stacked Area Chart'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  legend: {
+    data: ['Email']
+  },
+  xAxis: {
+    type: 'category',
+    show: true,
+      // boundaryGap: false,
+      axisLine:{
+        lineStyle:{
+          color:'red',
+          width:2
+        }
+      },
+      splitLine: {  
+        show:false,   //X网格线
+        lineStyle:{   //x网格线
+          color: '#000000'
+        }
+      },
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value',
+            //y轴颜色
+    axisLine: { 
+      lineStyle: {   // Y 轴颜色配置
+        color: '#3366CC'  
+      } 
+    },
+    splitArea: {
+      show: true  //y网格区域颜色
+    },
+    splitLine: {
+      show:false,     //y网格线
+      lineStyle:{
+        color: '#ffffff'
+      }
+    },
+  },
+  series: [
+    {
+      name: 'Email',
+      data: [120, 200, 150, 80, 70, 110, 130],
+      type: 'bar',
+      barWidth: '20',
+      showBackground: true,
+      backgroundStyle: {
+        color: 'rgba(180, 180, 180, 0.2)'
+      },
+      itemStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#595FAE", // 0% 处的颜色
+            },
+            {
+              offset: 0.2,
+              color: "#595FAE", // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: "#595FAE", // 100% 处的颜色
+            },
+          ],
+        },
+      }
+    }
+  ]
+};
+const cakeOption = {
+  title: {
+    text: 'Referer of a Website',
+    subtext: 'Fake Data',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ["40%", "60%"],
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    },
+        {
+      name: "访问来源",
+      type: "pie",
+      // silent:true,
+      radius: ["0%", "30%"],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+      },
+      color: ["red"],
+      itemStyle: {
+        normal: {
+          color: function (params) {
+            let colorList = ["#3893F0", "#4ECAE9"];
+            return colorList[params.dataIndex];
+          },
+        },
+      },
+      labelLine: {
+        show: false,
+      },
+      data: [
+        { value: 1048, name: "搜索引擎" },
+        { value: 735, name: "直接访问" },
+      ],
+    },
+  ]
+};
 export default {
   name: "Newecharts",
   props: {
   },
   data () {
     return {
-      inHourDataOption: this._.cloneDeep(barOption),
+      inHourDataOption: null,
       drawer: false,
       tableForm: {
         parenttype: ''
@@ -225,6 +451,14 @@ export default {
         v: 'none',
         k: '取消'
       }],
+      optionbreaky:[{
+        v: true,
+        k: '启动'
+      },
+      {
+        v: false,
+        k: '取消'
+      }],
     }
   },
   components: {
@@ -235,10 +469,13 @@ export default {
       handler (val) {
         if (val.parenttype == '折线图') {
           this.type = 1
+          this.inHourDataOption = this._.cloneDeep(barOption)
         } else if (val.parenttype == '柱状图') {
           this.type = 2
+          this.inHourDataOption = this._.cloneDeep(hisOption)
         } else if (val.parenttype == '饼图') {
           this.type = 3
+          this.inHourDataOption = this._.cloneDeep(cakeOption)
         } else if (val.parenttype == '柱状雷达图图') {
           this.type = 4
         }