echarts柱状图数据相差过大解决办法

echarts柱状图数据相差过大解决办法(个人常用)

有的数值差特别巨大，可采用二次开根号，甚至3次、4次能满足为止。

let arr = [1005, 50, 1, 10, 70, 110, 100];
let arr2 = arr.map(v=>{
    return (Math.sqrt(v)).toFixed(0);
})

这样会遇到 tooltip 弹框数值不准确的问题
解决办法

$.get("", function (res) {
            var dataList = res
            var xData = [], yData1 = [], yData2 = [], yData3 = [];
            dataList.forEach(item => {
                xData.push(item.ztk)
                yData1.push(item.typ["接口"])
                yData2.push(item.typ["文件"])
                yData3.push(item.typ["数据库"])
            })

            // let arr1 = yData1.map(v=>{
            //     return (Math.sqrt(v)).toFixed(0);
            // })
            // let arr2 = yData2.map(v=>{
            //     return (Math.sqrt(v)).toFixed(0);
            // })
            // let arr3 = yData3.map(v=>{
            //     return (Math.sqrt(v)).toFixed(0);
            // })

            var myChart = new centerEcharts('twoM1Echarts');
            myChart.init(xData, yData1, yData2, yData3)
            // var myChart = new centerEcharts('twoM1Echarts');
            // myChart.init(xData, arr1, arr2, arr3)

        })
        function centerEcharts(id) {
            this.chart = echarts.init(document.getElementById(id));
            this.init = function (xData, yData1, yData2, yData3) {
            //主要在这一块
                var yDatas1 = [],yDatas2 = [],yDatas3 = [];
                for(let [index,value] of xData.entries()){
                    var data1 = {
                        name:value,
                        //这个是图形需要的处理数据
                        value: (Math.sqrt(yData1[index])).toFixed(0),
                        //下面这个是我们 tooltip 框用的原数据
                        values:yData1[index]
                    }
                    yDatas1.push(data1)
                    var data2 = {
                        name:value,
                        value: (Math.sqrt(yData2[index])).toFixed(0),
                        values:yData2[index]
                    }
                    yDatas2.push(data2)
                    var data3 = {
                        name:value,
                        value: (Math.sqrt(yData3[index])).toFixed(0),
                        values:yData3[index]
                    }
                    yDatas3.push(data3)
                }
                var option = {
                    legend: {
                        show: true,
                        data: ['接口', '文件', '数据库'],
                        textStyle: {
                            color: "#ffffff"
                        }
                    },
                    // 标签
                    angleAxis: {
                        type: 'category',
                        startAngle:45,
                        boundaryGap:true,
                        data: xData,
                        axisLabel: { //刻度标签设置
                            interval:0,
                            textStyle: {
                                color: '#ffffff',
                                fontSize: 11 * scale,
                            }
                        },
                     
                    },
                    tooltip: {
                        show: "true",
                        trigger: 'axis',
                        backgroundColor: 'rgba(0,0,0,0.7)', // 背景
                        padding: [0, 10], //内边距
                        extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                        //自定义了弹框内容 原数据 params[i].data.values
                        formatter: function (params) {
                            var relVal = '';
                            var res = '';
                            for (var i = 0, l = params.length; i < l; i++) {
                                res += '<div style="font-size: 1.5vh;"><span style="display: inline-block;margin-right: 1vh;border-radius: 10px;width: 1vh;height: 1vh;background-color: ' + params[i].color + ';"></span>' + params[i].seriesName + ': ' + Math.abs(params[i].data.values) + '</div>';
                            }
                            relVal = '<div style="font-size: 1.5vh;padding:1vh 1vh;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;">' +
                                '<div>' + params[0].name + '</div>' + res +
                                '</div>'
                            return relVal;
                        }
                    },
                    // 轴线
                    radiusAxis: {
                        show: true,
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: { //坐标轴刻度设置
                            show: false
                        },
                    },
                    polar: {},
                    series: [
                        {
                            type: 'bar',
                            // barMinHeight: 10,
                            data: yDatas1,
                            coordinateSystem: 'polar',
                            name: '接口',
                            stack: 'a',
                            emphasis: {
                                focus: 'series'
                            }
                        },
                        {
                            type: 'bar',
                            data: yDatas2,
                            coordinateSystem: 'polar',
                            name: '文件',
                            stack: 'a',
                            emphasis: {
                                focus: 'series'
                            }
                        },
                        {
                            type: 'bar',
                            data: yDatas3,
                            coordinateSystem: 'polar',
                            name: '数据库',
                            stack: 'a',
                            emphasis: {
                                focus: 'series'
                            }
                        }
                    ],
                };
                this.chart.clear();
                this.chart.setOption(option);
            }
            this.resize = function () {
                this.chart.resize();
            }
        }