vue双曲线
原型
1 <template>
2 <div :class="className" :style="{height:height,width: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 width: {
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 width: 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 width: 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>
vue双曲线的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- 如何在 ACK 中使用 MSE Ingress
简介: 本文将为大家分享一下 Ingress 标准 和 实现的趋势,介绍一下 MSE Ingress 在这个趋势下的优势和实践,为大家做关键入口选择多一些参考. 作者:彦林 随着云原生架构的普及,K8 ...
- 宜搭5月更新：跨应用数据读写能力升级，AI组件内测开放
简介:表单.权限管理.AI组件等功能上新啦- 本次,我们带来了表单.权限管理.数据管理.平台管理权限.组件等功能的升级. 表单 支持跨应用数据查询 在使用组件数据联动.关联其他表单数据.关联表单组件 ...
- 基于 Flutter 的 Web 渲染引擎「北海」正式开源！
简介: 阿里巴巴历时 3 年自研开发的 Web 渲染引擎北海(英文名:Kraken)正式开源,致力打造易扩展,跨平台,高性能的渲染引擎,并已在优酷.大麦.天猫等业务场景中使用. 作者 | 染陌来源 | ...
- 用手机写代码：基于 Serverless 的在线编程能力探索
简介:Serverless 架构的按量付费模式,可以在保证在线编程功能性能的前提下,进一步降低成本.本文将会以阿里云函数计算为例,通过 Serverless 架构实现一个 Python 语言的在线编 ...
- [Go] golang 替换组件包 更新 go.mod, go.sum 的方式
当我们不再使用某个包,或者包名变更时,是如何保证 go.mod 更新的. 只要代码中没有地方 import 使用到某个包了,我们运行: $ go mod tidy module 管理器会帮我们自动清理 ...
- 日志服务 HarmonyOS NEXT 日志采集最佳实践
背景信息 随着数字化新时代的全面展开以及 5G 与物联网(IoT)技术的迅速普及,操作系统正面临前所未有的变革需求.在这个背景下,华为公司自主研发的鸿蒙操作系统(HarmonyOS)应运而生,旨在满足 ...
- net core下链路追踪skywalking安装和简单使用
当我们用很多服务时,各个服务间的调用关系是怎么样的?各个服务单调用的顺序\时间性能怎么样?服务出错了,到底是哪个服务引起的?这些问题我们用什么方案解决呢,以前的方式是各个系统自己单独做日志,出了问题从 ...
- 前端如何操作动态渲染的多个checkbox列表单选
input[type=checkbox]:after{ content:""; display:inline-block; width:16px; ...
- Solution - AGC060C
Link 简要题意:称一个长为 \(2^n-1\) 的排列 \(P\) 像堆,如果 \(P_i \lt P_{2i}\),且 \(P_i \lt P_{2i+1}\).给定 \(a,b\),设 \(u ...
- Elasticsdump 数据导入/导出
目录 一.安装过程 安装NODE 通过npm安装elasticdump 二.数据导出 实操一 实操二 实操三 三.文件导入 一.安装过程 当前工具主要是用来对ES中的数据进行数据导入/导出,以及对数据 ...