monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit 32ba28cbc406989f6cea9e93bab6288c55a4b671 1 parent e9817296

电子税务局大屏页面搭建

Inline Side-by-side
Showing 47 changed files with 1387 additions and 739 deletions
@@ -130,18 +130,42 @@ @@ -130,18 +130,42 @@
130 } 130 }
131 131
132 .screen-right #right-top { 132 .screen-right #right-top {
133 - height: 26%; 133 + height: 32%;
134 position: relative; 134 position: relative;
135 } 135 }
136 .screen-right #right-center { 136 .screen-right #right-center {
137 - height: 37%; 137 + height: 35%;
138 position: relative; 138 position: relative;
139 } 139 }
140 .screen-right #right-bottom { 140 .screen-right #right-bottom {
141 - height: 37%; 141 + height: 33%;
142 position: relative; 142 position: relative;
143 } 143 }
  144 +.screen-right #right-top .monitoring-bar{
  145 + height: 100%;
  146 + position: relative;
  147 + text-align: left;
  148 +}
  149 +.cpu-dropdown{
  150 + text-align: right;
  151 +}
  152 +.cpu-dropdown .el-dropdown .el-dropdown-selfdefine{
  153 + color:#ffffff;
  154 + cursor: pointer;
  155 + margin-right: 15px;
  156 +}
144 157
  158 +.el-dropdown__popper .el-dropdown-menu{
  159 + background-color: rgba(0,0,0,0.5);
  160 + border:none;
  161 +}
  162 +.el-dropdown-menu__item{
  163 + color:#ffffff;
  164 +}
  165 +.el-dropdown__popper.el-popper[role="tooltip"]{
  166 + border:none;
  167 + background-color: rgba(0,0,0,0);
  168 +}
145 .screen-bottom { 169 .screen-bottom {
146 width: 100%; 170 width: 100%;
147 height: 34%; 171 height: 34%;
@@ -167,3 +191,12 @@ @@ -167,3 +191,12 @@
167 width: 25%; 191 width: 25%;
168 position: relative; 192 position: relative;
169 } 193 }
  194 +.icon-arrow{
  195 + background-image: url("/vue3/src/assets/images/digitalDp/icon-arrow.png");
  196 + width:12px;
  197 + height:12px;
  198 + background-size: 100%;
  199 + display: inline-block;
  200 + background-repeat: no-repeat;
  201 + background-position: center;
  202 +}
1 .declare-container,.declare-lineChart{ 1 .declare-container,.declare-lineChart{
2 - background: url("/vue3/src/assets/images/zjdp/img-bg.png");  
3 - background-position: center; 2 + /* background: url("/vue3/src/assets/images/zjdp/img-bg.png");
  3 + background-position: center;*/
4 4
5 } 5 }
6 .declare-container{ 6 .declare-container{
@@ -4,6 +4,13 @@ @@ -4,6 +4,13 @@
4 justify-content: center; 4 justify-content: center;
5 padding: 5px 0; 5 padding: 5px 0;
6 } 6 }
  7 +.declare-report .declare-report-num{
  8 + background-image: url("/vue3/src/assets/images/digitalDp/text-bg.png");
  9 + background-repeat: no-repeat;
  10 + background-position: center;
  11 + background-size: contain;
  12 + margin-top: 20px;
  13 +}
7 .declare-report .grid-content img{ 14 .declare-report .grid-content img{
8 padding-right:10%; 15 padding-right:10%;
9 border-right:1px solid #ffffff; 16 border-right:1px solid #ffffff;
@@ -59,6 +59,12 @@ body{font-size: 15px;} @@ -59,6 +59,12 @@ body{font-size: 15px;}
59 height: 550px; 59 height: 550px;
60 60
61 } 61 }
  62 +.declare-lineChart{
  63 + height:100%;
  64 +}
  65 +.monitoring-bar{
  66 + height:50%;
  67 +}
62 .screen-nav{ 68 .screen-nav{
63 margin-bottom: 30px; 69 margin-bottom: 30px;
64 padding-right: 20px; 70 padding-right: 20px;
@@ -104,12 +104,6 @@ const routes = [{ @@ -104,12 +104,6 @@ const routes = [{
104 path: '/zjdaping', 104 path: '/zjdaping',
105 name: 'zjdaping', 105 name: 'zjdaping',
106 component: () => myImport('views/zjdaping/index') 106 component: () => myImport('views/zjdaping/index')
107 - },  
108 - {  
109 - path:'/zjdapingchart',  
110 - name:'zjdapingchart',  
111 - component: () => myImport('views/zjdaping/components/barChart/index')  
112 -  
113 } 107 }
114 ]; 108 ];
115 109
1 -<div class="com-container">  
2 - <div class="com-chart" id="availability_ref"></div> 1 +<div class="com-container available-chart" id="availability_ref" style="text-align: left" >
  2 + <img :style="comtitleImgStyle" src="/vue3/src/assets/images/digitalDp/title-availability.png" alt="">
  3 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
  4 + <!--<div class="com-chart" ></div>
3 <div class="topfive-box-title"> 5 <div class="topfive-box-title">
4 - <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="available-title-img"> <!-- bor1_6 --> 6 + <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="available-title-img"> &lt;!&ndash; bor1_6 &ndash;&gt;
5 <span :style="comtitleTextStyle" class="available-title-size">业务可用性</span> 7 <span :style="comtitleTextStyle" class="available-title-size">业务可用性</span>
6 - </div> 8 + </div>-->
7 </div> 9 </div>
1 export default { 1 export default {
2 - name: 'Availability', 2 + name: 'availability',
3 template: '', 3 template: '',
4 - components: {},  
5 - data () { 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
  9 + data(){
6 return { 10 return {
7 - chartInstance: null,  
8 - allData: {  
9 - polyline: {  
10 - title: "业务可用性",  
11 - unit: "%",  
12 - data: {  
13 - name: "占比",  
14 - data: ["67","70","80","71","90","92","72","70","56","45","89","100"]  
15 - }  
16 - },  
17 - xAxis: {  
18 - time: ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]  
19 - }  
20 - },  
21 - titleFontSize: 20,  
22 - startValue: 0, // 区域缩放的起点值  
23 - endValue: 6, // 区域缩放的终点值  
24 - timerId: null // 定时器的标识 11 + domainName:sessionStorage.getItem('domainName'),
  12 + apiUrl:'/api-web/sxview/getBusinessAvailability',
  13 + resourceStatisticsData:'',
  14 + optionData:'',
  15 + ySeriesCommon:[],
  16 + titleFontSize: 30,
  17 +
25 } 18 }
26 }, 19 },
27 - mounted () {  
28 - this.initChart()  
29 - this.getData()  
30 - window.addEventListener('resize', this.screenAdapter)  
31 - this.screenAdapter()  
32 - },  
33 - unmounted () {  
34 - window.removeEventListener('resize', this.screenAdapter)  
35 - clearInterval(this.timerId)  
36 - },  
37 computed: { 20 computed: {
38 comtitleTextStyle () { 21 comtitleTextStyle () {
39 return { 22 return {
@@ -42,159 +25,290 @@ export default { @@ -42,159 +25,290 @@ export default {
42 }, 25 },
43 comtitleImgStyle () { 26 comtitleImgStyle () {
44 return { 27 return {
45 - // height: this.titleFontSize + 'px',  
46 - width: this.titleFontSize * 8 + 'px' 28 + height: this.titleFontSize * 2.1 + 'px'
47 } 29 }
48 } 30 }
49 }, 31 },
50 - methods: {  
51 - initChart () {  
52 - this.chartInstance = echarts.init(document.getElementById('availability_ref'))  
53 - const initOption = {  
54 - grid: {  
55 - top: '25%',  
56 - left: '3%',  
57 - right: '6%',  
58 - bottom: '3%',  
59 - containLabel: true  
60 - },  
61 - legend: {  
62 - right: '2%',  
63 - top: '5%' 32 + setup(props, {attrs, slots, emit}) {
  33 + const {proxy} = Vue.getCurrentInstance();
  34 +
  35 +
  36 + // 挂载完
  37 +
  38 + Vue.onMounted(() => {
  39 + proxy.screenAdapter();
  40 + proxy.getData();
  41 +
  42 + })
  43 + const getData=()=> {
  44 + $.get(proxy.domainName + proxy.apiUrl, function (res) {
  45 + const data = res;
  46 + if (data && data.data) {
  47 + let resData = data.data;
  48 +
  49 + }
  50 + // proxy.optionInit();
  51 +
  52 + })
  53 +
  54 + proxy.optionInit();
  55 + }
  56 +
  57 + const optionInit=()=>{
  58 +
  59 + let data3=[350, 350, 350, 350, 350, 350, 350];
  60 + let data4=[220, 182, 191, 234, 290, 330, 310];
  61 + let data2=[100, 100, 100, 100, 100, 100, 100];
  62 + let data1=[12.3, 7.56, 66.6, 5.44, 66.6, 5.44,6.52];
  63 +
  64 + let min1=proxy.calMin([data1,data2]);
  65 + let max1=proxy.calMax([data1,data2]);
  66 + let min2=proxy.calMin([data3,data4]);
  67 + let max2=proxy.calMax([data3,data4]);
  68 + //业务双y轴数据
  69 + proxy.ySeriesCommon=[
  70 + {
  71 + name:'可用性',
  72 + type: 'line',
  73 + smooth:true,
  74 + // stack: 'Total',
  75 + show:false,
  76 + data:data3,
  77 + yAxisIndex:1,
  78 + showSymbol:false,
  79 + itemStyle : {
  80 + normal : {
  81 + color:"#97d5f4",//tooltip里的小圆点颜色
  82 + lineStyle:{
  83 + color:'#97d5f4',
  84 + width:1
  85 + }
  86 + }
  87 + },
  88 + areaStyle: {
  89 + // color:'rgba(151,213,244,0.4)',
  90 + normal:{
  91 + color:new echarts.graphic.LinearGradient(0, 0, 0, .6, [{ //关键在这里, 设置面积渐变
  92 + offset: 0,
  93 + color: '#97d5f4' //这里是我设置的渐变的颜色从线条颜色变为透明
  94 + }, {
  95 + offset: 1,
  96 + color: 'rgba(151,213,244,0.1)'
  97 + }])
  98 + }
  99 +
  100 + },
64 }, 101 },
65 - xAxis: {  
66 - type: 'category',  
67 - boundaryGap: false,  
68 - axisLabel: {  
69 - textStyle: {  
70 - color: '#E6E8EB' 102 + {
  103 + name:'成功率',
  104 + type: 'line',
  105 + smooth:true,
  106 + // stack: 'Total',
  107 + show:false,
  108 + data:data1,
  109 + yAxisIndex:0,
  110 + showSymbol:false,
  111 + itemStyle : {
  112 + normal : {
  113 + color:"#efe0a7",//tooltip里的小圆点颜色
  114 + lineStyle:{
  115 + color:'#efe0a7',
  116 + width:1
  117 + }
71 } 118 }
72 - } 119 + },
  120 + areaStyle: {
  121 + color:'rgba(239,224,167,0)'
  122 + },
73 }, 123 },
74 - yAxis: {  
75 - type: 'value',  
76 - splitLine: {  
77 - show: false 124 + {
  125 + name:'响应率',
  126 + type: 'line',
  127 + smooth:true,
  128 + // stack: 'Total',
  129 + show:false,
  130 + data:data2,
  131 + yAxisIndex:0,
  132 + showSymbol:false,
  133 + itemStyle : {
  134 + normal : {
  135 + color:"#e5abd1",//tooltip里的小圆点颜色
  136 + lineStyle:{
  137 + color:'#e5abd1',
  138 + width:1
  139 + }
  140 + }
78 }, 141 },
79 - axisLabel: {  
80 - textStyle: {  
81 - color: '#E6E8EB' 142 + areaStyle: {
  143 + color:'rgba(229,171,209,0)'
  144 + },
  145 + },
  146 + {
  147 + name:'交易量',
  148 + type: 'line',
  149 + smooth:true,
  150 + // stack: 'Total',
  151 + show:false,
  152 + data:data4,
  153 + yAxisIndex:1,
  154 + showSymbol:false,
  155 + itemStyle : {
  156 + normal : {
  157 + color:"#97aaff",//tooltip里的小圆点颜色
  158 + lineStyle:{
  159 + color:'#97aaff',
  160 + width:1,
  161 + }
82 } 162 }
83 - } 163 + },
  164 + areaStyle: {
  165 + color:'rgba(151,170,255,0)'
  166 + },
84 } 167 }
85 - }  
86 - this.chartInstance.setOption(initOption)  
87 - },  
88 - getData () {  
89 - // await this.$http.get()  
90 - // const { data: ret } = await this.$http.get('responsemonitor')  
91 - // this.allData = ret  
92 - // console.log(ret)  
93 - this.updateChart()  
94 - this.startInterval()  
95 - },  
96 - updateChart () {  
97 - // 半透明的颜色值  
98 - const colorArr1 = [  
99 - 'rgba(11, 168, 44, 0.5)',  
100 - 'rgba(44, 110, 255, 0.5)',  
101 - 'rgba(22, 242, 217, 0.5)',  
102 - 'rgba(254, 33, 30, 0.5)',  
103 - 'rgba(250, 105, 0, 0.5)'  
104 ] 168 ]
105 - // 全透明的颜色值  
106 - const colorArr2 = [  
107 - 'rgba(11, 168, 44, 0)',  
108 - 'rgba(44, 110, 255, 0)',  
109 - 'rgba(22, 242, 217, 0)',  
110 - 'rgba(254, 33, 30, 0)',  
111 - 'rgba(250, 105, 0, 0)'  
112 - ]  
113 - const timeArr = this.allData.xAxis.today  
114 - const seriesData = this.allData.polyline.data.data  
115 - const seriesName = this.allData.polyline.data.name  
116 - // 图例的数据  
117 - const legendArr = this.allData.polyline.data.data.map(item => {  
118 - return item.name 169 + // let xAxisDataLength=proxy.ySeriesCommon[0].length;
  170 + let xAxisData=[];
  171 + for(let i=0;i<=24;i++){
  172 + if(i%4==0){
  173 + xAxisData.push(i+':00')
  174 +
  175 + }
  176 + }
  177 + let legendData=[];
  178 + $.each(proxy.ySeriesCommon,function (i,v){
  179 + legendData.push(v.name)
119 }) 180 })
120 - console.log(legendArr)  
121 - const title = this.allData.polyline.title  
122 - const unit = this.allData.polyline.unit  
123 - const dataOption = {  
124 - // title: {  
125 - // text: '{Sunny| 业务可用性 }',  
126 - // show: true  
127 - // },  
128 - xAxis: {  
129 - data: timeArr 181 + proxy.legendData=legendData;
  182 + proxy.optionData = {
  183 + title: {
  184 + text: ''
  185 + },
  186 + tooltip: {
  187 + trigger: 'axis',
  188 + backgroundColor:'rgba(50,50,50,0.7)',
  189 + borderColor:"#333",
  190 + textStyle:{
  191 + color:"#fff",
  192 + align:'left'
  193 + }
  194 +
130 }, 195 },
131 legend: { 196 legend: {
132 - data: legendArr 197 + data: proxy.legendData,
  198 + itemHeight:0,//图例圆圈大小设置
  199 + y:'0px',
  200 + textStyle: {
  201 + color: '#ffffff',
  202 + fontsize:"12px"
  203 + }
  204 +
133 }, 205 },
134 - dataZoom: {  
135 - show: false,  
136 - startValue: this.startValue,  
137 - endValue: this.endValue 206 + grid: {
  207 + top:'15%',
  208 + left: '3%',
  209 + right: '4%',
  210 + // bottom: '3%',
  211 + containLabel: true,
138 }, 212 },
139 - series: [ 213 + xAxis: {
  214 + type: 'category',
  215 + boundaryGap: false,
  216 + data: xAxisData,
  217 +
  218 + axisLine:{
  219 + show:false,//是否显示坐标线
  220 + },
  221 + axisTick: {
  222 + show: false //是否显示坐标刻度
  223 + },
  224 + axisLabel:{
  225 + color:'#ffffff',
  226 + },
  227 +
  228 + },
  229 + yAxis:[
140 { 230 {
141 - name: seriesName,  
142 - type: 'line',  
143 - data: seriesData,  
144 - smooth: true,  
145 - areaStyle: {  
146 - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
147 - {  
148 - offset: 0,  
149 - color: colorArr1[2]  
150 - }, // %0的颜色值  
151 - {  
152 - offset: 1,  
153 - color: colorArr2[2]  
154 - } // 100%的颜色值  
155 - ]) 231 +
  232 + type: 'value',
  233 + axisLabel: {
  234 + formatter: '{value} %'//以百分比显示
  235 + },
  236 + splitLine:{
  237 + lineStyle: {
  238 + color:'#0a1b31'
  239 + }
  240 + },
  241 + min:0,
  242 + max:100,
  243 + splitNumber:5,
  244 + interval:(100-0)/5
  245 + }, {
  246 + name: '单位:万',
  247 + type: 'value',
  248 + axisLabel: {
  249 + show: true,
  250 + interval: 'right',//居中显示
  251 + },
  252 + splitLine:{
  253 + lineStyle: {
  254 + color:'#0a1b31'
  255 + }
  256 + },
  257 + min:min2,
  258 + max:max2,
  259 + splitNumber:5,
  260 + interval:(max2-min2)/5
  261 + },
  262 + ],
  263 + series: proxy.ySeriesCommon,
  264 + itemStyle:{
  265 + showSymbol:false
  266 + }
  267 + };
  268 + }
  269 + //计算最大值
  270 + const calMax=(arr)=>{
  271 + let max=0;
  272 + arr.forEach((el)=>{
  273 + el.forEach((el1)=>{
  274 + if(!(el1 === undefined || el1 === '')){
  275 + if(max<el1){
  276 + max=el1;
156 } 277 }
157 } 278 }
158 - ]  
159 - }  
160 - this.chartInstance.setOption(dataOption)  
161 - },  
162 - screenAdapter () {  
163 - this.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6  
164 - const adapterOption = {  
165 - legend: {  
166 - itemWidth: this.titleFontSize,  
167 - itemHeight: this.titleFontSize,  
168 - itemGap: this.titleFontSize,  
169 - textStyle: {  
170 - fontSize: this.titleFontSize / 2 279 + })
  280 + })
  281 + let maxint=Math.ceil(max/9.5);
  282 + let maxval=maxint * 10;//让显示的刻度是整数
  283 + return maxval;
  284 + }
  285 + //计算最小值
  286 + const calMin=(arr)=>{
  287 + let min=0;
  288 + arr.forEach((el)=>{
  289 + el.forEach((el1)=>{
  290 + if(!(el1 === undefined || el1 === '')){
  291 + if(min>el1){
  292 + min=el1;
  293 + }
171 } 294 }
172 - }  
173 - }  
174 - this.chartInstance.setOption(adapterOption)  
175 - this.chartInstance.resize()  
176 - },  
177 - startInterval () {  
178 - if (this.timerId) {  
179 - clearInterval(this.timerId)  
180 - }  
181 - let index = 12  
182 - /*this.timerId = setInterval(() => {  
183 - this.startValue++  
184 - this.endValue++  
185 - // this.allData.polyline.data  
186 - // console.log((this.allData.polyline.data)[0].data.length)  
187 - if ((this.allData.polyline.data).length > 0) {  
188 - index = (this.allData.polyline.data)[0].data.length  
189 - }  
190 - if (this.endValue > index - 1) {  
191 - this.startValue = 0  
192 - this.endValue = 6  
193 - }  
194 - console.log(this.startValue)  
195 - console.log(this.endValue)  
196 - this.updateChart()  
197 - }, 5000)*/ 295 + })
  296 + })
  297 + let minint=Math.floor(min/10);
  298 + let minval=minint * 10;//让显示的刻度是整数
  299 + return minval;
  300 + }
  301 +
  302 + const screenAdapter=()=>{
  303 + proxy.titleFontSize = document.getElementById('availability_ref').offsetWidth / 100 * 3.6
  304 + }
  305 +
  306 + return{
  307 + calMax,
  308 + calMin,
  309 + optionInit,
  310 + getData,
  311 + screenAdapter
198 } 312 }
199 } 313 }
200 -} 314 +}
1 -<div class="com-container">  
2 - <div class="com-chart" id="bandwidthcpu_ref"></div> 1 +<div class="com-container"id="bandwidthcpu_ref">
  2 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
3 </div> 3 </div>
1 export default { 1 export default {
2 name: 'BandwidthCpu', 2 name: 'BandwidthCpu',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data () { 9 data () {
6 return { 10 return {
7 - chartInstance: null, 11 + optionData:'',
8 allData: { 12 allData: {
9 polyline: { 13 polyline: {
10 title: "带宽占用监控", 14 title: "带宽占用监控",
@@ -27,7 +31,6 @@ export default { @@ -27,7 +31,6 @@ export default {
27 } 31 }
28 }, 32 },
29 mounted () { 33 mounted () {
30 - this.initChart()  
31 this.getData() 34 this.getData()
32 window.addEventListener('resize', this.screenAdapter) 35 window.addEventListener('resize', this.screenAdapter)
33 this.screenAdapter() 36 this.screenAdapter()
@@ -37,46 +40,7 @@ export default { @@ -37,46 +40,7 @@ export default {
37 clearInterval(this.timerId) 40 clearInterval(this.timerId)
38 }, 41 },
39 methods: { 42 methods: {
40 - initChart () {  
41 - this.chartInstance = echarts.init(document.getElementById('bandwidthcpu_ref'))  
42 - const initOption = {  
43 - grid: {  
44 - top: '15%',  
45 - left: '5%',  
46 - right: '4%',  
47 - bottom: '20%',  
48 - containLabel: true  
49 - },  
50 - legend: {  
51 - right: '10%',  
52 - top: '5%',  
53 - textStyle: {  
54 - color: 'wihte'  
55 - }  
56 - },  
57 - xAxis: {  
58 - type: 'category',  
59 - boundaryGap: false,  
60 - axisLabel: {  
61 - textStyle: {  
62 - color: '#E6E8EB'  
63 - }  
64 - }  
65 - },  
66 - yAxis: {  
67 - type: 'value',  
68 - splitLine: {  
69 - show: false  
70 - },  
71 - axisLabel: {  
72 - textStyle: {  
73 - color: '#E6E8EB'  
74 - }  
75 - }  
76 - }  
77 - }  
78 - this.chartInstance.setOption(initOption)  
79 - }, 43 +
80 async getData () { 44 async getData () {
81 // await this.$http.get() 45 // await this.$http.get()
82 // const { data: ret } = await this.$http.get('bandwidthcpu') 46 // const { data: ret } = await this.$http.get('bandwidthcpu')
@@ -88,17 +52,19 @@ export default { @@ -88,17 +52,19 @@ export default {
88 updateChart () { 52 updateChart () {
89 // 半透明的颜色值 53 // 半透明的颜色值
90 const colorArr1 = [ 54 const colorArr1 = [
91 - 'rgba(11, 168, 44, 0.5)', 55 + 'rgba(35, 255, 255, 0.5)',
92 'rgba(44, 110, 255, 0.5)', 56 'rgba(44, 110, 255, 0.5)',
93 'rgba(22, 242, 217, 0.5)', 57 'rgba(22, 242, 217, 0.5)',
  58 + 'rgba(11, 168, 44, 0.5)',
94 'rgba(254, 33, 30, 0.5)', 59 'rgba(254, 33, 30, 0.5)',
95 'rgba(250, 105, 0, 0.5)' 60 'rgba(250, 105, 0, 0.5)'
96 ] 61 ]
97 - // 全透明的颜色值 62 + // 全透明的颜色值
98 const colorArr2 = [ 63 const colorArr2 = [
99 - 'rgba(11, 168, 44, 0)', 64 + 'rgba(35, 255, 255, 0)',
100 'rgba(44, 110, 255, 0)', 65 'rgba(44, 110, 255, 0)',
101 'rgba(22, 242, 217, 0)', 66 'rgba(22, 242, 217, 0)',
  67 + 'rgba(11, 168, 44, 0)',
102 'rgba(254, 33, 30, 0)', 68 'rgba(254, 33, 30, 0)',
103 'rgba(250, 105, 0, 0)' 69 'rgba(250, 105, 0, 0)'
104 ] 70 ]
@@ -109,6 +75,16 @@ export default { @@ -109,6 +75,16 @@ export default {
109 type: 'line', 75 type: 'line',
110 data: item.data, 76 data: item.data,
111 smooth: true, 77 smooth: true,
  78 + showSymbol:false,
  79 + itemStyle : {
  80 + normal : {
  81 + color:colorArr1[index],//tooltip里的小圆点颜色
  82 + lineStyle:{
  83 + color:colorArr1[index],
  84 + width:2,
  85 + }
  86 + }
  87 + },
112 areaStyle: { 88 areaStyle: {
113 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 89 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
114 { 90 {
@@ -129,29 +105,86 @@ export default { @@ -129,29 +105,86 @@ export default {
129 }) 105 })
130 const title = this.allData.polyline.title 106 const title = this.allData.polyline.title
131 const unit = this.allData.polyline.unit 107 const unit = this.allData.polyline.unit
132 - const dataOption = { 108 + const seriesData=seriesArr;
  109 + let xAxisData=timeArr;
  110 + this.optionData = {
133 title: { 111 title: {
134 text: title, 112 text: title,
135 left: 'center', 113 left: 'center',
136 - bottom: '8%'  
137 - },  
138 - xAxis: {  
139 - data: timeArr 114 + bottom: '8%',
  115 + textStyle: {
  116 + fontSize: this.titleFontSize*0.5,
  117 + color:'#ffffff'
  118 + }
  119 +
140 }, 120 },
141 - yAxis: {  
142 - name: unit 121 + tooltip: {
  122 + trigger: 'axis',
  123 + backgroundColor:'rgba(50,50,50,0.7)',
  124 + borderColor:"#333",
  125 + textStyle:{
  126 + color:"#fff",
  127 + align:'left'
  128 + }
  129 +
143 }, 130 },
144 legend: { 131 legend: {
145 - data: legendArr 132 + data: legendArr,
  133 + itemHeight:0,//图例圆圈大小设置
  134 + right: '5%',
  135 + top: '5%',
  136 + textStyle: {
  137 + color: '#ffffff',
  138 + fontsize:"12px"
  139 + }
  140 +
146 }, 141 },
147 - dataZoom: {  
148 - show: false,  
149 - startValue: this.startValue,  
150 - endValue: this.endValue 142 + grid: {
  143 + top: '15%',
  144 + left: '3%',
  145 + right: '4%',
  146 + bottom: '20%',
  147 + containLabel: true
151 }, 148 },
152 - series: seriesArr  
153 - }  
154 - this.chartInstance.setOption(dataOption) 149 + xAxis: {
  150 + type: 'category',
  151 + boundaryGap: false,
  152 + data: xAxisData,
  153 +
  154 + axisLine:{
  155 + show:false,//是否显示坐标线
  156 + },
  157 + axisTick: {
  158 + show: false //是否显示坐标刻度
  159 + },
  160 + axisLabel:{
  161 + color:'#ffffff',
  162 + },
  163 +
  164 + },
  165 + yAxis: {
  166 + type: 'value',
  167 + name:unit,
  168 + nameTextStyle:{
  169 + color:'#ffffff',
  170 + padding:[0,0,0,-20]
  171 + },
  172 + axisLabel: {
  173 + color:'#ffffff',
  174 + // formatter: '{value} %'//以百分比显示
  175 + },
  176 + axisLine:{
  177 + show:true,//是否显示坐标线
  178 + },
  179 + splitLine:{
  180 + lineStyle: {
  181 + color:'#0a1b31'
  182 + }
  183 + }
  184 +
  185 + },
  186 + series: seriesData
  187 + };
155 }, 188 },
156 screenAdapter () { 189 screenAdapter () {
157 this.titleFontSize = document.getElementById('bandwidthcpu_ref').offsetWidth / 100 * 3.6 190 this.titleFontSize = document.getElementById('bandwidthcpu_ref').offsetWidth / 100 * 3.6
@@ -182,8 +215,7 @@ export default { @@ -182,8 +215,7 @@ export default {
182 } 215 }
183 } 216 }
184 } 217 }
185 - this.chartInstance.setOption(adapterOption)  
186 - this.chartInstance.resize() 218 +
187 }, 219 },
188 startInterval () { 220 startInterval () {
189 if (this.timerId) { 221 if (this.timerId) {
1 -<div class="com-container">  
2 - <div class="com-chart" id="declarecpu_ref"></div> 1 +<div class="com-container" id="declarecpu_ref">
  2 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
  3 +
  4 +<!-- <div class="com-chart" id="declarecpu_ref"></div>-->
3 </div> 5 </div>
1 export default { 1 export default {
2 name: 'ResponseMonitor', 2 name: 'ResponseMonitor',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data () { 9 data () {
6 return { 10 return {
7 - chartInstance: null, 11 + legendData:'',
  12 + optionData:'',
8 allData: { 13 allData: {
9 polyline: { 14 polyline: {
10 title: "申报库CPU监控", 15 title: "申报库CPU监控",
@@ -22,94 +27,88 @@ export default { @@ -22,94 +27,88 @@ export default {
22 } 27 }
23 }, 28 },
24 startValue: 0, // 区域缩放的起点值 29 startValue: 0, // 区域缩放的起点值
25 - endValue: 6, // 区域缩放的终点值  
26 - timerId: null // 定时器的标识 30 + endValue: 9, // 区域缩放的终点值
  31 + timerId: null, // 定时器的标识
  32 + titleFontSize: 30,
  33 +
  34 + curve: 'KPIDA0ACBBP',
  35 + rateTitle: 'KPIDA0ACBBK',
  36 + numerTitle: 'KPIDA0ACBBG'
27 } 37 }
28 }, 38 },
  39 +
29 mounted () { 40 mounted () {
30 - this.initChart()  
31 - this.getData() 41 +
  42 + this.getData(this)
32 window.addEventListener('resize', this.screenAdapter) 43 window.addEventListener('resize', this.screenAdapter)
33 this.screenAdapter() 44 this.screenAdapter()
  45 +
34 }, 46 },
35 unmounted () { 47 unmounted () {
36 - window.removeEventListener('resize', this.screenAdapter) 48 + // window.removeEventListener('resize', this.screenAdapter)
37 clearInterval(this.timerId) 49 clearInterval(this.timerId)
38 }, 50 },
39 methods: { 51 methods: {
40 - initChart () {  
41 - // this.chartInstance = this.$echarts.init(this.$refs.declarecpu_ref, 'chalk')  
42 - this.chartInstance = echarts.init(document.getElementById('declarecpu_ref'))  
43 - const initOption = {  
44 - grid: {  
45 - top: '15%',  
46 - left: '3%',  
47 - right: '4%',  
48 - bottom: '20%',  
49 - containLabel: true  
50 - },  
51 - legend: {  
52 - right: '10%',  
53 - top: '5%',  
54 - textStyle: {  
55 - color: 'wihte'  
56 - }  
57 - },  
58 - xAxis: {  
59 - type: 'category',  
60 - boundaryGap: false,  
61 - axisLabel: {  
62 - textStyle: {  
63 - color: '#E6E8EB'  
64 - }  
65 - }  
66 - },  
67 - yAxis: {  
68 - type: 'value',  
69 - splitLine: {  
70 - show: false  
71 - },  
72 - axisLabel: {  
73 - textStyle: {  
74 - color: '#E6E8EB'  
75 - }  
76 - } 52 +
  53 + getData (that) {
  54 + const { proxy } = Vue.getCurrentInstance();
  55 + /* var params = {
  56 + curve: that.curve,
  57 + rateTitle: that.rateTitle,
  58 + numerTitle: that.numerTitle
  59 + };
  60 + proxy.$http.get("/api-web/bigScreen/declarePolyline", params, function (res) {
  61 + if(res.success){
  62 + console.log('9**',res.obj)
  63 + that.allData = res.obj;
  64 + that.updateChart()
77 } 65 }
78 - }  
79 - this.chartInstance.setOption(initOption)  
80 - },  
81 - async getData () {  
82 - // await this.$http.get()  
83 - // const { data: ret } = await this.$http.get('declarecpu')  
84 - // this.allData = ret  
85 - // console.log(ret)  
86 - this.updateChart()  
87 - this.startInterval() 66 + });*/
  67 + that.updateChart()
  68 +
  69 +
88 }, 70 },
89 updateChart () { 71 updateChart () {
90 // 半透明的颜色值 72 // 半透明的颜色值
91 const colorArr1 = [ 73 const colorArr1 = [
92 - 'rgba(11, 168, 44, 0.5)', 74 + 'rgba(35, 255, 255, 0.5)',
93 'rgba(44, 110, 255, 0.5)', 75 'rgba(44, 110, 255, 0.5)',
94 'rgba(22, 242, 217, 0.5)', 76 'rgba(22, 242, 217, 0.5)',
  77 + 'rgba(11, 168, 44, 0.5)',
95 'rgba(254, 33, 30, 0.5)', 78 'rgba(254, 33, 30, 0.5)',
96 'rgba(250, 105, 0, 0.5)' 79 'rgba(250, 105, 0, 0.5)'
97 ] 80 ]
98 - // 全透明的颜色值 81 + // 全透明的颜色值
99 const colorArr2 = [ 82 const colorArr2 = [
100 - 'rgba(11, 168, 44, 0)', 83 + 'rgba(35, 255, 255, 0)',
101 'rgba(44, 110, 255, 0)', 84 'rgba(44, 110, 255, 0)',
102 'rgba(22, 242, 217, 0)', 85 'rgba(22, 242, 217, 0)',
  86 + 'rgba(11, 168, 44, 0)',
103 'rgba(254, 33, 30, 0)', 87 'rgba(254, 33, 30, 0)',
104 'rgba(250, 105, 0, 0)' 88 'rgba(250, 105, 0, 0)'
105 ] 89 ]
106 const timeArr = this.allData.xAxis.today 90 const timeArr = this.allData.xAxis.today
107 - const seriesArr = this.allData.polyline.data.map((item, index) => {  
108 - return { 91 + const seriesArr = this.allData.polyline.data;
  92 +
  93 + this.declareNumer = this.allData.polyline.declareNumer
  94 + let seriesData=[];
  95 +
  96 + $.each(seriesArr,function (index,item){
  97 + seriesData .push({
109 name: item.name, 98 name: item.name,
110 type: 'line', 99 type: 'line',
111 data: item.data, 100 data: item.data,
112 smooth: true, 101 smooth: true,
  102 + showSymbol:false,
  103 + itemStyle : {
  104 + normal : {
  105 + color:colorArr1[index],//tooltip里的小圆点颜色
  106 + lineStyle:{
  107 + color:colorArr1[index],
  108 + width:2,
  109 + }
  110 + }
  111 + },
113 areaStyle: { 112 areaStyle: {
114 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 113 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
115 { 114 {
@@ -122,84 +121,130 @@ export default { @@ -122,84 +121,130 @@ export default {
122 } // 100%的颜色值 121 } // 100%的颜色值
123 ]) 122 ])
124 } 123 }
125 - } 124 + })
126 }) 125 })
  126 +
127 // 图例的数据 127 // 图例的数据
128 const legendArr = this.allData.polyline.data.map(item => { 128 const legendArr = this.allData.polyline.data.map(item => {
129 return item.name 129 return item.name
130 }) 130 })
131 - const title = this.allData.polyline.title  
132 - const unit = this.allData.polyline.unit  
133 - const dataOption = { 131 + //x轴数据
  132 + // let xAxisDataLength=seriesData.length;
  133 + // let xAxisData=[];
  134 + // for(let i=1;i<=xAxisDataLength;i++){
  135 + // xAxisData.push(i)
  136 + // }
  137 + let xAxisData=timeArr;
  138 + this.optionData = {
134 title: { 139 title: {
135 - text: title, 140 + text: '申报库CPU监控',
136 left: 'center', 141 left: 'center',
137 - bottom: '8%'  
138 - },  
139 - xAxis: {  
140 - data: timeArr 142 + bottom: '8%',
  143 + textStyle: {
  144 + fontSize: this.titleFontSize*0.5,
  145 + color:'#ffffff'
  146 + }
  147 +
141 }, 148 },
142 - yAxis: {  
143 - name: unit 149 + tooltip: {
  150 + trigger: 'axis',
  151 + backgroundColor:'rgba(50,50,50,0.7)',
  152 + borderColor:"#333",
  153 + textStyle:{
  154 + color:"#fff",
  155 + align:'left'
  156 + }
  157 +
144 }, 158 },
145 legend: { 159 legend: {
146 - data: legendArr  
147 - },  
148 - dataZoom: {  
149 - show: false,  
150 - startValue: this.startValue,  
151 - endValue: this.endValue  
152 - },  
153 - series: seriesArr  
154 - }  
155 - this.chartInstance.setOption(dataOption)  
156 - },  
157 - screenAdapter () {  
158 - this.titleFontSize = document.getElementById('declarecpu_ref').offsetWidth / 100 * 3.6  
159 - const adapterOption = {  
160 - title: { 160 + data: legendArr,
  161 + itemHeight:0,//图例圆圈大小设置
  162 + right: '5%',
  163 + top: '5%',
161 textStyle: { 164 textStyle: {
162 - fontSize: this.titleFontSize,  
163 - color: 'white' 165 + color: '#ffffff',
  166 + fontsize:"12px"
164 } 167 }
  168 +
  169 + },
  170 + grid: {
  171 + top: '15%',
  172 + left: '3%',
  173 + right: '4%',
  174 + bottom: '20%',
  175 + containLabel: true
  176 + },
  177 + xAxis: {
  178 + type: 'category',
  179 + boundaryGap: false,
  180 + data: xAxisData,
  181 +
  182 + axisLine:{
  183 + show:false,//是否显示坐标线
  184 + },
  185 + axisTick: {
  186 + show: false //是否显示坐标刻度
  187 + },
  188 + axisLabel:{
  189 + color:'#ffffff',
  190 + },
  191 +
165 }, 192 },
166 yAxis: { 193 yAxis: {
167 - top: this.titleFontSize,  
168 - nameTextStyle: {  
169 - padding: [0, 0, -(this.titleFontSize / 2), -(this.titleFontSize)], // 修改位置  
170 - fontSize: this.titleFontSize / 2,  
171 - color: 'white' 194 + type: 'value',
  195 + name:'cpu%',
  196 + nameTextStyle:{
  197 + color:'#ffffff',
  198 + padding:[0,0,0,-20]
  199 + },
  200 + axisLabel: {
  201 + color:'#ffffff',
  202 + // formatter: '{value} %'//以百分比显示
  203 + },
  204 + axisLine:{
  205 + show:true,//是否显示坐标线
  206 + },
  207 + splitLine:{
  208 + lineStyle: {
  209 + color:'#0a1b31'
  210 + }
172 } 211 }
  212 +
173 }, 213 },
  214 + series: seriesData
  215 + };
  216 +
  217 + },
  218 + screenAdapter () {
  219 + this.titleFontSize = document.getElementById('declarecpu_ref').offsetWidth / 100 * 3.6
  220 + console.log(this.titleFontSize)
  221 + const adapterOption = {
174 legend: { 222 legend: {
175 itemWidth: this.titleFontSize, 223 itemWidth: this.titleFontSize,
176 itemHeight: this.titleFontSize, 224 itemHeight: this.titleFontSize,
177 itemGap: this.titleFontSize, 225 itemGap: this.titleFontSize,
178 textStyle: { 226 textStyle: {
179 - fontSize: this.titleFontSize / 1.5 227 + fontSize: this.titleFontSize / 2
180 } 228 }
181 } 229 }
182 } 230 }
183 - this.chartInstance.setOption(adapterOption)  
184 - this.chartInstance.resize() 231 +
185 }, 232 },
186 startInterval () { 233 startInterval () {
187 if (this.timerId) { 234 if (this.timerId) {
188 clearInterval(this.timerId) 235 clearInterval(this.timerId)
189 } 236 }
190 - let index = 12 237 + let index = 10
191 /*this.timerId = setInterval(() => { 238 /*this.timerId = setInterval(() => {
192 this.startValue++ 239 this.startValue++
193 this.endValue++ 240 this.endValue++
194 - if ((this.allData.polyline.data).length > 0) {  
195 - index = (this.allData.polyline.data)[0].data.length 241 + if (this.allData.polyline.data.data.length > 0) {
  242 + index = this.allData.polyline.data.data.length
196 } 243 }
197 if (this.endValue > index - 1) { 244 if (this.endValue > index - 1) {
198 this.startValue = 0 245 this.startValue = 0
199 - this.endValue = 6 246 + this.endValue = 9
200 } 247 }
201 - console.log(this.startValue)  
202 - console.log(this.endValue)  
203 this.updateChart() 248 this.updateChart()
204 }, 5000)*/ 249 }, 5000)*/
205 } 250 }
1 -<div class="com-container" id="declarepolyline_ref">  
2 - <LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :legendData="legendData" :chartId="chartId" v-if="ySeriesCommon.length"></LineChart>  
3 -  
4 -<!-- <div class="com-chart" id="declarepolyline_ref"></div>-->  
5 - <!-- <div class="declarepolyline-title" :style="comtitlesizeStyle">  
6 - <el-row>  
7 - <el-col :span="24">  
8 - <div class="grid-content bg-purple-dark">  
9 - <img src="./src/assets/img/icon-ysb.png" :style="comimgsizeStyle">  
10 - <span>本月应申报</span>  
11 - </div>  
12 - </el-col>  
13 - </el-row>  
14 - <el-row>  
15 - <el-col :span="24">  
16 - <div class="grid-content bg-purple-dark" :style="comtitletextStyle">  
17 - {{declareNumer}}  
18 - </div>  
19 - </el-col>  
20 - </el-row>  
21 - <el-row>  
22 - <el-col :span="24">  
23 - <div class="grid-content bg-purple-dark">  
24 - <img src="./src/assets/img/icon-sbl.png" :style="comimgsizeStyle">  
25 - <span>本月申报率</span>  
26 - </div>  
27 - </el-col>  
28 - </el-row>  
29 - <el-row>  
30 - <el-col :span="24">  
31 - <div class="grid-content bg-purple-dark" :style="comtitletextStyle">  
32 - <span>{{declareRateLeft}}</span><span :style="comboxtextStyle">{{declareRateRight}}</span>  
33 - </div>  
34 - </el-col>  
35 - </el-row>  
36 - </div>--> 1 +<div class="com-container">
  2 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
37 </div> 3 </div>
1 export default { 1 export default {
2 name: 'declarePolyline', 2 name: 'declarePolyline',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data () { 9 data () {
6 return { 10 return {
7 chartInstance: null, 11 chartInstance: null,
@@ -9,6 +13,7 @@ export default { @@ -9,6 +13,7 @@ export default {
9 yAxisCommon:'', 13 yAxisCommon:'',
10 ySeriesCommon:'', 14 ySeriesCommon:'',
11 legendData:'', 15 legendData:'',
  16 + optionData:'',
12 // allData: { 17 // allData: {
13 // polyline: { 18 // polyline: {
14 // data: { 19 // data: {
@@ -62,53 +67,17 @@ export default { @@ -62,53 +67,17 @@ export default {
62 } 67 }
63 }, 68 },
64 mounted () { 69 mounted () {
65 - this.initChart() 70 +
66 this.getData(this) 71 this.getData(this)
67 - window.addEventListener('resize', this.screenAdapter) 72 + // window.addEventListener('resize', this.screenAdapter)
68 // this.screenAdapter() 73 // this.screenAdapter()
69 }, 74 },
70 unmounted () { 75 unmounted () {
71 - window.removeEventListener('resize', this.screenAdapter) 76 + // window.removeEventListener('resize', this.screenAdapter)
72 clearInterval(this.timerId) 77 clearInterval(this.timerId)
73 }, 78 },
74 methods: { 79 methods: {
75 - initChart () {  
76 - /*this.chartInstance = echarts.init(document.getElementById('declarepolyline_ref'))  
77 - const initOption = {  
78 - grid: {  
79 - top: '10%',  
80 - left: '1%',  
81 - right: '30%',  
82 - bottom: '1%',  
83 - containLabel: true  
84 - },  
85 - legend: {  
86 - right: '2%',  
87 - top: '5%'  
88 - },  
89 - xAxis: {  
90 - type: 'category',  
91 - boundaryGap: false,  
92 - axisLabel: {  
93 - textStyle: {  
94 - color: '#E6E8EB'  
95 - }  
96 - }  
97 - },  
98 - yAxis: {  
99 - type: 'value',  
100 - splitLine: {  
101 - show: false  
102 - },  
103 - axisLabel: {  
104 - textStyle: {  
105 - color: '#E6E8EB'  
106 - }  
107 - }  
108 - }  
109 - }  
110 - this.chartInstance.setOption(initOption)*/  
111 - }, 80 +
112 getData (that) { 81 getData (that) {
113 const { proxy } = Vue.getCurrentInstance(); 82 const { proxy } = Vue.getCurrentInstance();
114 var params = { 83 var params = {
@@ -121,7 +90,7 @@ export default { @@ -121,7 +90,7 @@ export default {
121 console.log('9**',res.obj) 90 console.log('9**',res.obj)
122 that.allData = res.obj; 91 that.allData = res.obj;
123 that.updateChart() 92 that.updateChart()
124 - that.startInterval() 93 + // that.startInterval()
125 } 94 }
126 }); 95 });
127 96
@@ -132,6 +101,7 @@ export default { @@ -132,6 +101,7 @@ export default {
132 'rgba(11, 168, 44, 0.5)', 101 'rgba(11, 168, 44, 0.5)',
133 'rgba(44, 110, 255, 0.5)', 102 'rgba(44, 110, 255, 0.5)',
134 'rgba(22, 242, 217, 0.5)', 103 'rgba(22, 242, 217, 0.5)',
  104 + 'rgba(35, 255, 255, 0.5)',
135 'rgba(254, 33, 30, 0.5)', 105 'rgba(254, 33, 30, 0.5)',
136 'rgba(250, 105, 0, 0.5)' 106 'rgba(250, 105, 0, 0.5)'
137 ] 107 ]
@@ -140,6 +110,7 @@ export default { @@ -140,6 +110,7 @@ export default {
140 'rgba(11, 168, 44, 0)', 110 'rgba(11, 168, 44, 0)',
141 'rgba(44, 110, 255, 0)', 111 'rgba(44, 110, 255, 0)',
142 'rgba(22, 242, 217, 0)', 112 'rgba(22, 242, 217, 0)',
  113 + 'rgba(35, 255, 255, 0)',
143 'rgba(254, 33, 30, 0)', 114 'rgba(254, 33, 30, 0)',
144 'rgba(250, 105, 0, 0)' 115 'rgba(250, 105, 0, 0)'
145 ] 116 ]
@@ -156,72 +127,96 @@ export default { @@ -156,72 +127,96 @@ export default {
156 const legendArr = this.allData.polyline.data.data.map(item => { 127 const legendArr = this.allData.polyline.data.data.map(item => {
157 return item.name 128 return item.name
158 }) 129 })
159 - this.yAxisCommon={  
160 - type: 'value',  
161 - splitLine:{  
162 - lineStyle: {  
163 - color:'#0a1b31'  
164 - }  
165 - },  
166 - axisLabel:{  
167 - color:'#ffffff',  
168 - }, 130 + //x轴数据
  131 + let xAxisDataLength=seriesData.length;
  132 + let xAxisData=[];
  133 + for(let i=1;i<=xAxisDataLength;i++){
  134 + xAxisData.push(i)
169 } 135 }
170 - let ySeriesCommon=[];  
171 - this.legendData=legendArr;  
172 - ySeriesCommon.push({  
173 - name: seriesName,  
174 - type: 'line',  
175 - data: seriesData,  
176 - smooth: true,  
177 - areaStyle: {  
178 - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
179 - {  
180 - offset: 0,  
181 - color: colorArr1[1]  
182 - }, // %0的颜色值  
183 - {  
184 - offset: 1,  
185 - color: colorArr2[1]  
186 - } // 100%的颜色值  
187 - ])  
188 - }  
189 - }) 136 + this.optionData = {
  137 + title: {
  138 + text: ''
  139 + },
  140 + tooltip: {
  141 + trigger: 'axis',
  142 + backgroundColor:'rgba(50,50,50,0.7)',
  143 + borderColor:"#333",
  144 + textStyle:{
  145 + color:"#fff",
  146 + align:'left'
  147 + }
190 148
191 - /* const dataOption = {  
192 - xAxis: {  
193 - data: timeArr  
194 }, 149 },
195 legend: { 150 legend: {
196 - data: legendArr 151 + data: legendArr,
  152 + itemHeight:0,//图例圆圈大小设置
  153 + y:'7px',
  154 + textStyle: {
  155 + color: '#ffffff',
  156 + fontsize:"12px"
  157 + }
  158 +
197 }, 159 },
198 - dataZoom: {  
199 - show: false,  
200 - startValue: this.startValue,  
201 - endValue: this.endValue 160 + grid: {
  161 + left: '3%',
  162 + right: '4%',
  163 + bottom: '3%',
  164 + containLabel: true,
202 }, 165 },
203 - series: [  
204 - {  
205 - name: seriesName,  
206 - type: 'line',  
207 - data: seriesData,  
208 - smooth: true,  
209 - areaStyle: {  
210 - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
211 - {  
212 - offset: 0,  
213 - color: colorArr1[1]  
214 - }, // %0的颜色值  
215 - {  
216 - offset: 1,  
217 - color: colorArr2[1]  
218 - } // 100%的颜色值  
219 - ]) 166 + xAxis: {
  167 + type: 'category',
  168 + boundaryGap: false,
  169 + data: xAxisData,
  170 +
  171 + axisLine:{
  172 + show:false,//是否显示坐标线
  173 + },
  174 + axisTick: {
  175 + show: false //是否显示坐标刻度
  176 + },
  177 + axisLabel:{
  178 + color:'#ffffff',
  179 + },
  180 +
  181 + },
  182 + yAxis: {
  183 + axisLabel: {
  184 + color:'#ffffff',
  185 + formatter: '{value} %'//以百分比显示
  186 + },
  187 + splitLine:{
  188 + lineStyle: {
  189 + color:'#0a1b31'
220 } 190 }
  191 + },
  192 +
  193 + },
  194 + series: {
  195 + name: seriesName,
  196 + type: 'line',
  197 + data: seriesData,
  198 + smooth: true,
  199 + showSymbol:false,
  200 + color:'#01E6E6',
  201 + areaStyle: {
  202 + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  203 + {
  204 + offset: 0,
  205 + color: colorArr1[3]
  206 + }, // %0的颜色值
  207 + {
  208 + offset: 1,
  209 + color: colorArr2[3]
  210 + } // 100%的颜色值
  211 + ])
221 } 212 }
222 - ]  
223 - }  
224 - this.chartInstance.setOption(dataOption)*/ 213 + },
  214 + itemStyle:{
  215 + showSymbol:false
  216 + }
  217 + };
  218 +
  219 +
225 }, 220 },
226 screenAdapter () { 221 screenAdapter () {
227 this.titleFontSize = document.getElementById('declarepolyline_ref').offsetWidth / 100 * 3.6 222 this.titleFontSize = document.getElementById('declarepolyline_ref').offsetWidth / 100 * 3.6
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 </el-row> 10 </el-row>
11 <el-row> 11 <el-row>
12 <el-col :span="24"> 12 <el-col :span="24">
13 - <div class="grid-content bg-purple-dark" :style="comtitletextStyle"> 13 + <div class="grid-content bg-purple-dark declare-report-num" :style="comtitletextStyle">
14 {{declareNumer}} 14 {{declareNumer}}
15 </div> 15 </div>
16 </el-col> 16 </el-col>
1 -<div class="com-container">  
2 - <div class="com-chart" id="documentcpu_ref"></div> 1 +<div class="com-container" id="documentcpu_ref">
  2 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
3 </div> 3 </div>
1 export default { 1 export default {
2 name: 'DocumentCpu', 2 name: 'DocumentCpu',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data () { 9 data () {
6 return { 10 return {
7 - chartInstance: null, 11 + optionData:'',
8 allData: { 12 allData: {
9 polyline: { 13 polyline: {
10 title: "文书库CPU监控", 14 title: "文书库CPU监控",
@@ -27,7 +31,6 @@ export default { @@ -27,7 +31,6 @@ export default {
27 } 31 }
28 }, 32 },
29 mounted () { 33 mounted () {
30 - this.initChart()  
31 this.getData() 34 this.getData()
32 window.addEventListener('resize', this.screenAdapter) 35 window.addEventListener('resize', this.screenAdapter)
33 this.screenAdapter() 36 this.screenAdapter()
@@ -37,46 +40,7 @@ export default { @@ -37,46 +40,7 @@ export default {
37 clearInterval(this.timerId) 40 clearInterval(this.timerId)
38 }, 41 },
39 methods: { 42 methods: {
40 - initChart () {  
41 - this.chartInstance = echarts.init(document.getElementById('documentcpu_ref'))  
42 - const initOption = {  
43 - grid: {  
44 - top: '15%',  
45 - left: '3%',  
46 - right: '4%',  
47 - bottom: '20%',  
48 - containLabel: true  
49 - },  
50 - legend: {  
51 - right: '10%',  
52 - top: '5%',  
53 - textStyle: {  
54 - color: 'wihte'  
55 - }  
56 - },  
57 - xAxis: {  
58 - type: 'category',  
59 - boundaryGap: false,  
60 - axisLabel: {  
61 - textStyle: {  
62 - color: '#E6E8EB'  
63 - }  
64 - }  
65 - },  
66 - yAxis: {  
67 - type: 'value',  
68 - splitLine: {  
69 - show: false  
70 - },  
71 - axisLabel: {  
72 - textStyle: {  
73 - color: '#E6E8EB'  
74 - }  
75 - }  
76 - }  
77 - }  
78 - this.chartInstance.setOption(initOption)  
79 - }, 43 +
80 async getData () { 44 async getData () {
81 // await this.$http.get() 45 // await this.$http.get()
82 // const { data: ret } = await this.$http.get('documentcpu') 46 // const { data: ret } = await this.$http.get('documentcpu')
@@ -88,17 +52,19 @@ export default { @@ -88,17 +52,19 @@ export default {
88 updateChart () { 52 updateChart () {
89 // 半透明的颜色值 53 // 半透明的颜色值
90 const colorArr1 = [ 54 const colorArr1 = [
91 - 'rgba(11, 168, 44, 0.5)', 55 + 'rgba(35, 255, 255, 0.5)',
92 'rgba(44, 110, 255, 0.5)', 56 'rgba(44, 110, 255, 0.5)',
93 'rgba(22, 242, 217, 0.5)', 57 'rgba(22, 242, 217, 0.5)',
  58 + 'rgba(11, 168, 44, 0.5)',
94 'rgba(254, 33, 30, 0.5)', 59 'rgba(254, 33, 30, 0.5)',
95 'rgba(250, 105, 0, 0.5)' 60 'rgba(250, 105, 0, 0.5)'
96 ] 61 ]
97 - // 全透明的颜色值 62 + // 全透明的颜色值
98 const colorArr2 = [ 63 const colorArr2 = [
99 - 'rgba(11, 168, 44, 0)', 64 + 'rgba(35, 255, 255, 0)',
100 'rgba(44, 110, 255, 0)', 65 'rgba(44, 110, 255, 0)',
101 'rgba(22, 242, 217, 0)', 66 'rgba(22, 242, 217, 0)',
  67 + 'rgba(11, 168, 44, 0)',
102 'rgba(254, 33, 30, 0)', 68 'rgba(254, 33, 30, 0)',
103 'rgba(250, 105, 0, 0)' 69 'rgba(250, 105, 0, 0)'
104 ] 70 ]
@@ -109,6 +75,16 @@ export default { @@ -109,6 +75,16 @@ export default {
109 type: 'line', 75 type: 'line',
110 data: item.data, 76 data: item.data,
111 smooth: true, 77 smooth: true,
  78 + showSymbol:false,
  79 + itemStyle : {
  80 + normal : {
  81 + color:colorArr1[index],//tooltip里的小圆点颜色
  82 + lineStyle:{
  83 + color:colorArr1[index],
  84 + width:2,
  85 + }
  86 + }
  87 + },
112 areaStyle: { 88 areaStyle: {
113 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ 89 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
114 { 90 {
@@ -129,29 +105,90 @@ export default { @@ -129,29 +105,90 @@ export default {
129 }) 105 })
130 const title = this.allData.polyline.title 106 const title = this.allData.polyline.title
131 const unit = this.allData.polyline.unit 107 const unit = this.allData.polyline.unit
132 - const dataOption = { 108 + const seriesData=seriesArr;
  109 + let xAxisData=timeArr;
  110 + this.optionData = {
133 title: { 111 title: {
134 text: title, 112 text: title,
135 left: 'center', 113 left: 'center',
136 - bottom: '8%'  
137 - },  
138 - xAxis: {  
139 - data: timeArr 114 + bottom: '8%',
  115 + textStyle: {
  116 + fontSize: this.titleFontSize*0.5,
  117 + color:'#ffffff'
  118 + }
  119 +
140 }, 120 },
141 - yAxis: {  
142 - name: unit 121 + tooltip: {
  122 + trigger: 'axis',
  123 + backgroundColor:'rgba(50,50,50,0.7)',
  124 + borderColor:"#333",
  125 + textStyle:{
  126 + color:"#fff",
  127 + align:'left'
  128 + }
  129 +
143 }, 130 },
144 legend: { 131 legend: {
145 - data: legendArr 132 + data: legendArr,
  133 + itemHeight:0,//图例圆圈大小设置
  134 + right: '5%',
  135 + top: '5%',
  136 + textStyle: {
  137 + color: '#ffffff',
  138 + fontsize:"12px"
  139 + }
  140 +
146 }, 141 },
147 - dataZoom: {  
148 - show: false,  
149 - startValue: this.startValue,  
150 - endValue: this.endValue 142 + grid: {
  143 + top: '15%',
  144 + left: '3%',
  145 + right: '4%',
  146 + bottom: '20%',
  147 + containLabel: true
151 }, 148 },
152 - series: seriesArr  
153 - }  
154 - this.chartInstance.setOption(dataOption) 149 + xAxis: {
  150 + type: 'category',
  151 + boundaryGap: false,
  152 + data: xAxisData,
  153 +
  154 + axisLine:{
  155 + show:false,//是否显示坐标线
  156 + },
  157 + axisTick: {
  158 + show: false //是否显示坐标刻度
  159 + },
  160 + axisLabel:{
  161 + color:'#ffffff',
  162 + },
  163 +
  164 + },
  165 + yAxis: {
  166 + type: 'value',
  167 + name:unit,
  168 + nameTextStyle:{
  169 + color:'#ffffff',
  170 + padding:[0,0,0,-20]
  171 + },
  172 + axisLabel: {
  173 + color:'#ffffff',
  174 + // formatter: '{value} %'//以百分比显示
  175 + },
  176 + axisLine:{
  177 + show:true,//是否显示坐标线
  178 + },
  179 + splitLine:{
  180 + lineStyle: {
  181 + color:'#0a1b31'
  182 + }
  183 + }
  184 +
  185 + },
  186 + series: seriesData
  187 + };
  188 +
  189 +
  190 +
  191 +
155 }, 192 },
156 screenAdapter () { 193 screenAdapter () {
157 this.titleFontSize = document.getElementById('documentcpu_ref').offsetWidth / 100 * 3.6 194 this.titleFontSize = document.getElementById('documentcpu_ref').offsetWidth / 100 * 3.6
@@ -179,8 +216,7 @@ export default { @@ -179,8 +216,7 @@ export default {
179 } 216 }
180 } 217 }
181 } 218 }
182 - this.chartInstance.setOption(adapterOption)  
183 - this.chartInstance.resize() 219 +
184 }, 220 },
185 startInterval () { 221 startInterval () {
186 if (this.timerId) { 222 if (this.timerId) {
  1 +<div class="monitoring-bar" id="mon-bar">
  2 + <img :style="comtitleImgStyle" src="/vue3/src/assets/images/digitalDp/title-monitoring.png" alt="">
  3 + <BarChart :optionData="optionData" v-if="optionData"></BarChart>
  4 +</div>
  1 +export default {
  2 + name: 'monitoring',
  3 + template: '',
  4 + components: {
  5 + 'BarChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/barChart/index')
  7 + )
  8 + },
  9 + data(){
  10 + return {
  11 + domainName:sessionStorage.getItem('domainName'),
  12 + apiUrl:'/api-web/bigScreen/thirtyDayMonitor?kipId=KPI63C5B2E5',
  13 + declareLineData:'',
  14 + ySeriesCommon:[],
  15 + legendData:[],
  16 + ySeriesCommonData:[],
  17 + titleFontSize: 30,
  18 + optionData:''
  19 +
  20 + }
  21 + },
  22 + computed: {
  23 + comtitleImgStyle () {
  24 + return {
  25 + height: this.titleFontSize * 2.1 + 'px'
  26 + }
  27 + }
  28 +
  29 + },
  30 + setup(props, {attrs, slots, emit}) {
  31 + const {proxy} = Vue.getCurrentInstance();
  32 +
  33 + // 挂载完
  34 + Vue.onMounted(() => {
  35 + proxy.screenAdapter();
  36 + $.get(proxy.domainName +proxy.apiUrl,function (res) {
  37 + const data = res;
  38 + if (data && data.data) {
  39 + let monitoringBarData=data.data;
  40 + let legendData=[];
  41 + $.each(monitoringBarData,function (i,v){
  42 + proxy.ySeriesCommonData.unshift(v.value)
  43 + legendData.push(i+1)
  44 + })
  45 + proxy.legendData=legendData
  46 + }
  47 + // proxy.ySeriesCommon=
  48 + proxy.optionInti()
  49 + })
  50 +
  51 + })
  52 + const optionInti=()=>{
  53 + proxy.optionData = {
  54 + title: {
  55 + text: '',
  56 +
  57 + },
  58 + grid: {
  59 + top:'4%',
  60 + left: '3%',
  61 + right: '4%',
  62 + // bottom:'0',
  63 + // bottom: '8%',
  64 + containLabel: true,
  65 + },
  66 + xAxis: {
  67 + type: 'category',
  68 + data: props.legendData,
  69 + axisLine:{
  70 + show:true,//是否显示坐标线
  71 + lineStyle: {
  72 + color:'#0a1b31'//坐标线颜色
  73 + }
  74 + },
  75 + axisTick: {
  76 + show: false //是否显示坐标刻度
  77 + },
  78 + axisLabel:{
  79 + color:'#ffffff',
  80 + fontSize: 12
  81 + },
  82 + },
  83 + yAxis: {
  84 + type: 'value',
  85 + splitLine:{
  86 + show:false,
  87 +
  88 + },
  89 + axisLine:{
  90 + show:true,//是否显示坐标线
  91 + lineStyle: {
  92 + color:'#0a1b31'//坐标线颜色
  93 + }
  94 + },
  95 + axisLabel:{
  96 + color:'#ffffff',
  97 + fontSize:12,
  98 + formatter:function (value,index){
  99 + if(value>=10000 &&value<10000000){
  100 + value=value/10000 +"万";
  101 + }else if(value>=10000000){
  102 + value=value/10000000+"千万";
  103 + }
  104 + return value;
  105 + }
  106 + }
  107 + },
  108 + series: [
  109 + {
  110 + data: proxy.ySeriesCommonData,
  111 + type: 'bar',
  112 + showBackground: true,
  113 + backgroundStyle: {
  114 + color: 'rgba(180, 180, 180, 0.1)'
  115 + },
  116 + barWidth:8,
  117 + itemStyle:{
  118 + normal:{
  119 + barBorderRadius: [3,3,0,0],
  120 + color:new echarts.graphic.LinearGradient(
  121 + 0,0,0,1,
  122 + [
  123 + {offset:0,color:'#3ac9fb'},
  124 + {offset:1,color:'#2a81f3'}
  125 + ]
  126 + )
  127 + // color:"#ff0000"
  128 + }
  129 + }
  130 + }
  131 + ]
  132 + };
  133 + }
  134 + const screenAdapter=()=>{
  135 + proxy.titleFontSize = document.getElementById('mon-bar').offsetWidth / 100 * 3.6
  136 + }
  137 +
  138 +
  139 + return{
  140 + optionInti,
  141 + screenAdapter
  142 + }
  143 + }
  144 +}
1 -<div class="com-container">  
2 - <div class="com-chart" id="responsemonitor_ref"></div> 1 +<div class="com-container" id="responsemonitor_ref">
  2 + <div class="cpu-dropdown">
  3 + <el-dropdown @command="handleCommand" >
  4 + <span class="el-dropdown-link">
  5 + 请选择
  6 + <i class="icon-arrow"></i>
  7 + </span>
  8 + <template #dropdown>
  9 + <el-dropdown-menu>
  10 + <el-dropdown-item command="max">最大值</el-dropdown-item>
  11 + <el-dropdown-item command="ave">平均值</el-dropdown-item>
  12 + <el-dropdown-item command="min">最小值</el-dropdown-item>
  13 +
  14 + </el-dropdown-menu>
  15 + </template>
  16 + </el-dropdown>
  17 + </div>
  18 +<!-- <div class="com-chart" id="responsemonitor_ref"></div>-->
  19 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
  20 +
3 </div> 21 </div>
1 export default { 1 export default {
2 name: 'ResponseMonitor', 2 name: 'ResponseMonitor',
3 template: '', 3 template: '',
4 - components: {}, 4 + components: {
  5 + 'LineChart': Vue.defineAsyncComponent(
  6 + () => myImport('views/zjdaping/components/lineChart/index')
  7 + )
  8 + },
5 data () { 9 data () {
6 return { 10 return {
7 - chartInstance: null, 11 + optionData:'',
  12 + titleFontSize:'30',
8 allData: { 13 allData: {
9 polyline: { 14 polyline: {
10 title: "系统响应请求数监控", 15 title: "系统响应请求数监控",
@@ -35,7 +40,7 @@ export default { @@ -35,7 +40,7 @@ export default {
35 }, 40 },
36 methods: { 41 methods: {
37 initChart () { 42 initChart () {
38 - this.chartInstance = echarts.init(document.getElementById('responsemonitor_ref')) 43 + /* this.chartInstance = echarts.init(document.getElementById('responsemonitor_ref'))
39 const initOption = { 44 const initOption = {
40 grid: { 45 grid: {
41 top: '15%', 46 top: '15%',
@@ -69,7 +74,7 @@ export default { @@ -69,7 +74,7 @@ export default {
69 } 74 }
70 } 75 }
71 } 76 }
72 - this.chartInstance.setOption(initOption) 77 + this.chartInstance.setOption(initOption)*/
73 }, 78 },
74 async getData () { 79 async getData () {
75 // await this.$http.get() 80 // await this.$http.get()
@@ -85,6 +90,7 @@ export default { @@ -85,6 +90,7 @@ export default {
85 'rgba(11, 168, 44, 0.5)', 90 'rgba(11, 168, 44, 0.5)',
86 'rgba(44, 110, 255, 0.5)', 91 'rgba(44, 110, 255, 0.5)',
87 'rgba(22, 242, 217, 0.5)', 92 'rgba(22, 242, 217, 0.5)',
  93 + 'rgba(35, 255, 255, 0.5)',
88 'rgba(254, 33, 30, 0.5)', 94 'rgba(254, 33, 30, 0.5)',
89 'rgba(250, 105, 0, 0.5)' 95 'rgba(250, 105, 0, 0.5)'
90 ] 96 ]
@@ -93,6 +99,7 @@ export default { @@ -93,6 +99,7 @@ export default {
93 'rgba(11, 168, 44, 0)', 99 'rgba(11, 168, 44, 0)',
94 'rgba(44, 110, 255, 0)', 100 'rgba(44, 110, 255, 0)',
95 'rgba(22, 242, 217, 0)', 101 'rgba(22, 242, 217, 0)',
  102 + 'rgba(35, 255, 255, 0)',
96 'rgba(254, 33, 30, 0)', 103 'rgba(254, 33, 30, 0)',
97 'rgba(250, 105, 0, 0)' 104 'rgba(250, 105, 0, 0)'
98 ] 105 ]
@@ -101,52 +108,102 @@ export default { @@ -101,52 +108,102 @@ export default {
101 const seriesName = this.allData.polyline.data.name 108 const seriesName = this.allData.polyline.data.name
102 console.log(seriesName) 109 console.log(seriesName)
103 // 图例的数据 110 // 图例的数据
104 - const legendArr = this.allData.polyline.data.data.map(item => {  
105 - return item.name  
106 - }) 111 + // const legendArr = this.allData.polyline.data.map(item => {
  112 + // return item.name
  113 + // })
  114 + const legendArr=[];
  115 + legendArr.push(seriesName);
107 const title = this.allData.polyline.title 116 const title = this.allData.polyline.title
108 - // const unit = this.allData.polyline.unit  
109 - const dataOption = { 117 +
  118 +
  119 + this.optionData = {
110 title: { 120 title: {
111 text: title, 121 text: title,
112 left: '10%', 122 left: '10%',
113 textStyle: { 123 textStyle: {
114 - color: '#F1F2F5' 124 + fontSize: this.titleFontSize*0.5,
  125 + color:'#ffffff'
115 } 126 }
116 }, 127 },
117 - xAxis: {  
118 - data: timeArr 128 + tooltip: {
  129 + trigger: 'axis',
  130 + backgroundColor:'rgba(50,50,50,0.7)',
  131 + borderColor:"#333",
  132 + textStyle:{
  133 + color:"#fff",
  134 + align:'left'
  135 + }
  136 +
119 }, 137 },
120 legend: { 138 legend: {
121 - data: legendArr 139 + data: legendArr,
  140 + itemHeight:0,//图例圆圈大小设置
  141 + top:'10%',
  142 + right:'20%',
  143 + textStyle: {
  144 + color: '#ffffff',
  145 + fontsize:"12px"
  146 + }
  147 +
122 }, 148 },
123 - dataZoom: {  
124 - show: false,  
125 - startValue: this.startValue,  
126 - endValue: this.endValue 149 + grid: {
  150 + left: '3%',
  151 + right: '4%',
  152 + bottom: '3%',
  153 + containLabel: true,
127 }, 154 },
128 - series: [  
129 - {  
130 - name: seriesName,  
131 - type: 'line',  
132 - data: seriesData,  
133 - smooth: true,  
134 - areaStyle: {  
135 - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  
136 - {  
137 - offset: 0,  
138 - color: colorArr1[2]  
139 - }, // %0的颜色值  
140 - {  
141 - offset: 1,  
142 - color: colorArr2[2]  
143 - } // 100%的颜色值  
144 - ]) 155 + xAxis: {
  156 + type: 'category',
  157 + boundaryGap: false,
  158 + data: timeArr,
  159 +
  160 + axisLine:{
  161 + show:false,//是否显示坐标线
  162 + },
  163 + axisTick: {
  164 + show: false //是否显示坐标刻度
  165 + },
  166 + axisLabel:{
  167 + color:'#ffffff',
  168 + },
  169 +
  170 + },
  171 + yAxis: {
  172 + axisLabel: {
  173 + color:'#ffffff',
  174 + },
  175 + splitLine:{
  176 + lineStyle: {
  177 + color:'#0a1b31'
145 } 178 }
  179 + },
  180 +
  181 + },
  182 + series: {
  183 + name: seriesName,
  184 + type: 'line',
  185 + data: seriesData,
  186 + smooth: true,
  187 + showSymbol:false,
  188 + color:colorArr1[1],
  189 + areaStyle: {
  190 + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  191 + {
  192 + offset: 0,
  193 + color: colorArr1[1]
  194 + }, // %0的颜色值
  195 + {
  196 + offset: 1,
  197 + color: colorArr2[1]
  198 + } // 100%的颜色值
  199 + ])
146 } 200 }
147 - ]  
148 - }  
149 - this.chartInstance.setOption(dataOption) 201 + },
  202 + itemStyle:{
  203 + showSymbol:false
  204 + }
  205 + };
  206 +
150 }, 207 },
151 screenAdapter () { 208 screenAdapter () {
152 this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6 209 this.titleFontSize = document.getElementById('responsemonitor_ref').offsetWidth / 100 * 3.6
@@ -165,8 +222,7 @@ export default { @@ -165,8 +222,7 @@ export default {
165 } 222 }
166 } 223 }
167 } 224 }
168 - this.chartInstance.setOption(adapterOption)  
169 - this.chartInstance.resize() 225 +
170 }, 226 },
171 startInterval () { 227 startInterval () {
172 if (this.timerId) { 228 if (this.timerId) {
1 <div class="com-container"> 1 <div class="com-container">
2 <div class="com-chart" id="topfive_ref"></div> 2 <div class="com-chart" id="topfive_ref"></div>
3 <div class="topfive-box-title"> 3 <div class="topfive-box-title">
4 - <img :style="comtitleImgStyle" src="./src/assets/img/box_title_bykk_zj_1.png" class="topfive-title-img"> <!-- bor1_6 -->  
5 - <span :style="comtitleTextStyle" class="topfive-title-size">涉税文书TOP5业务量</span> 4 + <img :style="comtitleImgStyle" src="./src/assets/images/digitalDp/title-topfive.png" class="topfive-title-img"> <!-- bor1_6 -->
  5 +<!-- <span :style="comtitleTextStyle" class="topfive-title-size">涉税文书TOP5业务量</span>-->
6 </div> 6 </div>
7 </div> 7 </div>
@@ -70,14 +70,22 @@ export default { @@ -70,14 +70,22 @@ export default {
70 show: false 70 show: false
71 } 71 }
72 }, 72 },
73 - yAxis: {  
74 - type: 'category',  
75 - axisLabel: {  
76 - textStyle: {  
77 - color: '#E2E1E6'  
78 - }  
79 - }  
80 - }, 73 + yAxis:
  74 + {
  75 + type: 'category',
  76 + axisLabel: {
  77 + textStyle: {
  78 + color: '#E2E1E6'
  79 + }
  80 + },
  81 + axisLine:{
  82 + show:false,//是否显示坐标线
  83 + },
  84 + axisTick: {
  85 + show: false //是否显示坐标刻度
  86 + },
  87 + },
  88 +
81 series: [ 89 series: [
82 { 90 {
83 type: 'bar', 91 type: 'bar',
@@ -88,10 +96,18 @@ export default { @@ -88,10 +96,18 @@ export default {
88 label: { 96 label: {
89 show: true, 97 show: true,
90 position: 'right', 98 position: 'right',
91 - testStyle: {  
92 - color: 'white'  
93 - } 99 +
  100 + textStyle: {
  101 + color: 'rgba(0,0,0,0)'
  102 + },
  103 + height:26,
  104 + width: 26,
  105 + offset:[-10,0],
  106 + backgroundColor: {
  107 + image: '/vue3/src/assets/images/digitalDp/pro-bg.png'
  108 + },
94 }, 109 },
  110 +
95 itemStyle: { 111 itemStyle: {
96 // 颜色渐变 指明渐变方向，指明不同百分比之下颜色的值 LinearGradient(x1, y1, x2, y2, []) 112 // 颜色渐变 指明渐变方向，指明不同百分比之下颜色的值 LinearGradient(x1, y1, x2, y2, [])
97 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ 113 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
@@ -139,9 +155,24 @@ export default { @@ -139,9 +155,24 @@ export default {
139 return item.value 155 return item.value
140 }) 156 })
141 const dataOption = { 157 const dataOption = {
142 - yAxis: { 158 + yAxis: [{
143 data: sellerNames 159 data: sellerNames
144 }, 160 },
  161 + {
  162 + data:sellerValues,
  163 + axisLine:{
  164 + show:false,//是否显示坐标线
  165 + },
  166 + axisTick: {
  167 + show: false //是否显示坐标刻度
  168 + },
  169 + axisLabel: {
  170 + textStyle: {
  171 + color: '#ffffff'
  172 + }
  173 + },
  174 + }
  175 + ],
145 series: [ 176 series: [
146 { 177 {
147 data: sellerValues 178 data: sellerValues
@@ -45,6 +45,7 @@ @@ -45,6 +45,7 @@
45 </div> 45 </div>
46 <div class="middle-right"> 46 <div class="middle-right">
47 <div class="declare-top"> 47 <div class="declare-top">
  48 + <!--本月应申报-->
48 <DeclareReport></DeclareReport> 49 <DeclareReport></DeclareReport>
49 </div> 50 </div>
50 <div class="deduction-bottom"> 51 <div class="deduction-bottom">
@@ -56,9 +57,10 @@ @@ -56,9 +57,10 @@
56 </section> 57 </section>
57 58
58 <section class="screen-right"> 59 <section class="screen-right">
59 - <!--<div id="right-top">  
60 -  
61 - </div>--> 60 + <div id="right-top">
  61 + <!--访问监控 柱状图-->
  62 + <Monitoring></Monitoring>
  63 + </div>
62 <div id="right-center"> 64 <div id="right-center">
63 <!-- 业务可用性 折线 --> 65 <!-- 业务可用性 折线 -->
64 <Availability></Availability> 66 <Availability></Availability>
@@ -26,6 +26,9 @@ export default { @@ -26,6 +26,9 @@ export default {
26 'DeclareLine': Vue.defineAsyncComponent( 26 'DeclareLine': Vue.defineAsyncComponent(
27 () => myImport('views/zjdaping/components/declareLine/index') 27 () => myImport('views/zjdaping/components/declareLine/index')
28 ), 28 ),
  29 + 'Monitoring': Vue.defineAsyncComponent(
  30 + () => myImport('views/dp/components/monitoring/index')
  31 + ),
29 'DeclareReport': Vue.defineAsyncComponent( 32 'DeclareReport': Vue.defineAsyncComponent(
30 () => myImport('views/dp/components/declareReport/index') 33 () => myImport('views/dp/components/declareReport/index')
31 ), 34 ),
1 -<div id="bar-echart" style="width:100%;height:290px;"></div> 1 +<div id="bar-echart" style="width:100%;height:100%;"></div>
1 export default { 1 export default {
2 name: 'barChart', 2 name: 'barChart',
3 template: '', 3 template: '',
4 - props:['yAxisData','seriesData','legendData','chartId'], 4 + props:['optionData'],
5 components: { 5 components: {
6 }, 6 },
7 data(){ 7 data(){
@@ -17,8 +17,8 @@ export default { @@ -17,8 +17,8 @@ export default {
17 Vue.onMounted(() => { 17 Vue.onMounted(() => {
18 const chartDom=proxy.$el 18 const chartDom=proxy.$el
19 const myChart = echarts.init(chartDom); 19 const myChart = echarts.init(chartDom);
20 - let option;  
21 - option = { 20 + let option=props.optionData;
  21 + /*option = {
22 title: { 22 title: {
23 text: '近30天访问量', 23 text: '近30天访问量',
24 x:'center', 24 x:'center',
@@ -71,9 +71,15 @@ export default { @@ -71,9 +71,15 @@ export default {
71 } 71 }
72 }, 72 },
73 series: props.seriesData 73 series: props.seriesData
74 - }; 74 + };*/
75 75
  76 +
  77 + window.addEventListener('resize', function () {
  78 +
  79 + myChart.resize();
  80 + });
76 option && myChart.setOption(option); 81 option && myChart.setOption(option);
  82 +
77 }) 83 })
78 return{ 84 return{
79 85
1 <div class="declare-lineChart"> 1 <div class="declare-lineChart">
2 - <LineChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :legendData="legendData" :chartId="chartId" v-if="ySeriesCommon.length"></LineChart> 2 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
3 </div> 3 </div>
@@ -15,6 +15,7 @@ export default { @@ -15,6 +15,7 @@ export default {
15 yAxisCommon:[], 15 yAxisCommon:[],
16 ySeriesCommon:[], 16 ySeriesCommon:[],
17 legendData:[], 17 legendData:[],
  18 + optionData:'',
18 colorData:["#97d5f4",'#efe0a7','#e5abd1'], 19 colorData:["#97d5f4",'#efe0a7','#e5abd1'],
19 chartId:'line-echart-declare' 20 chartId:'line-echart-declare'
20 } 21 }
@@ -66,79 +67,85 @@ export default { @@ -66,79 +67,85 @@ export default {
66 }) 67 })
67 proxy.ySeriesCommon=ySeriesCommon; 68 proxy.ySeriesCommon=ySeriesCommon;
68 proxy.legendData=legendData; 69 proxy.legendData=legendData;
  70 + proxy.optionInit();
69 } 71 }
70 }) 72 })
71 73
72 - //一般y序列  
73 - proxy.yAxisCommon={  
74 - type: 'value',  
75 - splitLine:{  
76 - lineStyle: {  
77 - color:'#0a1b31'  
78 - }  
79 - },  
80 - axisLabel:{  
81 - color:'#ffffff',  
82 - },  
83 - }  
84 - //一般y轴数据  
85 - /* proxy.ySeriesCommon=[  
86 - {  
87 - name: '网络投票',  
88 - type: 'line',  
89 - smooth:true,  
90 - stack: 'Total',  
91 - data: [120, 132, 101, 134, 90, 230, 210],  
92 - yAxisIndex:0,  
93 - showSymbol:false,  
94 - itemStyle : {  
95 - normal : {  
96 - color:"#97d5f4",//tooltip里的小圆点颜色  
97 - lineStyle:{  
98 - color:'#97d5f4'  
99 - }  
100 - }  
101 - },  
102 - },  
103 - {  
104 - name: '涉税文书',  
105 - type: 'line',  
106 - smooth:true,  
107 - stack: 'Total',  
108 - data: [220, 182, 191, 234, 290, 330, 310],  
109 - showSymbol:false,  
110 - yAxisIndex:0,  
111 - itemStyle : {  
112 - color:"#ffffff",  
113 - normal : {  
114 - color:'#efe0a7',  
115 - lineStyle:{  
116 - color:'#efe0a7'  
117 - }  
118 - }  
119 - },  
120 - },  
121 - {  
122 - name: '网上申报',  
123 - type: 'line',  
124 - smooth:true,  
125 - stack: 'Total',  
126 - data: [150, 232, 201, 154, 190, 330, 410],  
127 - yAxisIndex:0,  
128 - showSymbol:false,  
129 - itemStyle : {  
130 - normal : {  
131 - color:'#e5abd1',  
132 - lineStyle:{  
133 - color:'#e5abd1'  
134 - }  
135 - }  
136 - },  
137 - },  
138 - ]*/ 74 +
139 }) 75 })
  76 + const optionInit=()=>{
  77 + console.log("3232",proxy.ySeriesCommon)
  78 + let xAxisDataLength=proxy.ySeriesCommon[0].length;
  79 + let xAxisData=[];
  80 + for(let i=1;i<=xAxisDataLength;i++){
  81 + xAxisData.push(i)
  82 + }
  83 + proxy.optionData = {
  84 + title: {
  85 + text: ''
  86 + },
  87 + tooltip: {
  88 + trigger: 'axis',
  89 + backgroundColor:'rgba(50,50,50,0.7)',
  90 + borderColor:"#333",
  91 + textStyle:{
  92 + color:"#fff",
  93 + align:'left'
  94 + }
  95 +
  96 + },
  97 + legend: {
  98 + data: proxy.legendData,
  99 + itemHeight:0,//图例圆圈大小设置
  100 + y:'7px',
  101 + textStyle: {
  102 + color: '#ffffff',
  103 + fontsize:"12px"
  104 + }
  105 +
  106 + },
  107 + grid: {
  108 + left: '3%',
  109 + right: '4%',
  110 + bottom: '3%',
  111 + containLabel: true,
  112 + },
  113 + xAxis: {
  114 + type: 'category',
  115 + boundaryGap: false,
  116 + data: xAxisData,
  117 +
  118 + axisLine:{
  119 + show:false,//是否显示坐标线
  120 + },
  121 + axisTick: {
  122 + show: false //是否显示坐标刻度
  123 + },
  124 + axisLabel:{
  125 + color:'#ffffff',
  126 + },
  127 +
  128 + },
  129 + yAxis:{
  130 + type: 'value',
  131 + splitLine:{
  132 + lineStyle: {
  133 + color:'#0a1b31'
  134 + }
  135 + },
  136 + axisLabel:{
  137 + color:'#ffffff',
  138 + },
  139 + },
  140 + series: proxy.ySeriesCommon,
  141 + itemStyle:{
  142 + showSymbol:false
  143 + }
  144 + };
  145 + }
140 146
141 return{ 147 return{
  148 + optionInit
142 } 149 }
143 } 150 }
144 } 151 }
1 -<div :id="chartId" style="width:100%;height:225px;"></div> 1 +<div :id="chartId" style="width:100%;height:100%;"></div>
1 export default { 1 export default {
2 name: 'lineChart', 2 name: 'lineChart',
3 template: '', 3 template: '',
4 - props:['yAxisData','seriesData','legendData','chartId'], 4 + // props:['yAxisData','seriesData','legendData','chartId'],
  5 + props:['optionData'],
5 components: { 6 components: {
6 }, 7 },
7 data(){ 8 data(){
@@ -21,20 +22,22 @@ export default { @@ -21,20 +22,22 @@ export default {
21 /*$.get(proxy.domainName,function(res){ 22 /*$.get(proxy.domainName,function(res){
22 23
23 })*/ 24 })*/
24 - proxy.yAxisData=props.yAxisData; 25 + /* proxy.yAxisData=props.yAxisData;
25 proxy.seriesData=props.seriesData; 26 proxy.seriesData=props.seriesData;
26 proxy.chartId=props.chartId; 27 proxy.chartId=props.chartId;
27 // const chartDom = document.getElementById('line-echart-declare'); 28 // const chartDom = document.getElementById('line-echart-declare');
  29 + console.log("**!/",proxy.seriesData)
28 let xAxisDataLength=proxy.seriesData[0].data.length; 30 let xAxisDataLength=proxy.seriesData[0].data.length;
29 let xAxisData=[]; 31 let xAxisData=[];
30 for(let i=1;i<=xAxisDataLength;i++){ 32 for(let i=1;i<=xAxisDataLength;i++){
31 xAxisData.push(i) 33 xAxisData.push(i)
32 - } 34 + }*/
33 const chartDom=proxy.$el 35 const chartDom=proxy.$el
34 const myChart = echarts.init(chartDom); 36 const myChart = echarts.init(chartDom);
35 - let option; 37 + let option=props.optionData;
  38 + console.log("testLIne0",chartDom,option)
36 39
37 - option = { 40 + /* option = {
38 title: { 41 title: {
39 text: '' 42 text: ''
40 }, 43 },
@@ -64,11 +67,11 @@ export default { @@ -64,11 +67,11 @@ export default {
64 bottom: '3%', 67 bottom: '3%',
65 containLabel: true, 68 containLabel: true,
66 }, 69 },
67 - /*toolbox: { 70 + /!*toolbox: {
68 feature: { 71 feature: {
69 saveAsImage: {} 72 saveAsImage: {}
70 } 73 }
71 - },*/ 74 + },*!/
72 xAxis: { 75 xAxis: {
73 type: 'category', 76 type: 'category',
74 boundaryGap: false, 77 boundaryGap: false,
@@ -90,7 +93,7 @@ export default { @@ -90,7 +93,7 @@ export default {
90 itemStyle:{ 93 itemStyle:{
91 showSymbol:false 94 showSymbol:false
92 } 95 }
93 - }; 96 + };*/
94 97
95 option && myChart.setOption(option); 98 option && myChart.setOption(option);
96 99
1 <div class="monitoring-bar"> 1 <div class="monitoring-bar">
2 - <BarChart :yAxisData="yAxisCommon" :seriesData="ySeriesCommon" :legendData="legendData" :chartId="chartId" v-if="ySeriesCommon.length"></BarChart> 2 + <BarChart :optionData="optionData" v-if="optionData"></BarChart>
3 </div> 3 </div>
1 export default { 1 export default {
2 - name: 'performance', 2 + name: 'monitoringMonth',
3 template: '', 3 template: '',
4 components: { 4 components: {
5 'BarChart': Vue.defineAsyncComponent( 5 'BarChart': Vue.defineAsyncComponent(
@@ -15,6 +15,7 @@ export default { @@ -15,6 +15,7 @@ export default {
15 ySeriesCommon:[], 15 ySeriesCommon:[],
16 legendData:[], 16 legendData:[],
17 ySeriesCommonData:[], 17 ySeriesCommonData:[],
  18 + optionData:''
18 19
19 } 20 }
20 }, 21 },
@@ -37,7 +38,65 @@ export default { @@ -37,7 +38,65 @@ export default {
37 }) 38 })
38 proxy.legendData=legendData 39 proxy.legendData=legendData
39 } 40 }
40 - proxy.ySeriesCommon=[ 41 + // proxy.ySeriesCommon=
  42 + proxy.optionInti()
  43 + })
  44 +
  45 + })
  46 + const optionInti=()=>{
  47 + proxy.optionData = {
  48 + title: {
  49 + text: '近30天访问量',
  50 + x:'center',
  51 + y:'7px',
  52 + textStyle:{
  53 + color:"#ffffff",
  54 + fontSize:14
  55 + }
  56 + },
  57 + xAxis: {
  58 + type: 'category',
  59 + data: props.legendData,
  60 + axisLine:{
  61 + show:true,//是否显示坐标线
  62 + lineStyle: {
  63 + color:'#0a1b31'//坐标线颜色
  64 + }
  65 + },
  66 + axisTick: {
  67 + show: false //是否显示坐标刻度
  68 + },
  69 + axisLabel:{
  70 + color:'#ffffff',
  71 + fontSize: 12
  72 + },
  73 + },
  74 + yAxis: {
  75 + type: 'value',
  76 + splitLine:{
  77 + show:false,
  78 +
  79 + },
  80 + axisLine:{
  81 + show:true,//是否显示坐标线
  82 + lineStyle: {
  83 + color:'#0a1b31'//坐标线颜色
  84 + }
  85 + },
  86 + axisLabel:{
  87 + color:'#ffffff',
  88 + fontSize:12,
  89 + formatter:function (value,index){
  90 + if(value>=10000 &&value<10000000){
  91 + value=value/10000 +"万";
  92 + }else if(value>=10000000){
  93 + value=value/10000000+"千万";
  94 + }
  95 + return value;
  96 + }
  97 + }
  98 + },
  99 + series: [
41 { 100 {
42 data: proxy.ySeriesCommonData, 101 data: proxy.ySeriesCommonData,
43 type: 'bar', 102 type: 'bar',
@@ -61,11 +120,11 @@ export default { @@ -61,11 +120,11 @@ export default {
61 } 120 }
62 } 121 }
63 ] 122 ]
64 - })  
65 -  
66 - }) 123 + };
  124 + }
67 125
68 return{ 126 return{
  127 + optionInti
69 } 128 }
70 } 129 }
71 } 130 }
@@ -4,6 +4,6 @@ @@ -4,6 +4,6 @@
4 4
5 </div> 5 </div>
6 <div class="performance-lineChart"> 6 <div class="performance-lineChart">
7 - <LineChart :yAxisData="yAxisDataPerformance" :seriesData="seriesDataPerformance" v-if="seriesDataPerformance"></LineChart> 7 + <LineChart :optionData="optionData" v-if="optionData"></LineChart>
8 </div> 8 </div>
9 </div> 9 </div>
@@ -9,10 +9,10 @@ export default { @@ -9,10 +9,10 @@ export default {
9 data(){ 9 data(){
10 return { 10 return {
11 domainName:sessionStorage.getItem('domainName'), 11 domainName:sessionStorage.getItem('domainName'),
12 - apiUrl:'/api-web/bigScreen/getMachineRoomInfoList', 12 + apiUrl:'/api-web/sxview/getBusinessAvailability',
13 resourceStatisticsData:'', 13 resourceStatisticsData:'',
14 - yAxisDataPerformance:[],  
15 - seriesDataPerformance:[] 14 + optionData:'',
  15 + ySeriesCommon:[]
16 } 16 }
17 }, 17 },
18 setup(props, {attrs, slots, emit}) { 18 setup(props, {attrs, slots, emit}) {
@@ -21,6 +21,24 @@ export default { @@ -21,6 +21,24 @@ export default {
21 21
22 // 挂载完 22 // 挂载完
23 Vue.onMounted(() => { 23 Vue.onMounted(() => {
  24 + proxy.getData();
  25 +
  26 + })
  27 + const getData=()=>{
  28 + $.get(proxy.domainName +proxy.apiUrl,function (res) {
  29 + const data = res;
  30 + if (data && data.data) {
  31 + let resData=data.data;
  32 +
  33 + }
  34 + // proxy.optionInit();
  35 +
  36 + })
  37 + proxy.optionInit();
  38 +
  39 + }
  40 + const optionInit=()=>{
  41 +
24 let data3=[350, 350, 350, 350, 350, 350, 350]; 42 let data3=[350, 350, 350, 350, 350, 350, 350];
25 let data4=[220, 182, 191, 234, 290, 330, 310]; 43 let data4=[220, 182, 191, 234, 290, 330, 310];
26 let data2=[100, 100, 100, 100, 100, 100, 100]; 44 let data2=[100, 100, 100, 100, 100, 100, 100];
@@ -30,43 +48,8 @@ export default { @@ -30,43 +48,8 @@ export default {
30 let max1=proxy.calMax([data1,data2]); 48 let max1=proxy.calMax([data1,data2]);
31 let min2=proxy.calMin([data3,data4]); 49 let min2=proxy.calMin([data3,data4]);
32 let max2=proxy.calMax([data3,data4]); 50 let max2=proxy.calMax([data3,data4]);
33 - //业务性能指标y序列  
34 - proxy.yAxisDataPerformance=[  
35 - {  
36 -  
37 - type: 'value',  
38 - axisLabel: {  
39 - formatter: '{value} %'//以百分比显示  
40 - },  
41 - splitLine:{  
42 - lineStyle: {  
43 - color:'#0a1b31'  
44 - }  
45 - },  
46 - min:0,  
47 - max:100,  
48 - splitNumber:10,  
49 - interval:(100-0)/10  
50 - }, {  
51 - name: '单位:万',  
52 - type: 'value',  
53 - axisLabel: {  
54 - show: true,  
55 - interval: 'right',//居中显示  
56 - },  
57 - splitLine:{  
58 - lineStyle: {  
59 - color:'#0a1b31'  
60 - }  
61 - },  
62 - min:min2,  
63 - max:max2,  
64 - splitNumber:10,  
65 - interval:(max2-min2)/10  
66 - },  
67 - ]  
68 //业务双y轴数据 51 //业务双y轴数据
69 - proxy.seriesDataPerformance=[ 52 + proxy.ySeriesCommon=[
70 { 53 {
71 name:'可用性', 54 name:'可用性',
72 type: 'line', 55 type: 'line',
@@ -166,7 +149,105 @@ export default { @@ -166,7 +149,105 @@ export default {
166 }, 149 },
167 } 150 }
168 ] 151 ]
169 - }) 152 + // let xAxisDataLength=proxy.ySeriesCommon[0].length;
  153 + let xAxisData=[];
  154 + for(let i=0;i<=24;i++){
  155 + if(i%4==0){
  156 + xAxisData.push(i+':00')
  157 +
  158 + }
  159 + }
  160 + let legendData=[];
  161 + $.each(proxy.ySeriesCommon,function (i,v){
  162 + legendData.push(v.name)
  163 + })
  164 + proxy.legendData=legendData;
  165 + proxy.optionData = {
  166 + title: {
  167 + text: ''
  168 + },
  169 + tooltip: {
  170 + trigger: 'axis',
  171 + backgroundColor:'rgba(50,50,50,0.7)',
  172 + borderColor:"#333",
  173 + textStyle:{
  174 + color:"#fff",
  175 + align:'left'
  176 + }
  177 +
  178 + },
  179 + legend: {
  180 + data: proxy.legendData,
  181 + itemHeight:0,//图例圆圈大小设置
  182 + y:'7px',
  183 + textStyle: {
  184 + color: '#ffffff',
  185 + fontsize:"12px"
  186 + }
  187 +
  188 + },
  189 + grid: {
  190 + left: '3%',
  191 + right: '4%',
  192 + bottom: '3%',
  193 + containLabel: true,
  194 + },
  195 + xAxis: {
  196 + type: 'category',
  197 + boundaryGap: false,
  198 + data: xAxisData,
  199 +
  200 + axisLine:{
  201 + show:false,//是否显示坐标线
  202 + },
  203 + axisTick: {
  204 + show: false //是否显示坐标刻度
  205 + },
  206 + axisLabel:{
  207 + color:'#ffffff',
  208 + },
  209 +
  210 + },
  211 + yAxis:[
  212 + {
  213 +
  214 + type: 'value',
  215 + axisLabel: {
  216 + formatter: '{value} %'//以百分比显示
  217 + },
  218 + splitLine:{
  219 + lineStyle: {
  220 + color:'#0a1b31'
  221 + }
  222 + },
  223 + min:0,
  224 + max:100,
  225 + splitNumber:10,
  226 + interval:(100-0)/10
  227 + }, {
  228 + name: '单位:万',
  229 + type: 'value',
  230 + axisLabel: {
  231 + show: true,
  232 + interval: 'right',//居中显示
  233 + },
  234 + splitLine:{
  235 + lineStyle: {
  236 + color:'#0a1b31'
  237 + }
  238 + },
  239 + min:min2,
  240 + max:max2,
  241 + splitNumber:10,
  242 + interval:(max2-min2)/10
  243 + },
  244 + ],
  245 + series: proxy.ySeriesCommon,
  246 + itemStyle:{
  247 + showSymbol:false
  248 + }
  249 + };
  250 + }
170 //计算最大值 251 //计算最大值
171 const calMax=(arr)=>{ 252 const calMax=(arr)=>{
172 let max=0; 253 let max=0;
@@ -203,7 +284,9 @@ export default { @@ -203,7 +284,9 @@ export default {
203 284
204 return{ 285 return{
205 calMax, 286 calMax,
206 - calMin 287 + calMin,
  288 + getData,
  289 + optionInit
207 } 290 }
208 } 291 }
209 } 292 }