瀏覽代碼

Merge remote-tracking branch 'origin/master'

# Conflicts:
#	echarts-screen/src/components/Newly.vue
#	echarts-screen/src/components/RoseCon.vue
#	echarts-screen/src/components/index.js
gxr 4 年之前
父節點
當前提交
ad5575dc52
共有 3 個文件被更改,包括 277 次插入9 次删除
  1. 210 0
      echarts-screen/src/components/RoseCon.vue
  2. 63 5
      echarts-screen/src/components/index.js
  3. 4 4
      echarts-screen/src/views/Brand.vue

+ 210 - 0
echarts-screen/src/components/RoseCon.vue

@@ -0,0 +1,210 @@
+<!--
+ 描述: 客户分布
+ 作者: Jack Chen
+ 日期: 2020-05-09
+-->
+
+<template>
+  <div class="RoseCon-container">
+    <div class="chart" id="chart_right2"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RoseCon",
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+    this.getEchartRight2();
+  },
+  methods: {
+    getEchartRight2() {
+      let myChart = echarts.init(document.getElementById('chart_right2'));
+      let option = {
+        color: ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc'],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)'
+        },
+        polar: {},
+        angleAxis: {
+          interval: 1,
+          type: 'category',
+          data: [],
+          z: 10,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#0B4A6B',
+              width: 5,
+              type: 'solid'
+            },
+          },
+          axisLabel: {
+            interval: 0,
+            show: true,
+            color: '#0B4A6B',
+            margin: 8,
+            fontSize: 16
+          },
+        },
+        radiusAxis: {
+          min: 40,
+          max: 120,
+          interval: 20,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#0B3E5E',
+              width: 1,
+              type: 'solid'
+            },
+          },
+          axisLabel: {
+            formatter: '{value} %',
+            show: false,
+            padding: [0, 0, 20, 0],
+            color: '#0B3E5E',
+            fontSize: 16
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#0B3E5E',
+              width: 2,
+              type: "solid"
+            }
+          }
+        },
+        calculable: true,
+        series: [{
+          type: 'pie',
+          radius: ['6%', '10%'],
+          hoverAnimation: false,
+          labelLine: {
+            normal: {
+              show: false,
+              length: 30,
+              length2: 50
+            },
+            emphasis: {
+              show: false
+            }
+          },
+          tooltip: {
+            show: false
+          },
+          data: [{
+            name: '',
+            value: 0,
+            itemStyle: {
+              normal: {
+                color: '#0B4A6B'
+              }
+            }
+          }]
+        }, {
+          type: 'pie',
+          radius: ['90%', '95%'],
+          hoverAnimation: false,
+          labelLine: {
+            normal: {
+              show: false,
+              length: 30,
+              length2: 50
+            },
+            emphasis: {
+              show: false
+            }
+          },
+          tooltip: {
+            show: false
+          },
+          data: [{
+            name: '',
+            value: 0,
+            itemStyle: {
+              normal: {
+                color: '#0B4A6B'
+              }
+            }
+          }]
+        },{
+          stack: 'a',
+          type: 'pie',
+          radius: ['20%', '80%'],
+          roseType: 'area',
+          zlevel: 10,
+          label: {
+            normal: {
+              show: true,
+              formatter: '{b}',
+              textStyle: {
+                fontSize: 12,
+              },
+              position: 'outside'
+            },
+            emphasis: {
+              show: false
+            }
+          },
+          labelLine: {
+            normal: {
+              show: true,
+              length: 15,
+              length2: 50,
+              lineStyle: {
+                type: 'dotted' 
+              } 
+            },
+            emphasis: {
+              show: true
+            }
+          },
+          data: [{
+            value: 1173,
+            name: '香港'
+          },{
+            value: 131,
+            name: '台湾'
+          },{
+            value: 108,
+            name: '上海'
+          },{
+            value: 41,
+            name: '广东'
+          },{
+            value: 36,
+            name: '四川'
+          },{
+            value: 22,
+            name: '福建'
+          },{
+            value: 20,
+            name: '内蒙古'
+            }]
+        }]
+      }
+
+      myChart.setOption(option, true);
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    },
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.RoseCon-container {
+  .chart {
+    height: 3rem;
+  }
+}
+</style>

+ 63 - 5
echarts-screen/src/components/index.js

@@ -4,14 +4,72 @@
  * 日期: 2020-04-18
  */
 
+// import bgAnimation from './bgAnimation' // 登录界面背景图动画
+// import modal from './modal' // 自定义全局模态框
+// import sinan from './sinan' // 司南排名图
+// import seamless from './seamless' // 新闻无缝滚动
+// import pyramid from './pyramid' // 金字塔动画
+// import scrollArc from './scrollArc' // 滚动弧形线
+// import szBar from './szBar' // 双轴柱状图
+// import ringPin from './ringPin' // 环形气泡图
+// import rotateColorful from './rotateColorful' // 旋转多彩图
+// import circleRunway from './circleRunway' // 环形跑道图
+// import scanRadius from './scanRadius' // 扫描半径图
+// import cakeLinkage from './cakeLinkage' // 柱饼组合联动
+// import dynamicLine from './dynamicLine' // 动态轮播折线图
+// import pyramidTrend from './pyramidTrend' // 金字塔趋势
+// import staffMix from './staffMix' // 人员占比
+// import flashCloud from './flashCloud' // 闪动云
+// import ringPie from './ringPie' // 环形饼图
+// import colorfulRadar from './colorfulRadar' // 多彩雷达
+// import dynamicList from './dynamicList' // 动态列表动画
+// import bar3d from './bar3d' // 3D立体柱状图
+// import colorfulArea from './colorfulArea' // 多彩轮播面积
+// import rainbow from './rainbow' // 彩虹轨道图
+// import gauge from './gauge' // 仪表盘
+// import waterPolo from './waterPolo' // 水球图
+// import circleNesting from './circleNesting' // 圆环套圆环
 
-// import income from './income' // 营业收入
-import TrendCon from './TrendCon' // 营业收入
-import Newly from './Newly' // 发展历程
+import business from './business' // 业务范围
+import talent from './talent' // 人才队伍
+import income from './income' // 营业收入
+import wordCloud from './wordCloud' // 产品热词
+import distribution from './distribution' // 客户分布
+import history from './history' // 发展历程
 
 const components = {
-  TrendCon,
-  Newly,
+  // bgAnimation,
+  // modal,
+  // sinan,
+  // seamless,
+  // pyramid,
+  // scrollArc,
+  // szBar,
+  // ringPin,
+  // rotateColorful,
+  // circleRunway,
+  // scanRadius,
+  // cakeLinkage,
+  // dynamicLine,
+  // pyramidTrend,
+  // staffMix,
+  // flashCloud,
+  // ringPie,
+  // colorfulRadar,
+  // dynamicList,
+  // bar3d,
+  // colorfulArea,
+  // rainbow,
+  // gauge,
+  // waterPolo,
+  // circleNesting,
+
+  business,
+  talent,
+  income,
+  wordCloud,
+  distribution,
+  history,
   
 };
 

+ 4 - 4
echarts-screen/src/views/Brand.vue

@@ -25,8 +25,8 @@
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">
-                        <h2>人才队伍</h2>
-                        <talent/>
+                        <h2>新增病例情况</h2>
+                        <PieCon/>
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">
@@ -74,8 +74,8 @@
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">
-                        <h2>客户分布</h2>
-                        <distribution/>
+                        <h2>现存确诊</h2>
+                        <RoseCon/>
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">