更改折线图和实时信息

echarts-screen/src/components/history.vue → echarts-screen/src/components/Newly.vue

@@ -5,7 +5,7 @@
 -->
 
 <template>
-  <div class="history-container">
+  <div class="Newly-container">
     <div class="tabs"> 
       <ul class="tab-tilte">
         <li v-for="(itemTit, index) in tabTitle" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)" :class="{active: cur == index}">
@@ -28,44 +28,41 @@
 
 <script>
 export default {
-  name: "history",
+  name: "Newly",
   data() {
     return {
       timer: null,
-      tabTitle: ['2015', '2016', '2017', '2018', '2019', '2020'],
+      // tabTitle: ['2015', '2016', '2017', '2018', '2019', '2020'],
+      tabTitle: ['2019.12', '2020.1', '2020.2', '2020.4', '2020.6', '2020.7'],
       tabCon: [
         [
-          '2015.10，公司成立，正式布局区块链、大数据方向',
-          '2015.11，与国家超算吕梁云计算中心签订战略合作协议',
-          '2015.12，建设高性能计算服务平台，基于区块链技术打造文创基础云平台'
+          '2019年12月底，湖北省武汉市疾控中心监测发现不明原因肺炎病例。',
+          '2019.12.30，武汉市卫生健康委向辖区医疗机构发布《关于做好不明原因肺炎救治工作的紧急通知》。',
+          '2019.12.31，国家卫生健康委员会凌晨作出安排部署。派出工作组、专家组赶赴武汉市，指导做好疫情处置工作，开展现场调查。'
         ],
         [
-          '2016.03，公司提供的高性能计算服务得到中科院认可，就此达成合作',
-          '2016.07，与国家超算广州中心签订战略合作协议，启动区块链底层公链开发技术论证',
-          '2016.10，启动区块链底层公链开发，开拓数字资产管理业务',
-          '2016.11，与国家超级计算长沙中心签订战略合作协议'
+          '2020.1.1，国家卫健委成立疫情应对处置领导小组。',
+          '2020.1.11，国家疾控中心向武汉提供PCR检测试剂，用于对武汉疑似病例的检测、诊断。',
+          '2020.1.22，鉴于疫情迅速蔓延，防控工作面临严峻挑战，习近平明确要求湖北省对人员外流实施全面严格管控。'
         ],
         [
-          '2017.03，与国家级长沙经开区共建博士创新创业园',
-          '2017.07，开发GBI区块链资讯信息平台',
-          '2017.09，打造区块链信息服务平台，开拓区块链安全业务',
-          '2017.12，区块链底层公链测试链上线运行，启动链上DAPP开发'
+          '2020.2.2，武汉首座用于集中收治新型冠状病毒感染肺炎患者的专科医院——火神山医院，正式交付解放军支援湖北医疗队。',
+          '2020.2.20，国家医保局医药管理司司长熊先军说，目前，全国所有专职医疗机构都纳入定点，雷神山、火神山医院救治费用全部报销。',
         ],
         [
-          '2018.05，与长沙经开区共建区块链产业园，区块链底层公链上线运行',
-          '2018.08，公链分布式存储网络正式运行',
-          '2018.10，区块链安全技术检测中心正式运行，公链多侧链技术落地，链上应用上线',
-          '2018.12，被评为中国区块链百强企业'
+          '2020.4.3，国务院公告：2020年4月4日举行全国性哀悼活动。',
+          '2020.4.15，习近平总书记主持召开中央政治局常委会会议，听取疫情防控工作和当前经济形势的汇报。',
+          '2020.4.27，湖北省、武汉市疫情防控已由应急性超常规防控向常态化防控转变。'
         ],
         [
-          '2019.03，上线分布式存储系统UDFS，更新优壹号V2.0.0版，完成Ulord V2.0版白皮书全部规划',
-          '2019.07，文创版权公共服务平台优版权正式上线',
-          '2019.08，承担国家网信办区块链相关课题研究',
+          '2020.6.4，经国家专家组评估确认，三名患者均达到出院标准,武汉在院新冠肺炎患者再次清零。',
+          '2020.6.15，北京又有12地升级为疫情中风险，所有社区进入一级工作状态。',
+          '2020.6.22，截至目前，北京已有39个中风险地区。',
         ],
         [
-          '2020.03，完成分布式计算框架和贡献证明算法的设计和开发',
-          '2020.05，完成分布式计算资源动态调度和管理开发',
-          '2020.10，推出链云计算生态，完成计算平台和API接口开发，完成优壹号对计算Dapp支持'
+          '2020.7.7，北京新发地集中隔离人员今起分批解除隔离。',
+          '2020.7.20，北京应急响应下调为三级，北京中风险地区清零。',
+          '2020.7.30，大连号召全民抗疫参战，大连新增本土病例8例，新疆新增本土病例31例。'
         ]
       ],
       cur: 0, //默认选中第一个tab
@@ -98,7 +95,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.history-container {
+.Newly-container {
   margin: 0 0.125rem;
   .tabs {
     display: flex;

echarts-screen/src/components/business.vue

@@ -1,177 +0,0 @@
-<template>
-    <div class="business-container">
-        <div class="chart" id="chart_left1"></div>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "business",
-        data() {
-            return {}
-        },
-        mounted() {
-            this.getEchartLeft1();
-        },
-        methods: {
-            getEchartLeft1() {
-                // 实例化对象
-                let myChart = echarts.init(document.getElementById('chart_left1'));
-                let charts = { // 按顺序排列从大到小
-                    cityList: ['美国', '印度', '巴西', '俄罗斯', '法国', '英国', '其他'],
-                    cityData: [18487519, 10094801, 7264221, 2906503, 2479151, 2073511, 34614833]
-                }
-
-                let top10CityList = charts.cityList;
-                let top10CityData = charts.cityData;
-                let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];
-
-                let lineY = [];
-                for (let i = 0; i < charts.cityList.length; i++) {
-                    let x = i
-                    if (x > color.length - 1) {
-                        x = color.length - 1
-                    }
-                    let data = {
-                        name: charts.cityList[i],
-                        color: color[x] + ')',
-                        value: top10CityData[i],
-                        itemStyle: {
-                            normal: {
-                                show: true,
-                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                                    offset: 0,
-                                    color: color[x] + ', 0.3)'
-                                }, {
-                                    offset: 1,
-                                    color: color[x] + ', 1)'
-                                }], false),
-                                barBorderRadius: 10
-                            },
-                            emphasis: {
-                                shadowBlur: 15,
-                                shadowColor: 'rgba(0, 0, 0, 0.1)'
-                            }
-                        }
-                    }
-                    lineY.push(data)
-                }
-
-                // 指定配置和数据
-                let option = {
-                    color: color,
-                    tooltip: {
-                        trigger: 'item',
-                    },
-                    grid: {
-                        borderWidth: 0,
-                        top: '5%',
-                        left: '2%',
-                        right: '2%',
-                        bottom: '0%',
-                        containLabel: true
-                    },
-                    xAxis: [{
-                        type: 'value',
-                        axisTick: {
-                            show: false
-                        },
-                        axisLine: {
-                            show: false
-                        },
-                        splitLine: {
-                            show: false
-                        },
-                        axisLabel: {
-                            show: false
-                        }
-                    }],
-                    yAxis: [{
-                        type: 'category',
-                        inverse: true,
-                        axisTick: {
-                            show: false
-                        },
-                        axisLine: {
-                            show: false
-                        },
-                        axisLabel: {
-                            show: true,
-                            inside: false,
-                            textStyle: {
-                                color: '#b3ccf8',
-                                fontSize: 13
-                            },
-                        },
-                        data: top10CityList
-                    }, {
-                        type: 'category',
-                        axisLine: {
-                            show: false
-                        },
-                        axisTick: {
-                            show: false
-                        },
-                        axisLabel: {
-                            show: true,
-                            inside: false,
-                            textStyle: {
-                                color: '#b3ccf8',
-                                fontSize: 13
-                            },
-                            formatter: (val) => {
-                                return `${val}`
-                            }
-                        },
-                        splitArea: {
-                            show: false
-                        },
-                        splitLine: {
-                            show: false
-                        },
-                        data: top10CityData.reverse()
-                    }],
-                    series: [{
-                        name: '',
-                        type: 'bar',
-                        zlevel: 2,
-                        barWidth: '10px',
-                        data: lineY,
-                        animationDuration: 1500,
-                        label: {
-                            normal: {
-                                color: '#b3ccf8',
-                                show: false,
-                                position: [0, '-15px'],
-                                textStyle: {
-                                    fontSize: 13
-                                },
-                                formatter: (a, b) => {
-                                    return a.name;
-
-                                }
-                            }
-                        }
-                    }]
-                };
-
-                // 把配置给实例对象
-                myChart.setOption(option, true);
-                window.addEventListener('resize', () => {
-                    myChart.resize();
-                });
-            },
-        },
-        beforeDestroy() {
-
-        }
-    };
-</script>
-
-<style lang="scss" scoped>
-    .business-container {
-        .chart {
-            height: 3rem;
-        }
-    }
-</style>

echarts-screen/src/components/distribution.vue

@@ -1,210 +0,0 @@
-<!--
- 描述: 客户分布
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="distribution-container"> 
-    <div class="chart" id="chart_right2"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "distribution",
-  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: 35,
-            name: '湖南'
-          },{
-            value: 28,
-            name: '河北'
-          },{
-            value: 23,
-            name: '广东'
-          },{
-            value: 18,
-            name: '四川'
-          },{
-            value: 13,
-            name: '浙江'
-          },{
-            value: 8,
-            name: '江苏'
-          },{
-            value: 5,
-            name: '湖北'
-          }]
-        }]
-      }
-
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    },
-  },
-  beforeDestroy() {
-    
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.distribution-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

echarts-screen/src/components/income.vue

@@ -1,185 +0,0 @@
-<!--
- 描述: 营业收入
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="income-container"> 
-    <div class="chart" id="chart_left3"></div>  
-  </div>
-</template>
-
-<script>
-export default {
-  name: "income",
-  data() {
-    return {
-      
-    }
-  },
-  mounted() {
-    this.getEchartLeft3();
-  },
-  methods: {
-    getEchartLeft3() {
-      let myChart = echarts.init(document.getElementById('chart_left3'));
-      let data = {
-        city: ['2015', '2016', '2017', '2018', '2019', '2020'],
-        num: ['555', '896', '1935', '2922', '4508', '5000']
-      }
-
-      let option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [{
-                  offset: 0,
-                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
-                }, {
-                  offset: 0.5,
-                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
-                }, {
-                  offset: 1,
-                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
-              }
-            },
-          },
-          formatter: (value) => {
-            return value[0].name + '年营业收入：<br>' + value[0].value + '万元'; 
-          }
-        },
-        grid: {
-          top: '5%',
-          left: '2%',
-          right: '2%',
-          bottom: '0%',
-          containLabel: true
-        },
-        xAxis: [{
-          type: 'category',
-          boundaryGap: true,
-          axisLine: { //坐标轴轴线相关设置。数学上的x轴
-            show: false,
-            lineStyle: {
-              color: '#092b5d'
-            },
-          },
-          axisLabel: { //坐标轴刻度标签的相关设置
-            textStyle: {
-              color: '#24c4ff',
-              margin: 15,
-            },
-            formatter: (data) => {
-                return data.substr(2) + '年';
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-          data: data.city
-        }],
-        yAxis: [{
-          min: 0,
-          max: 6000,
-          splitLine: {
-            show: false,
-            lineStyle: {
-              color: '#092b5d'
-            },
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: "#092b5d"
-            }
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#24c4ff',
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-        }],
-        series: [{
-          name: '',
-          type: 'line',
-          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-          showAllSymbol: true,
-          symbolSize: 8,
-          lineStyle: {
-            normal: {
-              color: '#7c80f4', // 线条颜色
-            },
-            borderColor: 'rgba(0,0,0,.4)',
-          },
-          itemStyle: {
-            color: "rgba(14,30,73,1)",
-            borderColor: "#646ace",
-            borderWidth: 2
-          },
-          label: {
-            normal: {
-              show: true,
-              position: 'top',
-              formatter: [
-                ' {a|{c}}',
-              ].join(','),
-              rich: {
-                a: {
-                  color: '#fff',
-                  align: 'center',
-                },
-              }
-            }
-          },
-          smooth: true,
-          areaStyle: { //区域填充样式
-            normal: {
-              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: "rgba(124, 128, 244,.3)"
-              },{
-                offset: 1,
-                color: "rgba(124, 128, 244, 0)"
-              }], false),
-              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
-              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-            }
-          },
-          data: data.num
-        }]
-      }
-
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      })
-    },
-  },
-  beforeDestroy() {
-    
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.income-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

echarts-screen/src/components/index.js

@@ -4,72 +4,14 @@
  * 日期: 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 business from './business' // 业务范围
-import talent from './talent' // 人才队伍
-import income from './income' // 营业收入
-import wordCloud from './wordCloud' // 产品热词
-import distribution from './distribution' // 客户分布
-import history from './history' // 发展历程
+// import income from './income' // 营业收入
+import TrendCon from './TrendCon' // 营业收入
+import Newly from './Newly' // 发展历程
 
 const components = {
-  // 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,
+  TrendCon,
+  Newly,
   
 };
 

echarts-screen/src/components/talent.vue

@@ -1,146 +0,0 @@
-<!--
- 描述: 人才队伍
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="talent-container"> 
-    <div class="chart" id="chart_left2"></div>   
-  </div>
-</template>
-
-<script>
-export default {
-  name: "talent",
-  data() {
-    return {
-      
-    }
-  },
-  mounted() {
-    this.getEchartLeft2();
-  },
-  methods: {
-    getEchartLeft2() {
-      let myChart = echarts.init(document.getElementById('chart_left2'));
-      let scaleData = [{
-        name: '博士',
-        value: 5
-      },{
-        name: '硕士',
-        value: 10
-      },{
-        name: '本科',
-        value: 10
-      },{
-        name: '专科',
-        value: 10
-      },{
-        name: '国防科大',
-        value: 5
-      },{
-        name: '大厂专家',
-        value: 5
-      }];
-      let rich = {
-        white: {
-          color: '#ddd',
-          align: 'center',
-          padding: [3, 0]
-        }
-      };
-      let placeHolderStyle = {
-        normal: {
-          label: {
-            show: false
-          },
-          labelLine: {
-            show: false
-          },
-          color: 'rgba(0, 0, 0, 0)',
-          borderColor: 'rgba(0, 0, 0, 0)',
-          borderWidth: 0
-        }
-      };
-      let data = [];
-      let color=['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
-      for (let i = 0; i < scaleData.length; i++) {
-        data.push({
-          value: scaleData[i].value,
-          name: scaleData[i].name,
-          itemStyle: {
-            normal: {
-              borderWidth: 6,
-              shadowBlur: 10,
-              borderColor: color[i],
-              shadowColor: color[i]
-            }
-          }
-        }, {
-          value: 2,
-          name: '',
-          itemStyle: placeHolderStyle
-        });
-      }
-
-      let option = {
-        series: [{
-          name: '',
-          type: 'pie',
-          clockWise: false,
-          radius: ['66%', '68%'],
-          center: ['50%', '50%'],
-          hoverAnimation: false,
-          itemStyle: {
-            normal: {
-              label: {
-                show: true,
-                position: 'outside',
-                color: '#ddd',
-                formatter: (params) => {
-                  let percent = 0;
-                  let total = 0;
-                  for (let i = 0; i < scaleData.length; i++) {
-                    total += scaleData[i].value;
-                  }
-                  percent = ((params.value / total) * 100).toFixed(0);
-                  if (params.name !== '') {
-                    return params.name + '\n{white|' + '占比' + percent + '%}';
-                  } else {
-                    return '';
-                  }
-                },
-                rich: rich
-              },
-              labelLine: {
-                length: 10,
-                length2: 30,
-                show: true,
-                color: '#00ffff'
-              }
-            }
-          },
-          data: data
-        }]
-      }
-
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    },
-  },
-  beforeDestroy() {
-    
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.talent-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

echarts-screen/src/components/wordCloud.vue

@@ -1,191 +0,0 @@
-<!--
- 描述: 产品热词
- 作者: Jack Chen
- 日期: 2020-05-09
--->
-
-<template>
-  <div class="word-container"> 
-    <div class="chart" id="chart_right1"></div>
-  </div>
-</template>
-
-<script>
-import '@/assets/js/echarts-wordcloud.min'
-
-export default {
-  name: "wordCloud",
-  data() {
-    return {
-      timer: null
-    }
-  },
-  mounted() {
-    this.getEchartRight1();
-    this.timer = setInterval(() => {
-      this.getEchartRight1();
-    }, 5000)
-  },
-  methods: {
-    getEchartRight1() {
-      let myChart = echarts.init(document.getElementById('chart_right1'));
-      let option = {
-        // tooltip: {
-        //   show: false
-        // },
-        series: [{
-          type: 'wordCloud',
-          gridSize: 1,
-          sizeRange: [12, 50],
-          rotationRange: [-90, 90],
-          rotationStep: 45,
-          shape: 'diamond',
-          width: '90%',
-          textPadding: 0,
-          autoSize: {
-            enable: true,
-            minSize: 6
-          },
-          textStyle: {
-            normal: {
-              textBorderColor: 'rgba(255,255,255,0.3)',
-              textBorderWidth: 1,
-              color: () => {
-                return 'rgb(' + [
-                  Math.round(Math.random() * 160),
-                  Math.round(Math.random() * 160),
-                  Math.round(Math.random() * 160)
-                ].join(',') + ')';
-              }
-            },
-            emphasis: {
-              fontSize: 20,
-              // shadowBlur: 10,
-              // shadowColor: 'rgba(255,255,255, .1)'
-            }
-          },
-          data: [{
-            name: '钟南山',
-            value: 810
-          }, {
-            name: '武汉',
-            value: 520
-          },{
-            name: "隔离",
-            value: 928
-          },{
-            name: "白衣天使",
-            value: 906
-          },{
-            name: "新增确诊",
-            value: 825
-          },{
-            name: "口罩",
-            value: 514
-          },{
-            name: "中国加油",
-            value: 486
-          },{
-            name: "阳性",
-            value: 53
-          },{
-            name: "驰援",
-            value: 927
-          },{
-            name: "新冠状病毒变异",
-            value: 1308
-          },{
-            name: "供应链",
-            value: 693
-          },{
-            name: "公有链",
-            value: 611
-          },{
-            name: "私有链",
-            value: 512
-          },{
-            name: "联盟链",
-            value: 382
-          },{
-            name: "数据共享",
-            value: 312
-          },{
-            name: "文创版权",
-            value: 187
-          },{
-            name: "天河链",
-            value: 163
-          },{
-            name: "数据存证",
-            value: 104
-          },{
-            name: "UDFS存储",
-            value: 3
-          },{
-            name: "在线教育",
-            value: 31
-          },{
-            name: "关联分析",
-            value: 941
-          },{
-            name: "智慧停车",
-            value: 585
-          },{
-            name: "链云生态",
-            value: 473
-          },{
-            name: "应用层",
-            value: 358
-          },{
-            name: "网络层",
-            value: 246
-          },{
-            name: "数据层",
-            value: 207
-          },{
-            name: "基础层",
-            value: 194
-          },{
-            name: "智能合约",
-            value: 104
-          },{
-            name: "去中心化",
-            value: 87
-          },{
-            name: "数字货币",
-            value: 415
-          },{
-            name: "酷屏",
-            value: 253
-          },{
-            name: "可视化",
-            value: 211
-          },{
-            name: "P2P",
-            value: 116
-          },{
-            name: "数据挖掘",
-            value: 1309
-          }]
-        }]
-      }
-
-      myChart.setOption(option, true);
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.word-container {
-  .chart {
-    height: 3rem;
-  }
-}
-</style>

echarts-screen/src/views/Brand.vue

@@ -30,8 +30,8 @@
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">
-                        <h2>营收状况</h2>
-                        <income/>
+                        <h2>全国 现有确诊/疑似/累计确诊 趋势</h2>
+                        <TrendCon/>
                         <div class="panel-footer"></div>
                     </div>
                 </div>
@@ -79,8 +79,8 @@
                         <div class="panel-footer"></div>
                     </div>
                     <div class="panel">
-                        <h2>发展历程</h2>
-                        <history/>
+                        <h2>疫情实况</h2>
+                        <Newly/>
                         <div class="panel-footer"></div>
                     </div>
                 </div>