manage-client 3.2.7 → 3.2.8

package/src/components/BasisEcharts/BarChart.vue

@@ -1,247 +1,247 @@
-
-<template>
-  <div>
-    <div class="text-1" :id="canvas">
-      <div :id="charts"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-
-  export default {
-    name: "barChart",
-
-    /*
-      折线图
-     1.必须要传的参数:xdata,sdata,legendData
-
-     2.规范值
-     传入参数 例
-          xdata:[1,2,3,4]
-          sdata:[
-            [2,4,6,8],
-            [1,3,5,7]
-          ]
-          legendData:['第一个','第二个']
-          legendData的长度等于sdata的长度
-          sdata的每一个数组的长度要和  xdata的长度相等
-
-    3.参数含义
-    xdata   :  x轴数据
-    sdata   :  展示的数据
-    legend : 展示那些显示那些不显示
-    title   :  标题
-    yname   :  y轴名称
-    xname   :  y轴名称
-    settime   :  tooltip 轮播的时间 默认 1500
-    showtooltip : 是否展示 提示框 默认展示
-    smooth : 曲线 平滑线 默认曲线
-    showtitle : 标题是否展示
-    showyname: y轴名称是否显示
-     */
-    props: [
-      'xdata',
-      'sdata',
-      'legend',
-      'title',
-      'yname',
-      'settime',
-      'showtooltip',
-      'smooth',
-      'showtitle',
-      'showyname',
-      'showxname',
-      'xname'
-    ],
-    data() {
-      return {
-        canvas: 'canvas_'+new Date().getTime()+'_'+Math.random()*10,
-        charts: 'charts_'+new Date().getTime()+'_'+Math.random()*10,
-        xc: '',
-        timer: '',
-        time:1500,  // 轮播提示的时间 默认 1500
-        showtTip:true,   // 轮播提示框 默认展示
-        csmooth:false,  // 线的类型  true 为平滑线 反之曲线
-        cshowtitle:true, //标题 默认展示
-        cshowyname:true , //y轴名称 默认展示
-        cshowxname:true , //x轴名称 默认展示
-      }
-    },
-    beforeDestroy() {
-      //清除定时器
-      clearInterval(this.timer);
-    },
-    methods: {
-      setBar() {
-        console.log('进入画图~~~~~~~~~~~~~~~~~~~')
-        const  width=document.getElementById(this.canvas).offsetWidth
-        let fontSize=0
-        if(width<600){
-          fontSize=14
-        }else if(width<1200) {
-          fontSize=18
-        }else{
-          fontSize=22
-        }
-        console.log('字体大小')
-        console.log(width)
-        console.log(fontSize)
-        this.xc = this.$echarts.init(document.getElementById(this.charts))
-        if(this.settime!==undefined){
-          this.time=this.settime
-        }
-        if(this.showtooltip!==undefined){ // 判断提示框
-          this.showtTip=this.showtooltip
-        }
-        if(this.csmooth!==undefined){ // 判断平滑线 折线
-          this.csmooth=this.smooth
-        }
-        if(this.showtitle!==undefined){ // 判断标题
-          this.cshowtitle=this.showtitle
-        }
-        if(this.showyname!==undefined){ // 判断是否展示y轴名称
-          this.cshowyname=this.showyname
-        }
-        if(this.showxname!==undefined){ // 判断是否展示x轴名称
-          this.cshowxname=this.showxname
-        }
-        if(this.cyname!==undefined){ // 判断平滑线 折线
-          this.cyname=this.yname
-        }
-        var serieData = []
-        var legend = this.legend
-        for (let i = 0; i < legend.length; i++) {
-          var series= {
-            name: legend[i],
-            type: 'bar',
-            barWidth: '25%',
-            data: this.sdata[i]
-          }
-          serieData.push(series)
-        }
-        this.xc.setOption({
-          title: {
-            text: this.title,
-            left:'center',
-            textStyle:{
-              fontSize:fontSize
-            },
-            show:this.cshowtitle
-          },
-          tooltip: {
-            show:this.showtTip,
-            alwaysShowContent: true,
-            backgroundColor: 'rgba(2, 59, 63, 0.45)',
-            // borderColor :'rgba(13, 109, 180)',
-            borderWidth: 0,
-            hideDelay: 100,
-            textStyle: {
-              fontSize: fontSize
-            },
-            confine: false,
-            formatter: function (params) {
-              var result = ''
-              params.forEach(function (item) {
-                result += item.marker + " " + item.seriesName + " &nbsp;&nbsp;&nbsp; <sapn style='color:#e1e52a;font-weight: bolder'>" + item.value + "</sapn></br>";
-              });
-              return "<div style='text-align: center;height: 1px;font-weight: normal'>" + params[0].axisValue + '</div><br/>' + result
-            },
-            trigger: 'axis',
-            axisPointer: {type: 'line', lineStyle: {width: 0}},
-            extraCssText: 'width: auto;height: auto;'
-          },
-          legend: {
-            // padding:[50,40,0,200], // 上右下左
-            data: this.legend,
-            textStyle:{
-              fontSize:fontSize
-            },
-            left:'20%',
-            top:'10%'
-          },
-          grid: {
-            left: '6%',
-            right: '15%',
-            bottom: '4%',
-            top:'20%',
-            containLabel: true
-          },
-          xAxis: [
-            {
-              name:this.cshowxname===true?this.xname:'',
-              type: 'category',
-              boundaryGap: true,
-
-              axisTick:{
-                show:false
-              },
-              axisLabel:{
-                fontSize:fontSize
-              },
-              nameTextStyle:{
-                fontSize:fontSize,
-                padding:[0,100,15,-12], // 上右下左
-              },
-              data:this.xdata
-            }
-
-          ],
-          yAxis: [
-            {
-
-              name:this.cshowyname===true?this.yname:'',
-              type: 'value',
-              nameTextStyle:{
-                fontSize:fontSize,
-                padding:[0,0,15,60], // 上右下左
-              },
-              axisLabel:{
-                fontSize:fontSize,
-                formatter: function (params) {
-                  if (params > 9999) {
-                    return params / 10000 + "万"
-                  }
-                  else
-                    return params
-                }
-              },
-              axisTick:{
-                show:false
-              },
-
-            }
-          ],
-          series: serieData
-        })
-        // let idx = -1;
-        // var dataLen = this.sdata[0].length
-        // this.timer = setInterval(() => {
-        //   idx = (idx + 1) % dataLen;
-        //   this.xc.dispatchAction({
-        //     type: 'showTip',
-        //     seriesIndex: 1,
-        //     dataIndex: idx
-        //   });
-        //
-        // }, this.time)
-      },
-
-    },
-    watch: {
-      'sdata' () {
-        // 清除定时器
-        clearInterval(this.timer)
-        this.setBar()
-      }
-    },
-    ready () {
-      this.setBar()
-
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
+
+<template>
+  <div>
+    <div class="text-1" :id="canvas">
+      <div :id="charts"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "barChart",
+
+    /*
+      折线图
+     1.必须要传的参数:xdata,sdata,legendData
+
+     2.规范值
+     传入参数 例
+          xdata:[1,2,3,4]
+          sdata:[
+            [2,4,6,8],
+            [1,3,5,7]
+          ]
+          legendData:['第一个','第二个']
+          legendData的长度等于sdata的长度
+          sdata的每一个数组的长度要和  xdata的长度相等
+
+    3.参数含义
+    xdata   :  x轴数据
+    sdata   :  展示的数据
+    legend : 展示那些显示那些不显示
+    title   :  标题
+    yname   :  y轴名称
+    xname   :  y轴名称
+    settime   :  tooltip 轮播的时间 默认 1500
+    showtooltip : 是否展示 提示框 默认展示
+    smooth : 曲线 平滑线 默认曲线
+    showtitle : 标题是否展示
+    showyname: y轴名称是否显示
+     */
+    props: [
+      'xdata',
+      'sdata',
+      'legend',
+      'title',
+      'yname',
+      'settime',
+      'showtooltip',
+      'smooth',
+      'showtitle',
+      'showyname',
+      'showxname',
+      'xname'
+    ],
+    data() {
+      return {
+        canvas: 'canvas_'+new Date().getTime()+'_'+Math.random()*10,
+        charts: 'charts_'+new Date().getTime()+'_'+Math.random()*10,
+        xc: '',
+        timer: '',
+        time:1500,  // 轮播提示的时间 默认 1500
+        showtTip:true,   // 轮播提示框 默认展示
+        csmooth:false,  // 线的类型  true 为平滑线 反之曲线
+        cshowtitle:true, //标题 默认展示
+        cshowyname:true , //y轴名称 默认展示
+        cshowxname:true , //x轴名称 默认展示
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    methods: {
+      setBar() {
+        console.log('进入画图~~~~~~~~~~~~~~~~~~~')
+        const  width=document.getElementById(this.canvas).offsetWidth
+        let fontSize=0
+        if(width<600){
+          fontSize=14
+        }else if(width<1200) {
+          fontSize=18
+        }else{
+          fontSize=22
+        }
+        console.log('字体大小')
+        console.log(width)
+        console.log(fontSize)
+        this.xc = this.$echarts.init(document.getElementById(this.charts))
+        if(this.settime!==undefined){
+          this.time=this.settime
+        }
+        if(this.showtooltip!==undefined){ // 判断提示框
+          this.showtTip=this.showtooltip
+        }
+        if(this.csmooth!==undefined){ // 判断平滑线 折线
+          this.csmooth=this.smooth
+        }
+        if(this.showtitle!==undefined){ // 判断标题
+          this.cshowtitle=this.showtitle
+        }
+        if(this.showyname!==undefined){ // 判断是否展示y轴名称
+          this.cshowyname=this.showyname
+        }
+        if(this.showxname!==undefined){ // 判断是否展示x轴名称
+          this.cshowxname=this.showxname
+        }
+        if(this.cyname!==undefined){ // 判断平滑线 折线
+          this.cyname=this.yname
+        }
+        var serieData = []
+        var legend = this.legend
+        for (let i = 0; i < legend.length; i++) {
+          var series= {
+            name: legend[i],
+            type: 'bar',
+            barWidth: '25%',
+            data: this.sdata[i]
+          }
+          serieData.push(series)
+        }
+        this.xc.setOption({
+          title: {
+            text: this.title,
+            left:'center',
+            textStyle:{
+              fontSize:fontSize
+            },
+            show:this.cshowtitle
+          },
+          tooltip: {
+            show:this.showtTip,
+            alwaysShowContent: true,
+            backgroundColor: 'rgba(2, 59, 63, 0.45)',
+            // borderColor :'rgba(13, 109, 180)',
+            borderWidth: 0,
+            hideDelay: 100,
+            textStyle: {
+              fontSize: fontSize
+            },
+            confine: false,
+            formatter: function (params) {
+              var result = ''
+              params.forEach(function (item) {
+                result += item.marker + " " + item.seriesName + " &nbsp;&nbsp;&nbsp; <sapn style='color:#e1e52a;font-weight: bolder'>" + item.value + "</sapn></br>";
+              });
+              return "<div style='text-align: center;height: 1px;font-weight: normal'>" + params[0].axisValue + '</div><br/>' + result
+            },
+            trigger: 'axis',
+            axisPointer: {type: 'line', lineStyle: {width: 0}},
+            extraCssText: 'width: auto;height: auto;'
+          },
+          legend: {
+            // padding:[50,40,0,200], // 上右下左
+            data: this.legend,
+            textStyle:{
+              fontSize:fontSize
+            },
+            left:'20%',
+            top:'10%'
+          },
+          grid: {
+            left: '6%',
+            right: '15%',
+            bottom: '4%',
+            top:'20%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              name:this.cshowxname===true?this.xname:'',
+              type: 'category',
+              boundaryGap: true,
+
+              axisTick:{
+                show:false
+              },
+              axisLabel:{
+                fontSize:fontSize
+              },
+              nameTextStyle:{
+                fontSize:fontSize,
+                padding:[0,100,15,-12], // 上右下左
+              },
+              data:this.xdata
+            }
+
+          ],
+          yAxis: [
+            {
+
+              name:this.cshowyname===true?this.yname:'',
+              type: 'value',
+              nameTextStyle:{
+                fontSize:fontSize,
+                padding:[0,0,15,60], // 上右下左
+              },
+              axisLabel:{
+                fontSize:fontSize,
+                formatter: function (params) {
+                  if (params > 9999) {
+                    return params / 10000 + "万"
+                  }
+                  else
+                    return params
+                }
+              },
+              axisTick:{
+                show:false
+              },
+
+            }
+          ],
+          series: serieData
+        })
+        // let idx = -1;
+        // var dataLen = this.sdata[0].length
+        // this.timer = setInterval(() => {
+        //   idx = (idx + 1) % dataLen;
+        //   this.xc.dispatchAction({
+        //     type: 'showTip',
+        //     seriesIndex: 1,
+        //     dataIndex: idx
+        //   });
+        //
+        // }, this.time)
+      },
+
+    },
+    watch: {
+      'sdata' () {
+        // 清除定时器
+        clearInterval(this.timer)
+        this.setBar()
+      }
+    },
+    ready () {
+      this.setBar()
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>