合并陆和油

echarts-screen/src/components/RoseCon.vue

@@ -9,7 +9,7 @@ export default {
   name: "RoseCon",
   data() {
     return {
-      
+
     }
   },
   mounted() {
@@ -151,8 +151,8 @@ export default {
               length: 15,
               length2: 50,
               lineStyle: {
-                type: 'dotted' 
-              } 
+                type: 'dotted'
+              }
             },
             emphasis: {
               show: true
@@ -179,7 +179,7 @@ export default {
           },{
             value: 20,
             name: '内蒙古'
-            }]
+          }]
         }]
       }
 
@@ -190,7 +190,7 @@ export default {
     },
   },
   beforeDestroy() {
-    
+
   }
 };
 </script>
@@ -201,4 +201,4 @@ export default {
     height: 3rem;
   }
 }
-</style>
+</style>

echarts-screen/src/components/TrendCon.vue

@@ -0,0 +1,241 @@
+
+<template>
+  <div class="TrendCon-container">
+    <div class="chart" id="chart_left3"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TrendCon",
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+    this.getEchartLeft3();
+  },
+  methods: {
+    getEchartLeft3() {
+      let myChart = echarts.init(document.getElementById('chart_left3'));
+      let dataC1 =[2630, 16402,26343,38874,43352,55475,22263,19097,1872,140,1836,936,];
+      let dataC2 =[5794, 21558,24702,16067,2358,5206,502,421,62,7,1,1,]
+      let dataC3 =[2761, 17238,28060,44730,78630,75993,80813,80904,83824,84507,87457,90271,]
+
+      var xData = function() {
+        var data = [];
+        for (var i = 1; i < 12; i++) {
+          data.push(i + "月");
+        }
+        return data;
+      }();
+
+      // for(var i = 0;i<xData.length;i++){
+      //   dataC1.splice(i,1,{name:xData[i],value:dataC1[i]});
+      //   dataC2.splice(i,1,{name:xData[i],value:dataC2[i]});
+      //   dataC3.splice(i,1,{name:xData[i],value:dataC3[i]});
+      // }
+      // console.log(dataC1);
+      // console.log(dataC2);
+      // console.log(dataC3);
+
+      var fontColor = '#30eee9';
+      let option = {
+        backgroundColor: '#11183c',
+        grid: {
+          left: '5%',
+          right: '2%',
+          top: '10%',
+          bottom: '15%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+            lineStyle: {
+              color: '#57617B'
+            }
+          }
+        },
+        legend: {
+          data: ['现有确诊', '现有疑似', '累计确诊'],
+          itemWidth: 20,
+          itemHeight: 10,
+          textStyle: {
+            fontSize: 14,
+            color: '#65aaf1',
+          },
+          right: '35%', //距离右侧
+          top: "5%"
+          // left : '50%'
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLabel: {
+            color: '#65aaf1'
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#0a2b52',
+              width: 1
+            }
+          },
+          /*axisTick:{
+                  show:false,
+                },
+                splitLine:{
+                  show:true,
+                  lineStyle:{
+                    color:'#195384'
+                  }
+              },*/
+          data:xData
+        }],
+        yAxis: [{
+          type: 'value',
+          // name: 'kw/h',
+          min: 0,
+          max: 150000,
+          interval: 20000,
+          nameTextStyle: {
+            color: '#65aaf1',
+            fontStyle: 'normal'
+          },
+          axisLabel: {
+            formatter: '{value}',
+            textStyle: {
+              color: '#65aaf1'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#0a2b52'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#0a2b52',
+              width: 1,
+              type: 'solid'
+            }
+          }
+        }],
+        series: [{
+          name: '现有确诊',
+          type: 'line',
+          stack: '总量',
+          symbol: 'circle',
+          showSymbol: false,
+          symbolSize: 8,
+          itemStyle: {
+            normal: {
+              color: '#0092f6',
+              lineStyle: {
+                color: "#0092f6",
+                width: 1
+              },
+              areaStyle: {
+                //color: '#94C9EC'
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0.4,
+                  color: 'rgba(7,44,90,0.1)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(0,146,246,0.9)'
+                }]),
+              }
+            }
+          },
+          markPoint: {
+            itemStyle: {
+              normal: {
+                color: 'red'
+              }
+            }
+          },
+          data:dataC1
+        },
+          {
+            name: '现有疑似',
+            type: 'line',
+            stack: '总量',
+            symbol: 'circle',
+            showSymbol: false,
+            symbolSize: 8,
+
+            itemStyle: {
+              normal: {
+                color: '#00d4c7',
+                lineStyle: {
+                  color: "#00d4c7",
+                  width: 1
+                },
+                areaStyle: {
+                  //color: '#94C9EC'
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0.4,
+                    color: 'rgba(7,44,90,0.1)'
+                  }, {
+                    offset: 1,
+                    color: 'rgba(0,212,199,0.9)'
+                  }]),
+                }
+              }
+            },
+            data: dataC2
+          },
+          {
+            name: '累计确诊',
+            type: 'line',
+            stack: '总量',
+            symbol: 'circle',
+            showSymbol: false,
+            symbolSize: 8,
+            itemStyle: {
+              normal: {
+                color: '#aecb56',
+                lineStyle: {
+                  color: "#aecb56",
+                  width: 1
+                },
+                areaStyle: {
+                  //color: '#94C9EC'
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0.4,
+                    color: 'rgba(7,44,90,0.1)'
+                  }, {
+                    offset: 1,
+                    color: 'rgba(114,144,89,0.9)'
+                  }]),
+                }
+              }
+            },
+            data: dataC3
+          }
+        ]
+      }
+
+      myChart.setOption(option, true);
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      })
+    },
+  },
+  beforeDestroy() {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.TrendCon-container {
+  .chart {
+    height: 3rem;
+  }
+}
+</style>

echarts-screen/src/components/index.js

@@ -1,11 +1,13 @@
-
+import Newly from "./Newly";
 import RoseCon from './RoseCon' // 客户分布
-
+import TrendCon from "./TrendCon";
 import PieCon from './PieCon' // 发展历程
 
 const components = {
   RoseCon,
   PieCon,
+  TrendCon,
+  Newly
 };
 
 const install = (Vue = {}) => {

echarts-screen/src/main.js

@@ -3,13 +3,11 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import Vcomp from './components/index'
-import Echarts from 'vue-echarts'
 
 import '@/assets/styles/base.scss'
 import '@/assets/styles/common.scss'
 
 Vue.use(Vcomp)
-Vue.use(Echarts)
 
 Vue.config.productionTip = false