add router assets and components

src/router/index.js

@@ -28,6 +28,7 @@ import 	事件图谱	from       '../views/事件图谱.vue'
 import graphViewV4 from "@/views/graphViewV4";
 import 风险传导 from "@/views/风险传导"
 import 	大屏	from       '../bigscreen/大屏.vue'
+import 	widerscreen	from       '../widerscreen/index.vue'
 import 	UserManagement	from     '../views/UserManagement.vue'
 
 import SSE from "@/views/SSE";
@@ -153,6 +154,7 @@ const routes = [
 
   //大屏
   {path:'/bigscreen',name :'bigscreen',component: 大屏,},
+  {path:'/widerscreen',name :'widerscreen',component: widerscreen,},
   {path:'/test',name :'test',component: test,},
   {path:'/sse',name :'sse',component: SSE,},
   {path:'/systemrisk',name :'systemrisk',component: systemRiskV2,}
@@ -173,7 +175,7 @@ export  const isLogin=false;
 router.beforeEach(async(to,from,next) => {
   const allowedRoutes = ['/systematic_risk', '/market_entities','/individual_risk','/influential_entities'
     ,'/warning','/risk_warning','/abnormal_detection','/health','/diffus','/pressure','/quotation','/event_analysis',
-    '/event_graph','/knowladgeGraph','/UserManagement','/login','/register','/bigscreen','/test','/sse','/systemrisk'];
+    '/event_graph','/knowladgeGraph','/UserManagement','/login','/register','/bigscreen','/widerscreen','/test','/sse','/systemrisk'];
   const name=sessionStorage.getItem('user')
   // if (allowedRoutes.includes(to.path)) {
   //   next();

src/widerscreen/components/CapsuleChart.vue

@@ -0,0 +1,52 @@
+<template>
+    <dv-capsule-chart :config="config" style="width:100%;height:260px" />
+</template>
+
+<script>
+
+
+export default {
+props:{
+    colorsChart:{
+        type:Array,
+        default:()=>[]
+    },
+    dataChart:{
+        type:Array,
+        default:()=>[
+            {
+            name: '南阳',
+            value: 167
+            },
+            {
+            name: '周口',
+            value: 67
+            },
+            {
+            name: '漯河',
+            value: 123
+            },
+            {
+            name: '郑州',
+            value: 55
+            },
+            {
+            name: '西峡',
+            value: 98
+            }
+        ]
+    }
+},
+data(){
+  return {
+    config:{
+      data: this.dataChart,
+      colors: this.colorsChart,
+      unit: '单位',
+      showValue: true
+    }
+  }
+}
+
+}
+</script>

src/widerscreen/components/LineChart.vue

@@ -0,0 +1,105 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:250px;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let option = {
+                    xAxis: {
+                    type: "category",
+                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+                    position: "bottom",
+                    axisLine: true,
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    yAxis: {
+                    type: "value",
+                    name: "年度生产量",
+                    nameLocation: "end",
+                    nameGap: 24,
+                    nameTextStyle: {
+                        color: "rgba(255,255,255,.5)",
+                        fontSize: 14,
+                    },
+                    splitNumber: 4,
+                    axisLine: {
+                        lineStyle: {
+                        opacity: 0,
+                        },
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                        color: "#fff",
+                        opacity: 0.1,
+                        },
+                    },
+                    axisLabel: {
+                        color: "rgba(255,255,255,.8)",
+                        fontSize: 12,
+                    },
+                    },
+                    grid: {
+                    left: 50,
+                    right: 10,
+                    bottom: 25,
+                    top: "18%",
+                    },
+                    series: [
+                    {
+                        data:  [220, 182, 191, 234, 290, 330, 310],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+                     {
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                        type: "line",
+                        smooth: true,
+                        symbol: "emptyCircle",
+                        symbolSize: 8,
+                        itemStyle: {
+                        // normal: {
+                        //     color: "#fff",
+                        // },
+                        },
+                     },
+        ],
+      };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>

src/widerscreen/components/Map.vue

@@ -0,0 +1,104 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width:100%;height:80%;;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   import chinaMap from '@/assets/json/china.json'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initChart();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+               echarts.registerMap('china', chinaMap);
+   
+               // 指定图表的配置项和数据
+               var option = {
+                   geo:{
+                    show:true,
+                    type:'map',
+                    map:'china',
+                    // label:{
+                    //     show:true, //文字标签显示
+                    //     color:'#fff',
+                    //     fontSize:12
+                    // },
+                    itemStyle:{  //图形样式
+                        areaColor:'#3352c7', //背景色
+                        borderColor:'#fff',
+                        borderWidth:1
+                    },
+                    zoom:1.2,
+                    emphasis:{  //高亮状态
+                        label:{
+                            show:true, //文字标签显示
+                            color:'#fff',
+                            fontSize:14
+                        },
+                        itemStyle:{  //图形样式
+                            areaColor:'#f60', //背景色
+                            borderColor:'#ccc',
+                            borderWidth:1
+                        },
+                    }
+                   },
+                   series:[
+                    {
+                        type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
+                        coordinateSystem:'geo',//该系列使用的坐标系
+                        rippleEffect:{ //涟漪特效相关配置。
+                            period:2,
+                            brushType:'stroke',
+                            scale :5,
+                        },
+                        label:{  //标签
+                            normal:{
+                                show:true,
+                                position:'right'
+                            }
+                        },
+                        itemStyle:{
+                            color:'#f00'
+                        },
+                        symbol:'circle' ,//标记的图形，还可以设置图片
+                        symbolSize:function(val){
+                            return val[2]
+                        },
+                        data:[
+                            {
+                                name:'鄂尔多斯',
+                                value:[109.781327, 39.608266,20]
+                            },
+                            {
+                                name:'张家口',
+                                value:[114.87, 40.82,5]
+                            },
+                            {
+                                name:'珠海',
+                                value:[113.52, 22.3,15]
+                            },
+                            {
+                                name:'武汉',
+                                value:[114.31, 30.52,30]
+                            }
+                        ]
+
+                    }
+                   ]
+               };
+               // 使用刚指定的配置项和数据显示图表。
+               myChart.setOption(option);
+           },
+       }
+   }
+   </script>

src/widerscreen/components/RadarChart.vue

@@ -0,0 +1,103 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div ref="chart" style="width: 100%;height:80%;"></div>
+   </template>
+   
+   <script>
+   import * as echarts from 'echarts'
+   
+   export default {
+       data(){
+           return {
+               items:[]
+           }
+       },
+       mounted(){
+           this.initWebsocket();
+       },
+       methods:{
+           initChart(){
+               // 基于准备好的dom，初始化echarts实例
+               var myChart = echarts.init(this.$refs.chart);
+   
+               // 指定图表的配置项和数据
+               let 
+               option = {
+        title: {
+            text: ''
+        },
+        tooltip: {},
+        legend: {
+
+            data: ['第一标准', '第二标准','第三标准'],
+            x:"center",
+            y:'bottom',
+            textStyle:{
+                color:"#fff"
+            }
+        },
+        color: ['#4c95d9', '#f6731b', '#8cd43f'],
+        radar: {
+            name:{
+                textStyle: {
+                    //设置颜色
+                    color:'#fff'
+                }
+            },
+            indicator: [
+                { name: 'test1', max: 6500},
+                { name: 'test2', max: 16000},
+                { name: 'test3', max: 30000},
+                { name: 'test4', max: 38000},
+                { name: 'test5', max: 52000},
+                { name: 'test6', max: 25000}
+            ],
+            center: ['50%','50%'],
+            radius: "58%"
+        },
+        series: [{
+            name: '',
+            type: 'radar',
+            itemStyle : {
+                normal : {
+                    splitLine: {
+                        lineStyle: {
+
+                        }
+                    },
+                    label: {
+                        show: false,
+                        textStyle:{
+                        },
+                        formatter:function(params) {
+                            return params.value;}
+                    },
+                }
+            },
+            data : [
+                {
+                    value : [2400, 10000, 28000, 35000, 50000, 19000],
+                    name : '第一标准'
+                },
+                {
+                    value : [5000, 14000, 28000, 31000, 42000, 21000],
+                    name : '第二标准'
+                },
+                {
+                    value : [6000, 14000, 18000, 21000, 32000, 11000],
+                    name : '第三标准'
+                }
+            ]
+        }]
+    };
+
+               myChart.setOption(option);
+           },
+           initWebsocket(){
+              
+                   this.initChart();
+               
+           }
+       }
+   }
+   </script>