some modify

src/views/demo/chart.vue

@@ -8,133 +8,9 @@
 
     <polyline-chart-demo />
 
-    <!-- <border-box-7 class="chart-item">
+    <point-chart-demo />
-      <point-chart :data="pointChartData1" :colors="colors" class="chart" />
 
-      <div class="config-info">
+    <radar-chart-demo />
-        <div class="title">Column-Chart</div>
-        <highlight-code>
-&lt;point-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-}
-        </highlight-code>
-      </div>
-    </border-box-7> -->
-
-    <border-box-7 class="chart-item">
-      <radar-chart :data="radarChartData1" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Radar-Chart</div>
-        <highlight-code>
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      data: [450, 50, 450, 50, 450, 50] // 必须
-    },
-    {
-      data: [50, 450, 50, 450, 50, 450]
-    }, ...
-  ],
-  label: {
-    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'] // 必须
-  },
-  // 非必须 不配置该项则不绘制底部label
-  labelLine: {
-    data: ['同期', '环期']
-  }
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <radar-chart :data="radarChartData2" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Radar-Chart</div>
-        <highlight-code>
-&lt;radar-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: {
-  data: [
-    {
-      data: [450, 50, 450, 50, 450, 50],
-      dashed: true // 非必须 为真时绘制虚线
-    },
-    {
-      data: [50, 450, 50, 450, 50, 450],
-      lineColor: '#9cf4df', // 非必须 可配置改数据线条颜色
-      fillColor: 'rgba(238, 233, 108, 0.5)' // 非必须 可配置改数据填充颜色
-    }
-  ],
-  label: {
-    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
-    color: 'colors', // 非必须 可配置文字颜色
-    fontSize: 10 // 非必须 可配置文字大小
-  },
-  labelLine: ['同期', '环期'],
-  rayLineType: 'dashed', // 非必须 设置径向射线为虚线
-  rayLineColor: 'colors', // 非必须 设置径向射线颜色
-  ringNum: 5, // 非必填 设置环线个数
-  ringType: 'polyline', // 非必须 设置环线为折线
-  ringFillType: 'cover', // 非必须 设置环线填充颜色类型为cover
-  ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'], // 非必须 设置环线填充色
-  ringLineType: 'line', // 非必须 设置环线线条为实线
-  ringLineColor: 'rgba(156, 244, 233, 0.2)', // 非必须 设置环线线条颜色
-  rayLineOffset: Math.PI * -1.5, // 非必须 设置雷达图旋转偏移
-  radius: 0.8, // 非必须 设置雷达图最大环线半径
-  max: 550 // 非必须 设置雷达图数据最大值
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <radar-chart :data="radarChartData3" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Radar-Chart</div>
-        <highlight-code>
-&lt;radar-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  ringFillColor: ['rgba(61, 231, 201, 0.1)'],
-  ringFillType: 'mulCover', // 非必须 设置环线填充颜色类型为mulCover
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
-
-    <border-box-7 class="chart-item">
-      <radar-chart :data="radarChartData4" :colors="colors" class="chart" />
-
-      <div class="config-info">
-        <div class="title">Radar-Chart</div>
-        <highlight-code>
-&lt;radar-chart :data="data" :colors="colors" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-// 相同配置不再赘述
-data: {
-  ringFillColor: ['rgba(61, 231, 201, 0.1)'],
-  ringFillType: 'ring', // 非必须 设置环线填充颜色类型为ring
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
 
     <border-box-7 class="chart-item">
       <capsule-chart :data="capsuleChartData" class="chart" />
@@ -292,12 +168,18 @@ import columnChartDemo from './chart/columnChartDemo'
 
 import polylineChartDemo from './chart/polylineChartDemo'
 
+import pointChartDemo from './chart/pointChartDemo'
+
+import radarChartDemo from './chart/radarChartDemo'
+
 export default {
   name: 'Chart',
   components: {
     attention,
     columnChartDemo,
-    polylineChartDemo
+    polylineChartDemo,
+    pointChartDemo,
+    radarChartDemo
   },
   data () {
     return {
@@ -314,153 +196,16 @@ export default {
           title: 'Polyline-Chart',
           target: 'polyline-chart'
         },
+        {
+          title: 'Point-Chart',
+          target: 'point-chart'
+        },
         {
           title: 'Radar-Chart',
           target: 'radar-chart'
         }
       ],
 
-      pointChartData1: {
-        data: [
-          {
-            data: [123, 156, 290, 400, 169, 435]
-          },
-          {
-            data: [
-              [230, 123, 56],
-              [111, 22, 66],
-              [56, 25, 156],
-              [79, 52, 40],
-              [60, 56, 56],
-              [23, 45, 78]
-            ]
-          },
-          {
-            data: [15, 20, 27, 35, 27, 17],
-            againstAxis: true
-          }
-        ],
-        x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        y: {
-        },
-        ax: {
-        },
-        ay: {
-        }
-      },
-
-      radarChartData1: {
-        data: [
-          {
-            data: [450, 50, 450, 50, 450, 50]
-          },
-          {
-            data: [50, 450, 50, 450, 50, 450]
-          }
-        ],
-        label: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
-        },
-        labelLine: {
-          data: ['同期', '环期']
-        }
-      },
-
-      radarChartData2: {
-        data: [
-          {
-            data: [450, 50, 450, 50, 450, 50],
-            dashed: true
-          },
-          {
-            data: [50, 450, 50, 450, 50, 450],
-            lineColor: '#9cf4df',
-            fillColor: 'rgba(238, 233, 108, 0.5)'
-          }
-        ],
-        label: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
-          color: 'colors',
-          fontSize: 10
-        },
-        labelLine: {
-          data: ['同期', '环期']
-        },
-        rayLineType: 'dashed',
-        rayLineColor: 'colors',
-        ringNum: 5,
-        ringType: 'polyline',
-        ringFillType: 'cover',
-        ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'],
-        ringLineType: 'line',
-        ringLineColor: 'rgba(156, 244, 233, 0.2)',
-        rayLineOffset: Math.PI * -1.5,
-        radius: 0.8,
-        max: 550
-      },
-
-      radarChartData3: {
-        data: [
-          {
-            data: [450, 50, 450, 50, 450, 50]
-          },
-          {
-            data: [50, 450, 50, 450, 50, 450]
-          }
-        ],
-        label: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
-          color: 'colors',
-          fontSize: 10
-        },
-        labelLine: {
-          data: ['同期', '环期']
-        },
-        rayLineType: 'dashed',
-        rayLineColor: 'colors',
-        ringNum: 5,
-        ringType: 'polyline',
-        ringFillType: 'mulCover',
-        ringFillColor: ['rgba(61, 231, 201, 0.1)'],
-        ringLineType: 'line',
-        ringLineColor: 'rgba(156, 244, 233, 0.2)',
-        rayLineOffset: Math.PI * -1.5,
-        radius: 0.8,
-        max: 550
-      },
-
-      radarChartData4: {
-        data: [
-          {
-            data: [450, 50, 450, 50, 450, 50]
-          },
-          {
-            data: [50, 450, 50, 450, 50, 450]
-          }
-        ],
-        label: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
-          color: 'colors',
-          fontSize: 10
-        },
-        labelLine: {
-          data: ['同期', '环期']
-        },
-        rayLineType: 'dashed',
-        rayLineColor: 'colors',
-        ringNum: 5,
-        ringType: 'polyline',
-        ringFillType: 'ring',
-        ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'],
-        ringLineType: 'line',
-        ringLineColor: 'rgba(156, 244, 233, 0.2)',
-        rayLineOffset: Math.PI * -1.5,
-        radius: 0.8,
-        max: 550
-      },
-
       capsuleChartData: {
         data: [
           {

src/views/demo/chart/attention.vue

@@ -77,8 +77,8 @@ x: {
   tagBefore: 'before',
   // 非必须 设置该轴标签after字符
   tagAfter: 'after',
-  // 非必须 设置x轴 展示标签旋转 仅在x轴有效
+  // 非必须 设置x轴 展示标签旋转度数 仅在x轴有效
-  rotate: true
+  rotate: 20
 },
 // y轴 也可设置data 设置data 下列专有配置自动失效
 y: {

src/views/demo/chart/columnChartDemo.vue

@@ -46,14 +46,14 @@ data: {
         <highlight-code>
 // 相同配置不再赘述
 data: {
-y: {
+  y: {
-  grid: true,
+    grid: true,
-  gridLineType: 'dashed',
+    gridLineType: 'dashed',
-  gridLineDash: [2, 2],
+    gridLineDash: [2, 2],
-  num: 6
+    num: 6
-},
+  },
-showColumnBG: true,
+  showColumnBG: true,
-columnBGColor: 'rgba(100, 100, 100, 0.3)'
+  columnBGColor: 'rgba(100, 100, 100, 0.3)'
 }
         </highlight-code>
       </div>
@@ -179,7 +179,8 @@ data: {
   ],
   x: {
     offset: 40,
-    rotate: true
+    // 旋转角度
+    rotate: 20
   },
   y: {
     tagAfter: 'ml'
@@ -206,15 +207,16 @@ data: {
 data: {
   data: [
     {
-      data: [150, 290, 420, 200, 350, 219],
+      data: [330, 290, 330, 400, 330, 290, 330],
-      fillColor: ['#247efc', '#ff2fdb']
+      fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)']
     },
     {
-      data: [150, 265, 400, 205, 315, 165],
+      data: [260, 265, 280, 450, 280, 265, 260],
       type: 'smoothline',
       lineType: 'dashed',
       againstAxis: true,
-      fillColor: ['rgba(48, 222, 210, 0.5)', 'rgba(48, 222, 210, 0)']
+      lineColor: '#3de7c9',
+      fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)']
     }
   ]
 }
@@ -320,7 +322,7 @@ export default {
           }
         ],
         x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
+          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳', '']
         },
         y: {
           unit: '辆',
@@ -495,26 +497,29 @@ export default {
       columnChartData7: {
         data: [
           {
-            data: [150, 290, 420, 200, 350, 219],
+            data: [330, 290, 330, 400, 330, 290, 330],
-            fillColor: ['#247efc', '#ff2fdb']
+            fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)']
           },
           {
-            data: [150, 265, 400, 205, 315, 165],
+            data: [260, 265, 280, 450, 280, 265, 260],
             type: 'smoothline',
             lineType: 'dashed',
             againstAxis: true,
-            fillColor: ['rgba(48, 222, 210, 0.5)', 'rgba(48, 222, 210, 0)']
+            lineColor: '#3de7c9',
+            fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)']
           }
         ],
         x: {
-          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
+          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳', '漯河']
         },
         y: {
           unit: '辆',
           grid: true,
           gridLineType: 'dashed',
           gridLineDash: [2, 2],
-          num: 6
+          num: 6,
+          min: 0,
+          max: 500
         },
         labelLine: {
           color: '#2b7bfb',

src/views/demo/chart/pointChartDemo.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <border-box-7 class="chart-item">
+      <point-chart :data="pointChartData1" :colors="colors" class="chart" />
+
+      <div class="config-info">
+        <div class="title">Point-Chart</div>
+        <highlight-code>
+&lt;point-chart :data="data" :colors="colors" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+data: {
+}
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <div id="radar-chart" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PointChartDemo',
+  data () {
+    return {
+      pointChartData1: {
+        data: [
+          {
+            data: [123, 156, 290, 400, 169, 435]
+          },
+          {
+            data: [
+              [230, 123, 56],
+              [111, 22, 66],
+              [56, 25, 156],
+              [79, 52, 40],
+              [60, 56, 56],
+              [23, 45, 78]
+            ]
+          },
+          {
+            data: [15, 20, 27, 35, 27, 17],
+            againstAxis: true
+          }
+        ],
+        x: {
+          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
+        },
+        y: {
+        },
+        ax: {
+        },
+        ay: {
+        }
+      },
+
+      colors: ''
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>

src/views/demo/chart/polylineChartDemo.vue

@@ -112,23 +112,7 @@ data: {
       </div>
     </border-box-7>
 
-    <border-box-7 class="chart-item">
+    <div id="point-chart" />
-      <!-- <polyline-chart :data="polylineChartData4" class="chart" /> -->
-
-      <div class="config-info">
-        <div class="title">Polyline-chart</div>
-
-        <highlight-code>
-&lt;polyline-chart :data="data" /&gt;
-        </highlight-code>
-
-        <highlight-code>
-data: [
-// 44444444
-}
-        </highlight-code>
-      </div>
-    </border-box-7>
   </div>
 </template>
 
@@ -149,6 +133,11 @@ export default {
         },
         y: {
         },
+        labelLine: {
+          data: ['车流量'],
+          color: ['#3de7c9'],
+          type: 'rectangle'
+        },
         showValueText: true,
         valueTextOffset: [10, -5]
       },
@@ -195,6 +184,11 @@ export default {
           fixed: 2,
           num: 10,
           unit: '%'
+        },
+        labelLine: {
+          data: ['同期', '环期'],
+          color: ['#275afe', '#3de7c9'],
+          type: 'rectangle'
         }
       },
 
@@ -212,7 +206,11 @@ export default {
         x: {
           data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
         },
-        labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
+        labelLine: {
+          data: ['同期', '环期'],
+          color: ['#ff2db8', '#3de7c9'],
+          type: 'rectangle'
+        },
         color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
         boundaryGap: true
       },

src/views/demo/chart/radarChartDemo.vue

@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <border-box-7 class="chart-item">
+      <radar-chart :data="radarChartData1" :colors="colors" class="chart" />
+
+      <div class="config-info">
+        <div class="title">Radar-Chart</div>
+        <highlight-code>
+        </highlight-code>
+
+        <highlight-code>
+data: {
+  data: [
+    {
+      data: [450, 50, 450, 50, 450, 50] // 必须
+    },
+    {
+      data: [50, 450, 50, 450, 50, 450]
+    }, ...
+  ],
+  label: {
+    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'] // 必须
+  },
+  // 非必须 不配置该项则不绘制底部label
+  labelLine: {
+    data: ['同期', '环期']
+  }
+}
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <border-box-7 class="chart-item">
+      <radar-chart :data="radarChartData2" :colors="colors" class="chart" />
+
+      <div class="config-info">
+        <div class="title">Radar-Chart</div>
+        <highlight-code>
+&lt;radar-chart :data="data" :colors="colors" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+data: {
+  data: [
+    {
+      data: [450, 50, 450, 50, 450, 50],
+      dashed: true // 非必须 为真时绘制虚线
+    },
+    {
+      data: [50, 450, 50, 450, 50, 450],
+      lineColor: '#9cf4df', // 非必须 可配置改数据线条颜色
+      fillColor: 'rgba(238, 233, 108, 0.5)' // 非必须 可配置改数据填充颜色
+    }
+  ],
+  label: {
+    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
+    color: 'colors', // 非必须 可配置文字颜色
+    fontSize: 10 // 非必须 可配置文字大小
+  },
+  labelLine: ['同期', '环期'],
+  rayLineType: 'dashed', // 非必须 设置径向射线为虚线
+  rayLineColor: 'colors', // 非必须 设置径向射线颜色
+  ringNum: 5, // 非必填 设置环线个数
+  ringType: 'polyline', // 非必须 设置环线为折线
+  ringFillType: 'cover', // 非必须 设置环线填充颜色类型为cover
+  ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'], // 非必须 设置环线填充色
+  ringLineType: 'line', // 非必须 设置环线线条为实线
+  ringLineColor: 'rgba(156, 244, 233, 0.2)', // 非必须 设置环线线条颜色
+  rayLineOffset: Math.PI * -1.5, // 非必须 设置雷达图旋转偏移
+  radius: 0.8, // 非必须 设置雷达图最大环线半径
+  max: 550 // 非必须 设置雷达图数据最大值
+}
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <border-box-7 class="chart-item">
+      <radar-chart :data="radarChartData3" :colors="colors" class="chart" />
+
+      <div class="config-info">
+        <div class="title">Radar-Chart</div>
+        <highlight-code>
+&lt;radar-chart :data="data" :colors="colors" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+// 相同配置不再赘述
+data: {
+  ringFillColor: ['rgba(61, 231, 201, 0.1)'],
+  ringFillType: 'mulCover', // 非必须 设置环线填充颜色类型为mulCover
+}
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <border-box-7 class="chart-item">
+      <radar-chart :data="radarChartData4" :colors="colors" class="chart" />
+
+      <div class="config-info">
+        <div class="title">Radar-Chart</div>
+        <highlight-code>
+&lt;radar-chart :data="data" :colors="colors" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+// 相同配置不再赘述
+data: {
+  ringFillColor: ['rgba(61, 231, 201, 0.1)'],
+  ringFillType: 'ring', // 非必须 设置环线填充颜色类型为ring
+}
+        </highlight-code>
+      </div>
+    </border-box-7>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RadarChartDemo',
+  data () {
+    return {
+      radarChartData1: {
+        data: [
+          {
+            data: [450, 50, 450, 50, 450, 50]
+          },
+          {
+            data: [50, 450, 50, 450, 50, 450]
+          }
+        ],
+        label: {
+          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
+        },
+        labelLine: {
+          data: ['同期', '环期']
+        }
+      },
+
+      radarChartData2: {
+        data: [
+          {
+            data: [450, 50, 450, 50, 450, 50],
+            dashed: true
+          },
+          {
+            data: [50, 450, 50, 450, 50, 450],
+            lineColor: '#9cf4df',
+            fillColor: 'rgba(238, 233, 108, 0.5)'
+          }
+        ],
+        label: {
+          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
+          color: 'colors',
+          fontSize: 10
+        },
+        labelLine: {
+          data: ['同期', '环期']
+        },
+        rayLineType: 'dashed',
+        rayLineColor: 'colors',
+        ringNum: 5,
+        ringType: 'polyline',
+        ringFillType: 'cover',
+        ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'],
+        ringLineType: 'line',
+        ringLineColor: 'rgba(156, 244, 233, 0.2)',
+        rayLineOffset: Math.PI * -1.5,
+        radius: 0.8,
+        max: 550
+      },
+
+      radarChartData3: {
+        data: [
+          {
+            data: [450, 50, 450, 50, 450, 50]
+          },
+          {
+            data: [50, 450, 50, 450, 50, 450]
+          }
+        ],
+        label: {
+          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
+          color: 'colors',
+          fontSize: 10
+        },
+        labelLine: {
+          data: ['同期', '环期']
+        },
+        rayLineType: 'dashed',
+        rayLineColor: 'colors',
+        ringNum: 5,
+        ringType: 'polyline',
+        ringFillType: 'mulCover',
+        ringFillColor: ['rgba(61, 231, 201, 0.1)'],
+        ringLineType: 'line',
+        ringLineColor: 'rgba(156, 244, 233, 0.2)',
+        rayLineOffset: Math.PI * -1.5,
+        radius: 0.8,
+        max: 550
+      },
+
+      radarChartData4: {
+        data: [
+          {
+            data: [450, 50, 450, 50, 450, 50]
+          },
+          {
+            data: [50, 450, 50, 450, 50, 450]
+          }
+        ],
+        label: {
+          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
+          color: 'colors',
+          fontSize: 10
+        },
+        labelLine: {
+          data: ['同期', '环期']
+        },
+        rayLineType: 'dashed',
+        rayLineColor: 'colors',
+        ringNum: 5,
+        ringType: 'polyline',
+        ringFillType: 'ring',
+        ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'],
+        ringLineType: 'line',
+        ringLineColor: 'rgba(156, 244, 233, 0.2)',
+        rayLineOffset: Math.PI * -1.5,
+        radius: 0.8,
+        max: 550
+      },
+
+      colors: ''
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>