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();
}
}