Echarts双坐标轴相关设置
2020-11-24 本文已影响0人
柠檬花树
1.tooltip 设置不同的展示格式
tooltip: {
trigger: "axis",
formatter: function(params) {
console.error(params)
let result = "";
result += params[0].name;
params.map((v,idx) => {
if(idx === 1){
result +=
"</br>" +
v.marker +
v.seriesName +
"：" +
parseFloat( (v.value) ).toFixed(2) +
"亿";
} else if (idx === 0){
result +=
"</br>" +
v.marker +
v.seriesName +
"：" +
parseFloat( (v.value) / 10000).toFixed(2) +
"万";
}
});
return result;
}
}
2.左右单位取整数：数据格式处理
function calMax(arr) {
console.log(arr);
let max = Math.max.apply(null, arr);
console.log(max); //9.2
// let maxint = Math.ceil(max /9.5*10/10000);
let maxint = Math.round(Math.ceil(((max / 9.5) * 10) / 100000)) * 10; //1 //不让最高的值超过最上面的刻度
let maxval = maxint * 10000; //10//让显示的刻度是整数
return maxval;
}
function calMaxTwo(arr) {
console.log(arr);
let max = Math.max.apply(null, arr);
console.log(max); //9.2
// let maxint = Math.ceil(max /9.5*10/10000);
let maxint = (Math.ceil(max/10))*10; //1 //不让最高的值超过最上面的刻度
let maxval = maxint; //10//让显示的刻度是整数
return maxval;
}
console.log(calMax(this.lineAverage));
this.maxvalRight = calMaxTwo(this.lineAverage); //10
// this.minvalLeft = calMin(this.numberBuyers); //0
this.maxvalLeft = calMax(this.numberBuyers); //70
this.intervalRight = (this.maxvalRight - 0) / this.splitNumber;
this.intervalLeft = (this.maxvalLeft - 0) / this.splitNumber;
3.Echart 双坐标轴案例分享
initBar() {
this.operData();
this.myChart = this.$echarts.init(
document.getElementById("marketTchart")
);
let option = {
// legend: {
// // y:'bottom',
// top: "95%",
// // itemGap: 50,
// data: ["持仓客户数", "总规模数"],
// // padding:[30,0,0,0],
// textStyle: {
// color: "#999",
// borderColor: "#fff"
// }
// },
legend: {
itemGap: 20,
data: ["持仓客户数", "总规模数"],
itemWidth: 15,
itemHeight: 10,
textStyle: {
color: "#999",
borderColor: "#fff",
fontSize: 12,
lineHeight: 20
}
},
tooltip: {
trigger: "axis",
formatter: function(params) {
console.error(params);
let result = "";
result += params[0].name;
params.map((v, idx) => {
if (idx === 1) {
result +=
"</br>" +
v.marker +
v.seriesName +
"：" +
parseFloat(v.value).toFixed(2) +
"亿";
} else if (idx === 0) {
result +=
"</br>" +
v.marker +
v.seriesName +
"：" +
parseFloat(v.value / 10000).toFixed(2) +
"万";
}
});
return result;
}
},
grid: {
bottom: 0,
top: 30,
left: 0,
right: 0,
containLabel: true
},
xAxis: [
{
type: "category",
data: this.xAxisLabelName,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#546176",
width: 3
}
},
axisTick: {
show: false, //隐藏X轴刻度
alignWithLabel: true
},
width: 100,
axisLabel: {
show: true,
margin: 16,
interval: 0,
textStyle: {
color: "#94A5B2",
fontSize: 12,
lineHeight: 15
},
// 换行
formatter: function(params) {
var newParamsName = ""; // 最终拼接成的字符串
var paramsNameNumber = params.length; // 实际标签的个数
var provideNumber = 5; // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = ""; // 表示每一次截取的字符串
var start = p * provideNumber; // 开始截取的位置
var end = start + provideNumber; // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr; // 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName;
}
}
}
],
yAxis: [
{
type: "value",
name: "持仓客户数",
nameTextStyle: {
fontSize: 12,
padding: [0, 5, 0, 0],
color: "#98a5b1",
align: "center"
},
// position: "right",
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: "#396A87",
width: 2
}
},
max: this.maxLeft,
min: this.minLeft,
interval: this.intervalLeft,
splitNumber: this.splitNumber,
axisLabel: {
fontSize: 12,
color: "#98a5b1",
formatter: value => {
return (
parseFloat((Math.ceil(value / 10000) / 10).toFixed(1)) * 10 +
"万"
);
// return (Math.round((n /10000) * 100) / 100) +"万";
}
}
},
{
type: "value",
name: "总规模数",
nameTextStyle: {
fontSize: 12,
padding: [0, 0, 0, 30],
color: "#98a5b1",
nameTextStyle: {
align: "right"
}
},
position: "right",
splitLine: {
show: true,
lineStyle: {
color: "#32466C",
type: "dashed"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
max: this.maxvalRight,
min: this.minvalRight,
interval: this.intervalRight,
splitNumber: this.splitNumber,
axisLabel: {
fontSize: 12,
color: "#98a5b1",
formatter: value => {
return (
String(
parseFloat(Math.round(parseInt(value * 100)) / 100)
.toFixed(0)
.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
) + "亿"
);
}
}
}
],
//animationDurationUpdate: 1000,
series: [
{
name: this.legendDataName[1],
type: "bar",
data: this.numberBuyers,
barWidth: "15px",
// 柱子颜色
itemStyle: {
normal: {
show: true,
color: "rgba(164, 140, 94,1)",
barBorderRadius: 50
}
}
},
{
//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
normal: {
borderWidth: 3,
color: "rgba(255,255,255,0.50)"
}
},
name: this.legendDataName[0],
type: "line",
yAxisIndex: 1,
data: this.lineAverage
}
]
};
this.myChart.setOption(option, true);
this.resizeHook();
}
