zoukankan      html  css  js  c++  java
  • vue双曲线

    原型

      1 <template>
      2   <div :class="className" :style="{height:height,width}" />
      3 </template>
      4 <script>
      5 import echarts from 'echarts'
      6 import resize from './mixins/resize.js'
      7 export default {
      8   name: 'HomeChart',
      9   mixins: [resize],
     10   props: {
     11     className: {
     12       type: String,
     13       default: 'chart'
     14     },
     15      {
     16       type: String,
     17       default: '100%'
     18     },
     19     height: {
     20       type: String,
     21       default: '250px'
     22     },
     23     nameOne: {
     24       type: String,
     25       default: undefined
     26     },
     27     nameTwo: {
     28       type: String,
     29       default: undefined
     30     },
     31     // 月份
     32     rowData: {
     33       type: Array,
     34       default: () => []
     35     },
     36     dataArrOne: {
     37       type: Array,
     38       default: () => []
     39     },
     40     dataArrTwo: {
     41       type: Array,
     42       default: () => []
     43     }
     44   },
     45   data() {
     46     return {
     47       chart: null
     48     }
     49   },
     50   beforeDestroy() {
     51     if (!this.chart) {
     52       return
     53     }
     54     this.chart.dispose()
     55     this.chart = null
     56   },
     57   mounted() {
     58     this.initChart()
     59   },
     60   methods: {
     61     initChart() {
     62       this.chart = echarts.init(this.$el)
     63       this.chart.setOption({
     64         tooltip: {
     65           trigger: 'axis'
     66         },
     67         grid: {
     68           top: '5%',
     69           left: '10%',
     70           right: '5%',
     71           bottom: '25%'
     72         },
     73         xAxis: [
     74           {
     75             type: 'category',
     76             boundaryGap: false,
     77             axisLine: {
     78               show: true,
     79               lineStyle: {
     80                 color: '#fff'
     81               }
     82             },
     83             axisLabel: {
     84               textStyle: {
     85                 color: '#8D8E93',
     86                 padding: 8,
     87                 fontSize: 14
     88               },
     89               formatter: function(data) {
     90                 return data
     91               }
     92             },
     93             splitLine: {
     94               show: true,
     95               lineStyle: {
     96                 color: '#fff'
     97               }
     98             },
     99             axisTick: {
    100               show: false
    101             },
    102             // data: ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31']
    103             data: this.rowData
    104           }
    105         ],
    106         yAxis: [
    107           {
    108             nameTextStyle: {
    109               color: '#7ec7ff',
    110               fontSize: 16,
    111               padding: 10
    112             },
    113             min: 0,
    114             splitLine: {
    115               show: true,
    116               lineStyle: {
    117                 color: '#fff'
    118               }
    119             },
    120             axisLine: {
    121               show: true,
    122               lineStyle: {
    123                 color: '#fff'
    124               }
    125             },
    126             axisLabel: {
    127               show: true,
    128               textStyle: {
    129                 color: '#8D8E93',
    130                 padding: 10
    131               },
    132               formatter: function(value) {
    133                 if (value === 0) {
    134                   return value
    135                 }
    136                 return value
    137               }
    138             },
    139             axisTick: {
    140               show: false
    141             }
    142           }
    143         ],
    144         series: [
    145           {
    146             name: this.nameOne,
    147             type: 'line',
    148             symbol: 'circle', // 默认是空心圆(中间是白色的),改成实心圆
    149             showAllSymbol: true,
    150             symbolSize: 0,
    151             smooth: true,
    152             lineStyle: {
    153               normal: {
    154                  2,
    155                 color: 'rgba(247,160,4,1)' // 线条颜色
    156               },
    157               borderColor: 'rgba(0,0,0,.4)'
    158             },
    159             itemStyle: {
    160               color: 'rgba(247,160,4,1)',
    161               borderColor: '#646ace',
    162               borderWidth: 2
    163             },
    164             tooltip: {
    165               show: true
    166             },
    167             areaStyle: {
    168               // 区域填充样式
    169               normal: {
    170                 // 线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
    171                 color: new echarts.graphic.LinearGradient(
    172                   0,
    173                   0,
    174                   0,
    175                   1,
    176                   [
    177                     {
    178                       offset: 0,
    179                       color: 'rgba(247,160,4,.3)'
    180                     },
    181                     {
    182                       offset: 1,
    183                       color: 'rgba(247,160,4, 0)'
    184                     }
    185                   ],
    186                   false
    187                 )
    188               }
    189             },
    190             // data: ['40', '60', '22', '85', '50', '40']
    191             data: this.dataArrOne
    192           },
    193           {
    194             name: this.nameTwo,
    195             type: 'line',
    196             symbol: 'circle', // 默认是空心圆(中间是白色的),改成实心圆
    197             showAllSymbol: true,
    198             symbolSize: 0,
    199             smooth: true,
    200             lineStyle: {
    201               normal: {
    202                  2,
    203                 color: 'rgba(51,42,123,1)' // 线条颜色
    204               },
    205               borderColor: 'rgba(0,0,0,.4)'
    206             },
    207             itemStyle: {
    208               color: 'rgba(51,42,123,1)',
    209               borderColor: '#646ace',
    210               borderWidth: 2
    211             },
    212             tooltip: {
    213               show: true
    214             },
    215             areaStyle: {
    216               // 区域填充样式
    217               normal: {
    218                 // 线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
    219                 color: new echarts.graphic.LinearGradient(
    220                   0,
    221                   0,
    222                   0,
    223                   1,
    224                   [
    225                     {
    226                       offset: 0,
    227                       color: 'rgba(51,42,123,.2)'
    228                     },
    229                     {
    230                       offset: 1,
    231                       color: 'rgba(51,42,123, 0)'
    232                     }
    233                   ],
    234                   false
    235                 )
    236               }
    237             },
    238             // data: ['20', '50', '12', '65', '30', '60']
    239             data: this.dataArrTwo
    240           }
    241         ]
    242       })
    243     }
    244   }
    245 }
    246 </script>

    调用

     1 <template>
     2   <div>
     3     <!-- 总体情况 - 总览echarts -->
     4     <div v-loading="loading">
     5       <!-- 图标-->
     6       <div>
     7         <HomeChart
     8           v-if="showColumnar"
     9           ref="HomeChart"
    10           :name-one="$t('总企业变化')"
    11           :name-two="$t('跟踪企业变化')"
    12           :row-data="rowData"
    13           :data-arr-one="dataArrOne"
    14           :data-arr-two="dataArrTwo"
    15           height="350px"
    16         />
    17       </div>
    18     </div>
    19   </div>
    20 </template>
    21 <script>
    22 
    23 import HomeChart from '@/views/chart/homeChart'
    24 import { companyBaseChange } from '@/api/system/homeInformation/homeInformation.js'
    25 export default {
    26   components: {
    27     HomeChart
    28   },
    29   props: {
    30   },
    31   data() {
    32     return {
    33       loading: false,
    34       // 上面数据
    35       dataArrOne: [],
    36       // 下面数据
    37       dataArrTwo: [],
    38       // 月份
    39       rowData: [],
    40       showColumnar: false,
    41       yearOptions: [],
    42       choiceYear: '',
    43       // 当前页面的宽度
    44       thisPageWidth: (document.documentElement.clientWidth - 270) + 'px',
    45       formData: {}
    46     }
    47   },
    48   created() {
    49     this.initData()
    50   },
    51   mounted() {
    52   },
    53   methods: {
    54     initData() {
    55       companyBaseChange({}).then(response => {
    56         if (response.data.code === 200) {
    57           if (response.data) {
    58             this.rowData = response.data.xLabelArr
    59             this.dataArrOne = response.data.yLabelArr
    60             this.dataArrTwo = response.data.yLabelArr2
    61           }
    62           this.showColumnar = true
    63           this.loading = false
    64         } else {
    65           this.msgError(this.$t(response.data.msg))
    66           this.loading = false
    67         }
    68       })
    69     }
    70   }
    71 }
    72 </script>

    引用组件

          <el-col :span="11">
            <div class="grid-content">
              <div class="tit">
                <p>企业数量变化</p>
              </div>
              <companyBaseChange />
            </div>
          </el-col>

    js

     1 import request from '@/utils/request'
     2 
     3 
     4 // 企业变化
     5 export function companyBaseChange(query) {
     6   return request({
     7     url: '/homeInformation/companyBaseChange',
     8     method: 'get',
     9     params: query
    10   })
    11 }

    controller

    1     @ApiOperation(value = "企业每月的变化", notes="lgw")
    2     @GetMapping("companyBaseChange")
    3     @Log(title = "企业每月的变化", businessType = BusinessType.LIST)
    4     public AjaxResult companyBaseChange(HomeInformation homeInformation) {
    5         return AjaxResult.success(homeInformationService.companyBaseChange(homeInformation));
    6     }

    service

     1     /**
     2      *企业每月的变化
     3      */
     4     public Map<String, Object> companyBaseChange(HomeInformation homeInformation){
     5 
     6         List<HomeInformation> homeInformations;
     7         List<HomeInformation> companyBaseTrackChange;
     8         String[] str = {"01","02","03","04","05","06","07","08","09","10","11","12"};
     9         Map<String, Object> result = new HashMap<>();
    10         result.put("code", 200);
    11         result.put("msg", "");
    12         // x标题
    13         List<String> xLabelArr = new ArrayList<>();
    14         List<Integer> yLabelArr = new ArrayList<>();
    15         List<Integer> yLabelArr2 = new ArrayList<>();
    16         for(int i = 1; i <= 12 ; i++) {
    17             xLabelArr.add(i + "月");
    18         }
    19         homeInformations = homeInformationDao.companyBaseChange(homeInformation);
    20         companyBaseTrackChange = homeInformationDao.companyBaseTrackChange(homeInformation);
    21         if(StringUtils.isEmpty(companyBaseTrackChange)) {
    22             for(int i = 1; i <= 12 ; i++) {
    23                 yLabelArr2.add(0);
    24             }
    25         }else {
    26             Set<String> mArr2 = new HashSet<>();
    27             for(HomeInformation m : companyBaseTrackChange) {
    28                 mArr2.add(m.getMonthOnly());
    29             }
    30 
    31 
    32             for (int i = 0; i < str.length; i++) {
    33                 if (!mArr2.contains(str[i])) {
    34                     companyBaseTrackChange.add(i, new HomeInformation());
    35                 }
    36             }
    37             for (HomeInformation monthSums : companyBaseTrackChange) {
    38                 Integer monthSum = monthSums.getMonthSum();
    39                 if(monthSum==null){
    40                     yLabelArr2.add(0);
    41                 }else {
    42                     yLabelArr2.add(monthSum);
    43                 }
    44             }
    45         }
    46         if(StringUtils.isEmpty(homeInformations)) {
    47             for(int i = 1; i <= 12 ; i++) {
    48                 yLabelArr.add(0);
    49             }
    50         }else {
    51             Set<String> mArr = new HashSet<>();
    52             for(HomeInformation m : homeInformations) {
    53                 mArr.add(m.getMonthOnly());
    54             }
    55 
    56 
    57             for (int i = 0; i < str.length; i++) {
    58                 if (!mArr.contains(str[i])) {
    59                     homeInformations.add(i, new HomeInformation());
    60                 }
    61             }
    62             for (HomeInformation monthSums : homeInformations) {
    63                 Integer monthSum = monthSums.getMonthSum();
    64                 if(monthSum==null){
    65                     yLabelArr.add(0);
    66                 }else {
    67                     yLabelArr.add(monthSum);
    68                 }
    69             }
    70         }
    71         result.put("xLabelArr", xLabelArr);
    72         result.put("yLabelArr", yLabelArr);
    73         result.put("yLabelArr2", yLabelArr2);
    74         return result;
    75     }

    entity

     1 package com.anxin.sys.homeInformation.entity;
     2 
     3 import com.anxin.framework.web.entity.BaseEntity;
     4 import io.swagger.annotations.ApiModel;
     5 import io.swagger.annotations.ApiModelProperty;
     6 
     7 /**
     8  * 首页信息
     9  */
    10 @ApiModel(description = "首页信息")
    11 public class HomeInformation extends BaseEntity<HomeInformation> {
    12     private static final long serialVersionUID = 1L;
    13 
    14     /** 企业总数 */
    15     @ApiModelProperty(value = "企业总数",position=10)
    16     private Integer companyBaseCount;
    17 
    18     /** 企业跟踪总数 */
    19     @ApiModelProperty(value = "企业跟踪总数",position=10)
    20     private Integer companyTrackEnterpriseCount;
    21 
    22     /** 未跟踪总数 */
    23     @ApiModelProperty(value = "未跟踪总数",position=10)
    24     private Integer notTrackedCount;
    25     //月份
    26     private String monthOnly;
    27     //每月的总数
    28     private Integer monthSum;
    29 
    30     public String getMonthOnly() {
    31         return monthOnly;
    32     }
    33 
    34     public void setMonthOnly(String monthOnly) {
    35         this.monthOnly = monthOnly;
    36     }
    37 
    38     public Integer getMonthSum() {
    39         return monthSum;
    40     }
    41 
    42     public void setMonthSum(Integer monthSum) {
    43         this.monthSum = monthSum;
    44     }
    45 
    46     public Integer getCompanyBaseCount() {
    47         return companyBaseCount;
    48     }
    49 
    50     public void setCompanyBaseCount(Integer companyBaseCount) {
    51         this.companyBaseCount = companyBaseCount;
    52     }
    53 
    54     public Integer getCompanyTrackEnterpriseCount() {
    55         return companyTrackEnterpriseCount;
    56     }
    57 
    58     public void setCompanyTrackEnterpriseCount(Integer companyTrackEnterpriseCount) {
    59         this.companyTrackEnterpriseCount = companyTrackEnterpriseCount;
    60     }
    61 
    62     public Integer getNotTrackedCount() {
    63         return notTrackedCount;
    64     }
    65 
    66     public void setNotTrackedCount(Integer notTrackedCount) {
    67         this.notTrackedCount = notTrackedCount;
    68     }
    69 
    70     public HomeInformation() {
    71     }
    72 
    73     public HomeInformation(Integer companyBaseCount, Integer companyTrackEnterpriseCount, Integer notTrackedCount) {
    74         this.companyBaseCount = companyBaseCount;
    75         this.companyTrackEnterpriseCount = companyTrackEnterpriseCount;
    76         this.notTrackedCount = notTrackedCount;
    77     }
    78 
    79 }

    dao

     1 package com.anxin.sys.homeInformation.entity;
     2 
     3 import com.anxin.framework.web.entity.BaseEntity;
     4 import io.swagger.annotations.ApiModel;
     5 import io.swagger.annotations.ApiModelProperty;
     6 
     7 /**
     8  * 首页信息
     9  */
    10 @ApiModel(description = "首页信息")
    11 public class HomeInformation extends BaseEntity<HomeInformation> {
    12     private static final long serialVersionUID = 1L;
    13 
    14     /** 企业总数 */
    15     @ApiModelProperty(value = "企业总数",position=10)
    16     private Integer companyBaseCount;
    17 
    18     /** 企业跟踪总数 */
    19     @ApiModelProperty(value = "企业跟踪总数",position=10)
    20     private Integer companyTrackEnterpriseCount;
    21 
    22     /** 未跟踪总数 */
    23     @ApiModelProperty(value = "未跟踪总数",position=10)
    24     private Integer notTrackedCount;
    25     //月份
    26     private String monthOnly;
    27     //每月的总数
    28     private Integer monthSum;
    29 
    30     public String getMonthOnly() {
    31         return monthOnly;
    32     }
    33 
    34     public void setMonthOnly(String monthOnly) {
    35         this.monthOnly = monthOnly;
    36     }
    37 
    38     public Integer getMonthSum() {
    39         return monthSum;
    40     }
    41 
    42     public void setMonthSum(Integer monthSum) {
    43         this.monthSum = monthSum;
    44     }
    45 
    46     public Integer getCompanyBaseCount() {
    47         return companyBaseCount;
    48     }
    49 
    50     public void setCompanyBaseCount(Integer companyBaseCount) {
    51         this.companyBaseCount = companyBaseCount;
    52     }
    53 
    54     public Integer getCompanyTrackEnterpriseCount() {
    55         return companyTrackEnterpriseCount;
    56     }
    57 
    58     public void setCompanyTrackEnterpriseCount(Integer companyTrackEnterpriseCount) {
    59         this.companyTrackEnterpriseCount = companyTrackEnterpriseCount;
    60     }
    61 
    62     public Integer getNotTrackedCount() {
    63         return notTrackedCount;
    64     }
    65 
    66     public void setNotTrackedCount(Integer notTrackedCount) {
    67         this.notTrackedCount = notTrackedCount;
    68     }
    69 
    70     public HomeInformation() {
    71     }
    72 
    73     public HomeInformation(Integer companyBaseCount, Integer companyTrackEnterpriseCount, Integer notTrackedCount) {
    74         this.companyBaseCount = companyBaseCount;
    75         this.companyTrackEnterpriseCount = companyTrackEnterpriseCount;
    76         this.notTrackedCount = notTrackedCount;
    77     }
    78 
    79 }

    xml

     1     <!--   企业每月的变化-->
     2     <select id="companyBaseChange" parameterType="HomeInformation" resultType="com.anxin.sys.homeInformation.entity.HomeInformation">
     3         SELECT
     4             COUNT(*) AS 'monthSum',
     5             DATE_FORMAT( a.create_time, '%m' ) AS 'monthOnly'
     6         FROM
     7             company_base a
     8         WHERE
     9             a.del_flag = '0'
    10         GROUP BY
    11             monthOnly
    12     </select>
    13 
    14     <!--   企业跟踪每月的变化-->
    15     <select id="companyBaseTrackChange" parameterType="HomeInformation" resultType="com.anxin.sys.homeInformation.entity.HomeInformation">
    16         SELECT
    17             COUNT(*) AS 'monthSum',
    18             DATE_FORMAT( a.create_time, '%m' ) AS 'monthOnly'
    19         FROM
    20             company_track_enterprise a
    21         WHERE
    22             a.del_flag = '0'
    23         GROUP BY
    24             monthOnly
    25     </select>
  • 相关阅读:
    JSTL标签
    EL(表达式语言)
    JDBC技术
    Java中的一些术语的解释
    Servlet过滤器和监听器
    MVC-初识
    EF-初识
    .NET细节知识总结,不断更新
    多线程-Task、await/async
    多线程-Thread和ThreadPool
  • 原文地址:https://www.cnblogs.com/lemperor/p/15166817.html
Copyright © 2011-2022 走看看