echarts 自定義配置帶單位的 tooltip 提示框方法和圓環數據 tooltip 過長超出屏幕

時間 2019-12-05

標籤 echarts 自定義配置單位 tooltip 提示方法圓環數據過長超出屏幕简体版

原文原文鏈接

-------tip1--------

在 tooltip 裏邊配置：拼接字符串；數組

tooltip : {
    trigger: 'axis',
    formatter:function(params)
    {

　　　　　var relVal = params[0].name;

        for (var i = 0, l = params.length; i < l; i++) {
            i === 2 ? relVal += '<br/>' +params[i].marker+ params[i].seriesName  + params[i].value +"%" : relVal += '<br/>' +params[i].marker+ params[i].seriesName  + params[i].value;
        }
        return relVal;
    }
},

-------tip2--------　　2019-3-14　　追加

添加負號（負增加率顯示）

tooltip配置，data傳值時要注意呼應

tooltip : {
    trigger: 'axis',
    formatter:function(params)
 {

　　　　　var relVal = params[0].name;

        for (var i = 0, l = params.length; i < l; i++) {
 i === 2 ? relVal += '<br/>' +params[i].marker+ params[i].seriesName  + params[i].name +"%" : relVal += '<br/>' +params[i].marker+ params[i].seriesName  + params[i].value;
 }
 return relVal;
 }
},


傳值的時候要格式化下數據,和tooltip 裏邊的name相呼應

　　後臺數據得到的數據處理一echarts

　　["-9.09","-36.00","25.00","70.00"]函數

　　charts要傳入的數組（value決定折線走勢，name 是tooltip顯示要顯示的值）spa

　　後臺數據得到的數據處理二3d

　　[{"value":9.09,"name":"-9.09"},{"value":36,"name":"-36.00"},{"value":25,"name":"25.00"},{"value":70,"name":"70.00"}]rest

　　note：配置增加率數據的時候要從新格式化下數據（添加一個名字（此處採用name）/ 或者 echarts 中tooltip formatter函數參數params 裏邊的其餘指定名字）：code

　　　　參數 params 是 formatter 須要的數據集。格式以下：component

　　{ 　　componentType: 'series', 　　// 系列類型 　　seriesType: string, 　　// 系列在傳入的 option.series 中的 index 　　seriesIndex: number, 　　// 系列名稱 　　seriesName: string, 　　// 數據名，類目名 　　 name: string, 　　 // 數據在傳入的 data 數組中的 index 　　dataIndex: number, 　　// 傳入的原始數據項 　　 data: Object, 　　// 傳入的數據值 　　value: number|Array, 　　// 數據圖形的顏色 　　color: string, 　　// 餅圖的百分比 　　 percent: number, 　　　　}

-------tip3--------

　　　小插曲：table切換時兩個echarts怎樣正常顯示？orm

　　　　將echarts初始化寫在函數中，tab切換時候調用下echarts初始化函數　　blog

-------tip4--------

echarts 圓環數據 tooltip 過長超出屏幕處理方法:

extraCssText:'width:100px;white-space:pre-wrap;'

處理後：

<div ng-show="tabAct == 0" id="plan-pdt-charts-td" style="width: 80vw;height: 320px;"></div>
<div ng-show="tabAct == 1" id="plan-pdt-charts-cb" style="width: 80vw;height: 320px;"></div>



var formatRateArrFun = function(initArr,Arr){
        for(var i = 0,len = initArr.length; i < len; i++){
            Arr.push({value:Math.abs(initArr[i]),name:initArr[i]});
        }
    }


// 獲取數組最大值
var getMaxVal = function(arr){
    var maxVal = 0;
    for (var i = 0; i < arr.length; i++){
        if(maxVal < arr[i]){
            maxVal = arr[i];
        }
    }
    return maxVal + 5000;
};
var initChartFun = function(){

        if($scope.tabAct == 0){
            increaseRate =[];
            echartActArr = initGpAchievePremiumActArr;
            echartPlanArr = initGpAchievePremiumArr;
            formatRateArrFun(initGpPremiumRateArr,increaseRate);
        }else if($scope.tabAct == 1){
            increaseRate =[];
            echartActArr = initGpAchieveNumActArr;
            echartPlanArr = initGpAchieveNumArr;
            formatRateArrFun(initGpAchieveNumRateArr,increaseRate);
        };

    console.log(JSON.stringify(initGpAchieveNumRateArr));
    console.log(JSON.stringify(increaseRate));


        // 承保echarts配置option
        if($scope.doubleChart){
            $scope.optionTd = {
                tooltip : {
                    trigger: 'axis',
                    textStyle:{
                        align:'left'
                    },
                    formatter:function(params)
                    {
                        var relVal = params[0].name;
                        for (var i = 0, l = params.length; i < l; i++) {
                            if(i === 2){
                                relVal += '<br/>' +params[i].marker+ params[i].seriesName  + params[i].name+"%";
                            }else{
                                if (params[i].value >= 10000 && params[i].value < 10000000) {
                                    params[i].value = params[i].value / 10000 + "萬";
                                } else if (params[i].value >= 10000000) {
                                    params[i].value = params[i].value / 10000000 + "千萬";
                                }
                                relVal += '<br/>' +params[i].marker+ params[i].seriesName  + params[i].value;
                            }
                        }
                        return relVal;
                    }
                },
                grid: {
                    top:'15%',
                    right : '13%',
                    bottom:'10%',
                    left:'15%'

                },
                toolbox : {
                    feature : {
                        dataView : {
                            show : false,
                            readOnly : false
                        },
                        restore : {
                            show : false
                        },
                        saveAsImage : {
                            show : false
                        }
                    }
                },

                xAxis : [ {
                    type : 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: ['#f2f2f2']
                        }
                    },
                    axisLabel: {
                        verticalAlign: "top",
                        color: "#000",
                        fontSize:9,
                    },
                    data : echartdateArr
                } ],
                yAxis : [ {
                    type : 'value',
                    name : '保費',
                    nameTextStyle:{
                        color:"#999",
                        fontSize:9,
                        paddingBottom:5,
                    },
                    min : 0,
                    max : getMaxVal(echartActArr),
                    interval:Math.ceil(getMaxVal(echartActArr)/5),
                    position : 'left',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#f2f2f2']
                        }
                    },
                    axisLabel: {
                        verticalAlign: "bottom",
                        color: "#999",
                        fontSize:9,
                        formatter: function(value){
                            if (value >= 10000 && value < 10000000) {
                                value = value / 10000 + "萬";
                            } else if (value >= 10000000) {
                                value = value / 10000000 + "千萬";
                            }
                            return value;
                        }
                    },
                }, {
                    type : 'value',
                    // name : '計劃保費',
                    min : 0,
                    max : getMaxVal(echartPlanArr),
                    interval:Math.ceil(getMaxVal(echartPlanArr)/5),
                    position : 'right',
                    offset : 10000,
                    splitLine: {
                        show: false,
                    },
                }, {
                    type : 'value',
                    name : '增加率',
                    nameTextStyle:{
                        color:"#999",
                        fontSize:9,
                        paddingBottom:5,
                    },
                    min : 0,
                    max : 100,
                    position : 'right',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#f2f2f2']
                        }
                    },
                    axisLabel: {
                        verticalAlign: "bottom",
                        color: "#999",
                        fontSize:9,
                        formatter: function(value){
                            return value/100*100 + '%'
                        }
                    }
                } ],
                series : [
                    {
                        name : '達成保費',
                        type : 'bar',
                        barWidth : 10,
                        /*設置柱狀圖顏色*/
                        itemStyle: {
                            normal: {
                                color: '#0670ba',
                                barBorderRadius: [10, 10, 10, 10],
                            }
                        },
                        data : echartActArr,
                    },
                    {
                        name : '計劃保費',
                        type : 'bar',
                        yAxisIndex : 1,
                        barWidth : 10,
                        /*設置柱狀圖顏色*/
                        itemStyle: {
                            normal: {
                                color: '#f0f3f6',
                                barBorderRadius: [10, 10, 10, 10],
                            }
                        },
                        data : echartPlanArr,
                    },
                    {
                        name : '增加率',
                        type : 'line',
                        yAxisIndex : 2,
                        itemStyle : {
                            normal : {
                                color:'#54bdf6'
                            }
                        },
                        smooth:true,
                        data : increaseRate,
                    }]
            };
        }else{
            $scope.optionTd = {
                tooltip : {
                    trigger: 'axis',
                    textStyle:{
                        align:'left'
                    },
                    formatter:function(params)
                    {
                        var relVal = params[0].name;
                        for (var i = 0, l = params.length; i < l; i++) {
                            if(i === 2){
                                relVal += '<br/>' +params[i].marker+ params[i].seriesName  + params[i].name+"%";
                            }else{
                                if (params[i].value >= 10000 && params[i].value < 10000000) {
                                    params[i].value = params[i].value / 10000 + "萬";
                                } else if (params[i].value >= 10000000) {
                                    params[i].value = params[i].value / 10000000 + "千萬";
                                }
                                relVal += '<br/>' +params[i].marker+ params[i].seriesName  + params[i].value;
                            }
                        }
                        return relVal;
                    }
                },
                grid: {
                    top:'15%',
                    right : '13%',
                    bottom:'10%',
                    left:'15%'

                },
                toolbox : {
                    feature : {
                        dataView : {
                            show : false,
                            readOnly : false
                        },
                        restore : {
                            show : false
                        },
                        saveAsImage : {
                            show : false
                        }
                    }
                },

                xAxis : [ {
                    type : 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: ['#f2f2f2']
                        }
                    },
                    axisLabel: {
                        verticalAlign: "top",
                        color: "#000",
                        fontSize:9,
                    },
                    data : echartdateArr
                } ],
                yAxis : [ {
                    type : 'value',
                    name : '保費',
                    nameTextStyle:{
                        color:"#999",
                        fontSize:9,
                        paddingBottom:5,
                    },
                    min : 0,
                    max : getMaxVal(echartActArr),
                    interval:Math.ceil(getMaxVal(echartActArr)/5),
                    position : 'left',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#f2f2f2']
                        }
                    },
                    axisLabel: {
                        verticalAlign: "bottom",
                        color: "#999",
                        fontSize:9,
                        formatter: function(value){
                            if (value >= 10000 && value < 10000000) {
                                value = value / 10000 + "萬";
                            } else if (value >= 10000000) {
                                value = value / 10000000 + "千萬";
                            }
                            return value;
                        }
                    },
                },{
                    type : 'value',
                    name : '增加率',
                    nameTextStyle:{
                        color:"#999",
                        fontSize:9,
                        paddingBottom:5,
                    },
                    min : 0,
                    max : 100,
                    position : 'right',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#f2f2f2']
                        }
                    },
                    axisLabel: {
                        verticalAlign: "bottom",
                        color: "#999",
                        fontSize:9,
                        formatter: function(value){
                            return value/100*100 + '%'
                        }
                    }
                } ],
                series : [
                    {
                        name : '達成保費',
                        type : 'bar',
                        barWidth : 10,
                        /*設置柱狀圖顏色*/
                        itemStyle: {
                            normal: {
                                color: '#0670ba',
                                barBorderRadius: [10, 10, 10, 10],
                            }
                        },
                        data : echartActArr,
                    },
                    {
                        name : '增加率',
                        type : 'line',
                        yAxisIndex : 1,
                        itemStyle : {
                            normal : {
                                color:'#54bdf6'
                            }
                        },
                        smooth:true,
                        data : increaseRate,
                    }]
            };
        }

        if($scope.tabAct == 0){
            var tdChart = echarts.init(document.getElementById('plan-pdt-charts-td'));
            tdChart.setOption($scope.optionTd);
        }else if($scope.tabAct == 1){
            var cbChart = echarts.init(document.getElementById('plan-pdt-charts-cb'));
            cbChart.setOption($scope.optionTd);
        }
    }

initChartFun();

$scope.changeTabAct = function(tabAct) {
    $scope.tabAct = tabAct;
    if($scope.tabAct == 0){
        initChartFun(); //初始化echarts
    }else if($scope.tabAct == 1){
        initChartFun(); //初始化echarts
    }
}