Merge branch 'master-500-dev-lushangqing' into 'master-500-dev'

【876】柱线图增加数据视图功能，【#879】双y轴0点齐平



See merge request !92

@@ -56,6 +56,41 @@ export const monitorCustomBarLineChart = {
       },
       },
       [
       [
         {
         {
+          name: '工具栏设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '数据视图',
+              name: 'dataView',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '导出',
+              name: 'download',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-select',
+              label: '工具栏位置',
+              name: 'toolBoxOrient',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'vertical', name: '垂直'},
+                {code: 'horizontal', name: '水平'}
+              ],
+              value: 'vertical'
+            },
+          ]
+        },
+      ],
+      [
+        {
           name: '折线设置',
           name: '折线设置',
           list: [
           list: [
             {
             {

@@ -33,6 +33,12 @@ export default {
           trigger: "axis",
           trigger: "axis",
           formatter: "{a} <br/>{b} : {c} '%'"
           formatter: "{a} <br/>{b} : {c} '%'"
         },
         },
+        toolbox:{
+          show:true,
+          right:10,
+          y:5,
+          orient:'vertical',
+        },
         legend: {
         legend: {
           textStyle: {
           textStyle: {
             color: "#fff"
             color: "#fff"
@@ -133,6 +139,45 @@ export default {
         top: this.optionsStyle.top + "px",
         top: this.optionsStyle.top + "px",
         background: this.optionsSetup.background
         background: this.optionsSetup.background
       };
       };
+    },
+    //数据视图的单元格样式
+    dataViewTd(){
+      let style=`style="
+        border: 1px solid #cccccc;
+        border-bottom: none;
+        border-right:none;
+        padding:10px;
+      "`;
+      return style
+    },
+    //数据视图的表格样式
+    dataViewTable(){
+      let style=`style="
+      width:100%;
+      border-bottom: 1px solid #ccc;
+      border-right:1px solid #ccc;
+      "`;
+      return style;
+    },
+    //数据视图的表头样式
+    dataViewThead(){
+      let style=`style="
+          background:#f1f6f9;
+          border: 1px solid #cccccc;
+          border-bottom: none;
+          border-right:none;
+          padding:10px;
+      "`;
+      return style;
+    },
+    //数据视图的表格表体样式
+    dataViewTbody(){
+      let style=`style="
+          height:`+(this.optionsStyle.height-130) + "px"+`;
+          overflow:auto;
+      "`;
+      return style;
+
     }
     }
   },
   },
   watch: {
   watch: {
@@ -216,6 +261,14 @@ export default {
     this.optionsCollapse = this.value.collapse;
     this.optionsCollapse = this.value.collapse;
     this.optionsSetup = this.value.setup;
     this.optionsSetup = this.value.setup;
     this.editorOptions();
     this.editorOptions();
+    window.addEventListener("scroll", function (e){
+      if($(".dataViewTable thead")){
+        $(".dataViewTable").parent().unbind('scroll').scroll(function (){
+          $(this).find(".dataViewTable thead").css('transform','translate(0,'+e.target.scrollTop +'px)')
+        })
+      }
+    }, true); //数据视图的监听滚动事件
+
   },
   },
   methods: {
   methods: {
     // 修改图标options属性
     // 修改图标options属性
@@ -230,6 +283,7 @@ export default {
       this.setOptionsMargin();
       this.setOptionsMargin();
       this.setOptionsLegend();
       this.setOptionsLegend();
       this.setOptionsColor();
       this.setOptionsColor();
+      this.setOptionsToolbox();
     },
     },
     // 标题修改
     // 标题修改
     setOptionsTitle() {
     setOptionsTitle() {
@@ -296,6 +350,7 @@ export default {
     },
     },
     // Y轴设置
     // Y轴设置
     setOptionsY() {
     setOptionsY() {
+      let that=this;
       const optionsSetup = this.optionsSetup;
       const optionsSetup = this.optionsSetup;
       const yAxis = [
       const yAxis = [
         {
         {
@@ -358,6 +413,38 @@ export default {
       ];
       ];
       this.options.yAxis = yAxis;
       this.options.yAxis = yAxis;
     },
     },
+    //计算最大值
+    calMax(arr){
+      let max=0;
+      arr.forEach((el)=>{
+        el.forEach((el1)=>{
+          if(!(el1 === undefined || el1 === '')){
+            if(max<el1){
+              max=el1;
+            }
+          }
+        })
+      })
+      let maxint=Math.ceil(max/9.5);
+      let maxval=maxint * 10;//让显示的刻度是整数
+      return maxval;
+    },
+    //计算最小值
+    calMin(arr){
+      let min=0;
+      arr.forEach((el)=>{
+        el.forEach((el1)=>{
+          if(!(el1 === undefined || el1 === '')){
+            if(min>el1){
+              min=el1;
+            }
+          }
+        })
+      })
+      let minint=Math.floor(min/10);
+      let minval=minint * 10;//让显示的刻度是整数
+      return minval;
+    },
     // 折线设置 数值设置
     // 折线设置 数值设置
     setOptionsTop() {
     setOptionsTop() {
       const optionsSetup = this.optionsSetup;
       const optionsSetup = this.optionsSetup;
@@ -525,6 +612,45 @@ export default {
       this.options.color = arrColor;
       this.options.color = arrColor;
       this.options = Object.assign({}, this.options);
       this.options = Object.assign({}, this.options);
     },
     },
+    //数据视图导出
+    handleExport(){
+      console.log("+++++")
+    },
+    //设置数据视图
+    setOptionsToolbox(){
+      let that=this;
+      const optionsSetup = this.optionsSetup;
+      const dataView=this.optionsSetup.dataView;
+      this.options.toolbox.show=(dataView==undefined || dataView=='undefined')?true:dataView;
+      this.options.toolbox.toolBoxOrient=this.optionsSetup.toolBoxOrient?this.optionsSetup.toolBoxOrient:'vertical';
+      this.options.toolbox.feature= {
+        dataView: {
+          show: true, title: '数据视图', readOnly: true, optionToContent: function (opt) {
+            let series = opt.series;
+            let str='';
+            if(that.optionsSetup.download){
+              str+=`<div style="position: absolute;right: 10px;top: 6px;color:#1e9fff;cursor: pointer;">
+              <span id="handleButton" >导出</span>
+            </div>`;
+            }
+            let table =str+ '<table '+that.dataViewTable+'  class="dataViewTable"><thead><tr class="dataViewTr">';
+            for(let i=0;i<series.length;i++){
+              table+='<td '+that.dataViewThead+' class="dataViewHead">' + (series[i].name?series[i].name:'') + '</td>';
+            }
+            table+= '</thead></tr><tbody '+that.dataViewTbody+'>';
+            for(let j=0;j<series[0].data.length;j++){
+              table += '<tr class="dataViewTr">';
+                for(let i=0;i<series.length;i++){
+                  table +='<td '+that.dataViewTd+'  class="dataViewTd">' + series[i].data[j] + '</td>'
+                }
+              table += '</tr>';
+            }
+            table += '</tbody></table>';
+            return table;
+          }
+        }
+      }
+    },
     // 数据处理
     // 数据处理
     setOptionsData() {
     setOptionsData() {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -644,6 +770,18 @@ export default {
         })
         })
       }
       }
       this.options.series=series;
       this.options.series=series;
+      let arr=[];
+      this.options.series.map(item=>{
+        arr.push(item.data)
+      })
+      let min=this.calMin(arr);
+      let max=this.calMax(arr);
+      if(min<0){
+        this.options.yAxis[1].min=-20;
+      }
+      // this.options.yAxis[0].max=max;
+      // this.options.yAxis[0].min=min;
+      // this.options.yAxis[0].interval=(max-min)/7
      /* if(this.chartData.indexOf(this.optionsData.dynamicData.contextData.flag)!=-1){
      /* if(this.chartData.indexOf(this.optionsData.dynamicData.contextData.flag)!=-1){
         this.isDisplay=true;
         this.isDisplay=true;
       }else{
       }else{