Authored by 鲁尚清

柱线图数据月/季/年切换,容量趋势图从零刻度开始

@@ -152,7 +152,6 @@ export default { @@ -152,7 +152,6 @@ export default {
152 let xAxisList = []; 152 let xAxisList = [];
153 let series = []; 153 let series = [];
154 let kpiUnit=''; 154 let kpiUnit='';
155 - console.log("*****",data)  
156 if(data && data[0] ){ 155 if(data && data[0] ){
157 if(data[0].data){ 156 if(data[0].data){
158 if(data[0].data.names && data[0].data.names.length>0){ 157 if(data[0].data.names && data[0].data.names.length>0){
@@ -96,7 +96,7 @@ @@ -96,7 +96,7 @@
96 optionsPosition: {}, 96 optionsPosition: {},
97 optionsData: {}, 97 optionsData: {},
98 informationData: [{name:'',code:''}], 98 informationData: [{name:'',code:''}],
99 - informationDataAll: [], 99 + informationDataAll: [{display:1}],
100 dataLength:0, 100 dataLength:0,
101 tableDate: [], 101 tableDate: [],
102 pressingVisible: false, 102 pressingVisible: false,
@@ -16,6 +16,7 @@ export default { @@ -16,6 +16,7 @@ export default {
16 }, 16 },
17 data() { 17 data() {
18 return { 18 return {
  19 + kpiUnit:'',
19 options: { 20 options: {
20 color: [], 21 color: [],
21 grid: {}, 22 grid: {},
@@ -27,7 +28,7 @@ export default { @@ -27,7 +28,7 @@ export default {
27 }, 28 },
28 tooltip: { 29 tooltip: {
29 trigger: "axis", 30 trigger: "axis",
30 - formatter: "{a} <br/>{b} : {c}%" 31 + formatter: "{a} <br/>{b} : {c} '%'"
31 }, 32 },
32 legend: { 33 legend: {
33 textStyle: { 34 textStyle: {
@@ -140,7 +141,7 @@ export default { @@ -140,7 +141,7 @@ export default {
140 let optionsData=this.optionsData; 141 let optionsData=this.optionsData;
141 if(this.optionsData.dataType=="dynamicData"){ 142 if(this.optionsData.dataType=="dynamicData"){
142 //改变参数值-月季度年,重新加载动态数据--待测 143 //改变参数值-月季度年,重新加载动态数据--待测
143 - this.optionsData.dynamicData.contextData.btnCode=val; 144 + this.optionsData.dynamicData.contextData.time=val;
144 this.editorOptions(); 145 this.editorOptions();
145 } 146 }
146 } 147 }
@@ -224,7 +225,8 @@ export default { @@ -224,7 +225,8 @@ export default {
224 lineStyle: { 225 lineStyle: {
225 color: optionsSetup.splitLineColorX 226 color: optionsSetup.splitLineColorX
226 } 227 }
227 - } 228 + },
  229 + boundaryGap:['1','2']//坐标轴两边留白,为false则从0开始
228 }; 230 };
229 this.options.xAxis = xAxis; 231 this.options.xAxis = xAxis;
230 }, 232 },
@@ -348,12 +350,43 @@ export default { @@ -348,12 +350,43 @@ export default {
348 // tooltip 设置 350 // tooltip 设置
349 setOptionsTooltip() { 351 setOptionsTooltip() {
350 const optionsSetup = this.optionsSetup; 352 const optionsSetup = this.optionsSetup;
  353 + let that=this;
351 const tooltip = { 354 const tooltip = {
352 trigger: "axis", 355 trigger: "axis",
353 show: true, 356 show: true,
354 textStyle: { 357 textStyle: {
355 color: optionsSetup.lineColor, 358 color: optionsSetup.lineColor,
356 fontSize: optionsSetup.tipFontSize 359 fontSize: optionsSetup.tipFontSize
  360 + },
  361 + formatter:function (param) {
  362 + let kpiName=optionsSetup.titleText;
  363 + // 鼠标悬浮线上提示
  364 + // 顶部提示
  365 + let tips = '<table>';
  366 + if (param.length == 1) {
  367 + tips += "<tr><td style='text-align:left;' colspan='4'>" + param[0].name + "</td></tr>";
  368 + } else {
  369 + tips += "<tr><td style='text-align:left;' colspan='4'>" + kpiName + " " + param[0].name + "</td></tr>";
  370 + }
  371 + // 每一条提示
  372 + $.each(param, function (i, v) {
  373 + let kpiUnit='';
  374 + tips += "<tr><td>" + v.marker + "</td>";
  375 + tips += '<td style="text-align: left;">';
  376 + if (v.seriesName.indexOf('率') != -1) {
  377 + kpiUnit='%';
  378 + }else{
  379 + kpiUnit=that.kpiUnit
  380 + }
  381 + tips += (v.seriesName + ' ');
  382 +
  383 + // tips += (v.seriesName && v.seriesName != '1' && !/series[0-9]+/.test(v.seriesName)) ? v.seriesName : '';
  384 + tips += '</td>'
  385 + tips += "<td>:&nbsp;</td><td>" + v.value;
  386 + tips += kpiUnit + "</td></tr>";
  387 + });
  388 + tips += '</table>'
  389 + return tips;
357 } 390 }
358 }; 391 };
359 this.options.tooltip = tooltip; 392 this.options.tooltip = tooltip;
@@ -474,11 +507,19 @@ export default { @@ -474,11 +507,19 @@ export default {
474 const series = val.series; 507 const series = val.series;
475 if(series && series.length>0){ 508 if(series && series.length>0){
476 series.map((item,index)=>{ 509 series.map((item,index)=>{
477 - if(index%2==0){  
478 - item.yAxisIndex= 1;  
479 - }else{ 510 + console.log("series",item)
  511 + if(item.name.indexOf('率')!=-1){
  512 + item.yAxisIndex= 1;
  513 +
  514 + }else{
480 item.yAxisIndex=0; 515 item.yAxisIndex=0;
  516 +
481 } 517 }
  518 + // if(index%2==0){
  519 + // item.yAxisIndex= 1;
  520 + // }else{
  521 + // item.yAxisIndex=0;
  522 + // }
482 if(item.type=='bar'){ 523 if(item.type=='bar'){
483 item.itemStyle= { 524 item.itemStyle= {
484 barBorderRadius: null 525 barBorderRadius: null
@@ -185,14 +185,15 @@ export default { @@ -185,14 +185,15 @@ export default {
185 color: optionsSetup.splitLineColorX 185 color: optionsSetup.splitLineColorX
186 } 186 }
187 }, 187 },
188 - boundaryGap: ['10%', '10%'], 188 + // boundaryGap: ['10%', '10%'],
  189 + boundaryGap:false,
189 splitArea: { 190 splitArea: {
190 show: optionsSetup.splitArea, 191 show: optionsSetup.splitArea,
191 areaStyle: { 192 areaStyle: {
192 color: [optionsSetup.splitAreaColor, 'transparent' 193 color: [optionsSetup.splitAreaColor, 'transparent'
193 ] 194 ]
194 } 195 }
195 - } 196 + },
196 }; 197 };
197 this.options.xAxis = xAxis; 198 this.options.xAxis = xAxis;
198 }, 199 },