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>

 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>