manage-client 3.2.84-1 → 3.2.84-aode

package/src/components/BasisEcharts/LineChart.vue

@@ -1,243 +0,0 @@
-
-<template>
-  <div>
-    <div class="text-1">
-      <div id="charts"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "lineChart",
-
-    /*
-      折线图
-     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   :  展示的数据
-    legendData : 展示那些显示那些不显示
-    title   :  标题
-    yname   :  y轴名称
-    xname   :  y轴名称
-    settime   :  tooltip 轮播的时间 默认 1500
-    showtooltip : 是否展示 提示框 默认展示
-    smooth : 曲线 平滑线 默认曲线
-    showtitle : 标题是否展示
-    showyname: y轴名称是否显示
-     */
-    props: [
-      'xdata',
-      'sdata',
-      'legendData',
-      'title',
-      'yname',
-      'settime',
-      'showtooltip',
-      'smooth',
-      'showtitle',
-      'showyname',
-      'showxname',
-      'xname'
-    ],
-    data() {
-      return {
-
-        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('进入画图~~~~~~~~~~~~~~~~~~~')
-        console.log(this.legendData)
-        const  width=document.getElementById('canvas').offsetWidth
-        let fontSize=0
-        if(width<600){
-          fontSize=14
-        }else if(width<1200) {
-          fontSize=18
-        }else{
-          fontSize=22
-        }
-        this.xc = this.$echarts.init(document.getElementById('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 legendData = this.legendData
-        for (let i = 0; i < legendData.length; i++) {
-          var series= {
-            name: legendData[i],
-            type: 'line',
-            stack: legendData[i],
-            smooth: this.csmooth,
-            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.legendData,
-            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);
-        }
-    },
-    ready() {
-      this.setBar()
-
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>

package/src/components/BasisEcharts/RingChart.vue

@@ -1,196 +0,0 @@
-
-<template>
-  <div>
-    <div class="text-1">
-      <div :id="charts"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: "ringChart",
-    /*
-    环形图
-    sdata   :  展示的数据
-    legend : 展示那些显示那些不显示
-    title   :  标题
-    setTime   :  tootip 轮播的时间 默认 1500
-    showtooltip : 是否展示 提示框 默认展示
-    colorList : 传入的颜色列表
-
-     */
-    props: [
-      'sdata',
-      'legend',
-      'colorList',
-      'setTime',
-      'showtitle',
-      'showtooltip',
-      'title'
-
-    ],
-    data() {
-      return {
-        canvas: 'canvas_'+new Date().getTime()+'_'+Math.random()*10,
-        charts: 'charts_'+new Date().getTime()+'_'+Math.random()*10,
-        xc: '',
-        timer: '',
-        time:1500,
-        showtTip:true,   // 轮播提示框 默认展示
-        cshowtitle:true, //标题 默认展示
-        ccolorList:['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
-      }
-    },
-    beforeDestroy() {
-      //清除定时器
-      clearInterval(this.timer);
-    },
-    methods: {
-      setBar(){
-        let colorList=this.ccolorList
-        this.xc = this.$echarts.init(document.getElementById(this.charts))
-
-        if(this.setTime!==undefined){
-          this.time=this.setTime
-        }
-        if(this.colorList!==undefined){
-          colorList=this.colorList
-        }
-        if(this.showtooltip!==undefined){ // 判断提示框
-          this.showtTip=this.showtooltip
-        }
-        if(this.showtitle!==undefined){ // 判断标题
-          this.cshowtitle=this.showtitle
-        }
-        this.xc.setOption(
-          {
-            title: {
-              text: this.title,
-              x: 'center',
-              y: 'center',
-              textStyle: {
-                color: '#201b1b'
-              },
-              show:this.cshowtitle
-            },
-            tooltip: {
-              trigger: 'item',
-              // borderColor: 'rgba(255,255,255,.3)',
-              // backgroundColor: 'rgba(13,5,30,.6)',
-              extraCssText: 'width:auto;height:25%;',
-              borderWidth: 1,
-              padding: 5,
-              formatter: function(parms) {
-                var str = parms.marker + "" + parms.data.name + "</br>" +
-                  "" + parms.data.value + "</br>" +
-                  "占比：" + parms.percent + "%";
-                return str;
-              },
-              show:this.showtTip
-            },
-            legend: {
-              top: '30',
-              textStyle: {
-                color: '#161414',
-                fontSize:18
-              },
-              data: this.legend
-            },
-            series: [{
-              type: 'pie',
-              z: 3,
-              center: ['50%', '50%'],
-              radius: ['25%', '45%'],
-              clockwise: true,
-              avoidLabelOverlap: true,
-              hoverOffset: 15,
-              itemStyle: {
-                normal: {
-                  color: function(params) {
-                    return colorList[params.dataIndex]
-                  }
-                }
-              },
-              label: {
-                show: false,
-                position: 'outside',
-                formatter: '{a|{b}：{d}%}\n{hr|}',
-                rich: {
-                  hr: {
-                    backgroundColor: 't',
-                    borderRadius: 3,
-                    width: 3,
-                    height: 3,
-                    padding: [3, 3, 0, -12]
-                  },
-                  a: {
-                    padding: [-30, 15, -20, 15]
-                  }
-                }
-              },
-              labelLine: {
-                show:false,
-                normal: {
-                  length: 20,
-                  length2: 30,
-                  lineStyle: {
-                    width: 1
-                  }
-                }
-              },
-              data: this.sdata
-            }]
-          }
-        )
-        let index = 0;
-        let myChart=this.xc
-        this.timer = setInterval(() => {
-          myChart.dispatchAction({
-            type: 'hideTip',
-            seriesIndex: 0,
-            dataIndex: index
-          });
-          // 显示提示框
-          myChart.dispatchAction({
-            type: 'showTip',
-            seriesIndex: 0,
-            dataIndex: index
-          });
-          // 取消高亮指定的数据图形
-          myChart.dispatchAction({
-            type: 'downplay',
-            seriesIndex: 0,
-            dataIndex: index === 0 ? 5 : index - 1
-          });
-          myChart.dispatchAction({
-            type: 'highlight',
-            seriesIndex: 0,
-            dataIndex: index
-          });
-          index++;
-          if (index > 5) {
-            index = 0;
-          }
-
-        }, this.time)
-      }
-
-    },
-    watch: {
-      'sdata'(){
-        //清除定时器
-        clearInterval(this.timer);
-        this.setBar()
-      }
-    },
-    ready() {
-      this.setBar()
-
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>