决策报表 单元格联动echarts,无数据时报错,图为上一个有数据的图

image.pngimage.png

var titleText;

if (window.FR) {

  titleText = window.FR && window.FR.remoteEvaluate("$zd");

}; 

/*try

{var nf = FR.remoteEvaluate('$nf');}

catch(err){}//试用于决策报表控件*/

var TABLE_DATA = getData('data1');

var seriesNames = ['最高','最低']; // 获取系列名

var columnValues = TABLE_DATA.slice(1);

var categoryNames = columnValues.map(function(value){

return value[0];

}); // 获取分类名

var data = columnValues.map(function(value){

return value[1];

}); // 获取分类名

var max = data.reduce((total,value,index,array)=>total>value?total:value);

for (var i = 0,dataShadow = []; i < columnValues.length; i++) {

    dataShadow.push(0.5);

};  //将最大值存入空数组形成阴影

option = {

    grid: {   //图表位置

        left:'5%',

        top:'10%',

        width:"92%", // 宽度

        height:"83%"// 高度

    }, 

   /* legend: {

   //  icon: "emptyCircle",  

         itemGap: 20,

         x:'right', 

         y:'top',   

        data:[{

            name: seriesNames[0],

            icon: "image:///webroot/help/picture/store/icon-压力.png"

        },{

            name: seriesNames[1],

            icon: "image:///webroot/help/picture/store/icon-流量.png"

        }],

         padding:[-2,200,0,0], 

         textStyle:{

            color: '#90D3FF',

            fontSize: '28',

            fontFamily: 'regular'

        }

    },*/

    tooltip: {    //提示框

        trigger: 'axis',

        extraCssText: 'background: rgba(1,22,46,0.8);box-shadow: inset 0px 0px 40px rgba(7, 48, 89, 0.8);border-radius: 0px 0px 0px 0px;border: 2px solid #073059;',  //边框阴影

        axisPointer: {   //指示线为线

            type: 'line',

            lineStyle: {

            type: 'dashed',

            width: 1,   //设置线宽度

           color: 'rgba(10, 167, 255, 0.2)'

           }

        },

        icon: "emptyCircle",

        formatter: function(params) {

            var pc = ["",""]; 

            var aa=["

","

"];

            var tip = '&nbsp&nbsp'+params[0].name;

            return tip += '&nbsp&nbsp'+params[1].marker+'&nbsp&nbsp'+params[1].seriesName

             + ": " + params[1].value[1] + '&nbsp&nbspMpa'+'&nbsp&nbsp'+params[2].marker+'&nbsp&nbsp'+params[2].seriesName

             + ": " + params[1].value[3] + '&nbsp&nbspMpa';

        },

         textStyle:{

          /*  rich: {

          a: {height: 28},

                b: {height: 28},

                c: {height: 28}  

          },*/

          color: 'rgba(255, 255, 255, 1)',

          fontSize: '11',

          lineheight:'11',

          fontFamily: 'Arial'

        }

    },

    dataset: {source: TABLE_DATA},

    xAxis: {   

        type: 'category',

        axisLine: {"show":false},//轴线

        axisTick:{"show":false },  //刻度线

        data: categoryNames,

        axisLabel: {       //轴标签 

               show: true,

              // interval:0,   //标签强制全部显示不重叠则设置为0

          rotate:0,  //标签倾斜

               formatter:function(value){

                    return  `${value.slice(11,16)}`;  //截取前5位

               },

               textStyle: {

                    color: 'rgba(167, 227, 255, 0.3)',

                    fontSize:'11',

                    fontFamily: 'Arial'

               }

        }

    },

    yAxis: {        

        name:'(Mpa)',  //轴标题

        nameTextStyle: {   //标题字体样式            

              color: 'rgba(167, 227, 255, 0.3)',

              fontSize:'11',

              fontFamily: 'Arial',

              padding:[0,0,-4,-30]

        },

        splitLine: {

          show: true,

          lineStyle: {

            type: 'dashed',

            width: 1,   //设置线宽度

         color: 'rgba(10, 167, 255, 0.2)'

          }

        }, //网格线

        axisLine: {show:false}, 

        axisTick: {show:false},

        axisLabel: {        

              show: true,    

              formatter:function(value){

                    return  `${value.toFixed(2)}`;

              },  

               textStyle: {

                    color: 'rgba(167, 227, 255, 0.3)',

                    fontSize:'11',

                    fontFamily: 'Arial'

               }

        }

    },

  // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。

    series: [{ // For shadow

            type: 'bar',

           // xAxisIndex: 0,  //选用哪个Y轴

            name:'',

            itemStyle: {

                barBorderRadius: 0, //柱子圆角

                color: 'rgba(10,167,255,0.2)'

            },

            barWidth:2, //柱子粗细

            barGap: '-160%',   //不同系列的柱间距离

            data: dataShadow,

            animation: false

        },{

            name:seriesNames[1],

        type: 'bar',

            stack: 'Ad',

        //yAxisIndex: 0,  //选用哪个Y轴

        barWidth: 5,  //柱子宽度

        //    barGap: '0%',  //两个柱子间距

        itemStyle: {

            barBorderRadius: 1,  //柱子圆角

            color: 'transparent'

        }

    },{         

            name:seriesNames[0],

        type: 'bar',

            stack: 'Ad',

        //yAxisIndex: 0,  //选用哪个Y轴

        barWidth: 5,  //柱子宽度

        //    barGap: '0%',  //两个柱子间距

        itemStyle: {

            barBorderRadius: 10,  //柱子圆角

            color: new echarts.graphic.LinearGradient(

                0, 0, 0, 1,

                [{offset: 0, color: '#E04D4E'},

                     {offset: 0.5, color: '#3791E0'},

                     {offset: 1, color: '#8D74F5'}]

            )

        }

    }]

};

FineReport 用户WtENK8135769 发布于 2023-6-20 11:53 (编辑于 2023-6-20 15:50)
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共1回答
最佳回答
0
用户WtENK8135769Lv6见习互助
发布于2023-7-31 17:03

重新配置

  • 0关注人数
  • 397浏览人数
  • 最后回答于:2023-7-31 17:03
    请选择关闭问题的原因
    确定 取消
    返回顶部