You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/10/13 03:46:11 UTC
[GitHub] [incubator-echarts] linfei-luo commented on issue #13404: pictorialBar问题
linfei-luo commented on issue #13404:
URL: https://github.com/apache/incubator-echarts/issues/13404#issuecomment-707466432
export const createElectri = (id, category, data, name, count) => {
let max = [];
for (let i = 0; i < data.length; i++) {
max.push(100);
}
let option = {};
if(category.length > 0){
option = {
// backgroundColor: '#FFF',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (itemArr) {
let item = {};
if (Array.isArray(itemArr)) {
item = itemArr[0];
return item.axisValueLabel + '<br />' + item.seriesName + ': ' + item.data
} else {
item = itemArr
return item.name + '<br />' + item.seriesName + ': ' + item.data
}
}
},
grid: {
top: 40,
right: 20,
left: 50,
bottom: (count && category.length > count) ? 50 : 30
},
//滚动条
dataZoom: [{
type: 'slider',
show: (count && category.length > count) || false,
xAxisIndex: [0,1],
left: '5%',
height: 15,
handleSize: '100%',
bottom: 15,
start: 0,
end: (count && category.length > count) ? category && count / category.length * 100 : 100 //初始化滚动条
}],
xAxis: [{
data: category,
axisLine: {
lineStyle: {
color: '#FFFFFF'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#FFFFFF',
fontSize: 12,
interval: 0,
formatter: function (params) {
let newParamsName = ""; // 最终拼接成的字符串
let paramsNameNumber = params.length; // 实际标签的个数
let provideNumber = 2; // 每行能显示的字的个数
if(count){
provideNumber = 4
}else{
if(category.length > 5){
provideNumber = 2
}else{
provideNumber = 4
}
}
let rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (let p = 0; p < rowNumber; p++) {
let tempStr = ""; // 表示每一次截取的字符串
let start = p * provideNumber; // 开始截取的位置
let 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
}
}
},
{
type: 'category',
show: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
margin: 10,
color: '#fff',
fontSize: '10',
},
data: data,
}],
yAxis: [{
//scale:true,
min: function(item){
return parseInt(item.min / 10) * 10
},
max: 100,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#FFFFFF'
}
},
axisLabel: {
textStyle: {
color: '#FFFFFF'
},
// formatter: function(value){
// return parseInt(value * 100) + '%'
// },
},
}],
series: [{
name: name,
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#10bffc'
},
symbolRepeat: true,
symbolSize: [14, 4],
// symbolBoundingData: 100,
symbolMargin: 0.5,
symbolPosition: 'start',
z: -20,
data: data,
label: {
normal: {
show: false,
position: 'top',
verticalAlign: 'top'
// formatter: function(value){
// return value && (value.data * 100).toFixed(1) + '%'
// }
}
}
}, {
name: name,
type: 'bar',
barWidth: 19,
itemStyle: {
color: 'rgba(0,0,0,0)',
borderWidth: 2,
borderColor: '#10bffc',
padding: 0
},
label: {
show: false
},
z: -10,
data: max
}, {
name: '',
type: 'line',
// barWidth: 19,
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAFCAYAAAB1j90SAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAADFJREFUGJVjFNj/hwEK/jMQBxgZGBgYWNAFiAUwjcTaBrcEppEk22A2kmobAwMDAwMA74EE3gW8aacAAAAASUVORK5CYII=',
symbolSize: [14, 6],
symbolOffset: [0, '-70%'],
itemStyle: {
color: 'rgba(0,0,0,0)',
borderWidth: 2,
borderColor: '#10bffc',
padding: 0
},
hoverAnimation: false,
legendHoverLink: false,
z: -10,
data: max
}]
};
}else{
option = {
title: {
text: "暂无数据",
show: true,
x: 'center',
y: 'center',
textAlign: 'auto',
textVerticalAlign: 'middle',
textStyle: {
color: '#FFFFFF',
fontWeight: 'normal',
fontSize: 16
}
}
};
}
// let chart = echarts.init(document.getElementById(id));
let chart = Echarts.getInstanceByDom(document.getElementById(id));
if (!chart) {
chart = Echarts.init(document.getElementById(id))
}
chart.setOption(option, true);
//图表自适应窗口大小
window.addEventListener("resize", function () {
chart.resize();
});
}
在4.9.0版本中给yAxis设置min属性后就出现这种问题了 当我将版本降到4.0.0后就正常了
------------------ 原始邮件 ------------------
发件人: "echarts-bot[bot]"<notifications@github.com>;
发送时间: 2020年10月10日(星期六) 中午1:09
收件人: "apache/incubator-echarts"<incubator-echarts@noreply.github.com>;
抄送: "摆渡翁"<1344712791@qq.com>; "Mention"<mention@noreply.github.com>;
主题: Re: [apache/incubator-echarts] pictorialBar问题 (#13404)
This issue is labeled with difficulty: easy.
@linfei-luo If you are interested in fixing it by yourself, which is a quicker way to get your problem fixed, please have a look at How to debug ECharts if you'd like to give a try. Or you may wait for the community to fix.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org