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 2021/08/26 10:22:44 UTC
[GitHub] [echarts] wdlhao opened a new issue #15609: Superimpose the histogram. Use 'diamond' and pictorialbar at the top. When you click the second segment of data of the first column, the obtained names do not match
wdlhao opened a new issue #15609:
URL: https://github.com/apache/echarts/issues/15609
Version
4.0.4
Reproduction link
[](https://www.makeapie.com/editor.html?c=xCsDpKfl_Y&v=10)
Steps to reproduce
1、点击第一个柱子的第二段柱子时，获取的name应该是第一个柱子对应的x轴的名称，现在获取的name不匹配； 2、当echats顶部的legend被禁用点击事件后，后面的2个legend不能点击，这是正常的；但是前面的2个legend还能点击；触发了echart的click事件； 3、改变pictorialBar的z值，可以解决点击问题；但是不能满足柱状图现有的效果
When clicking the second section of the first column, the obtained name should be the name of the x-axis corresponding to the first column. Now the obtained name does not match;
When the click event of the legend at the top of echats is disabled, the next two legends cannot be clicked, which is normal; However, the first two legend can be clicked; Triggered the click event of echart;
Changing the Z value of pictorialbar can solve the click problem; However, it can not meet the existing effect of histogram
The code is as follows:
`const dataArr = {
xAxis: ["果缤纷", "花果山", "百果园", "水果帮", "果多美", "农夫果园", "鲜丰水果", "果唯伊水果", "新隆嘉水果", "半斗米水果", "白鲜果", "旺旺水果", "安心果", "果乐乐", "养乐果", "果大大"],
result: [
{ name:"苹果",data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name:"梨子",data:[376.461, 0.489, 0.012, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name:"香蕉",data:[89.876, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ name:"菠萝",data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
]
}
const colors = [
['rgba(73,228,170,.85)','rgba(75, 194, 149,.85)'],
['rgba(48,174,255,.85)', 'rgba(31,106,255,.85)'],
['rgba(251,207,60,.85)', 'rgba(196, 161, 47,.85)'],
['rgba(247, 77, 94,.85)', 'rgba(196, 65, 78,.85)'],
['rgba(178,103,239,.85)', 'rgba(128, 66, 179,.85)'],
['rgba(255, 251, 177,.85)', 'rgba(201, 197, 140,.85)'],
['rgba(187, 255, 255,.85)', 'rgba(145, 196, 196,.85)'],
['rgba(253, 210, 227,.85)', 'rgba(194, 163, 175,.85)'],
];
const topColors = [ 'rgb(73,228,170)', 'rgb(48,174,255)', 'rgb(251,207,60)', 'rgb(247, 77, 94)', 'rgb(178,103,239)', 'rgb(255, 251, 177)', 'rgb(187, 255, 255)', 'rgb(253, 210, 227)' ]
const diamondData = dataArr.result.reduce((pre, cur, index) => {
pre[index] = cur.data.map((el, id) => el + ( pre[index - 1] ? pre[index - 1][id] : 0))
return pre;
}, [])
let color = [];
colors.forEach((item) => {
color.push(
[{ offset: 0, color: item[0] }, { offset: 0.5, color: item[0] }, { offset: 0.5, color: item[1] }, { offset: 1, color: item[1] }]
)
})
let series = dataArr.result.reduce((p, c, i, array) => {
let barGap = '-100%'; // 堆叠
let barCateGoryGap = '80%';
let barWidth = 34;
p.push({
z: i + 1,
stack: "group",
type: 'bar',
name: c.name,
data: c.data,
barWidth: barWidth,
barGap: barGap, // 不同系列的柱间距离
barCateGoryGap: barCateGoryGap,
itemStyle:{
color:
{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: color[i]
}
}
},
{
z: i + 10,
type: 'pictorialBar',
symbolPosition: 'end',
symbol: 'diamond',
symbolOffset: [0, '-50%'], // 设置图形定位
symbolSize: [barWidth, 10], // 设置图形大小。宽度为柱状条同宽;高度为10;
data: diamondData[i], // 计算的高度值
itemStyle: {
color: function(params) {
// 数据为0时,隐藏
if(c.data[params.dataIndex] == 0){
return 'transparent';
}
return topColors[i];
},
},
tooltip: { show: false },
cursor:"auto",
}
)
// 是否最后一个了？设置底座样式
if (p.length === (array.length) * 2) {
p.push({
z: array.length * 2,
type: "pictorialBar",
symbolPosition: "start",
data: dataArr.result[0].data,
symbol: "diamond",
symbolOffset: ["0%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {
color: {
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: color[0]
}
},
tooltip: { show: false },
})
return p
}
return p
}, [])
option = { tooltip: { trigger: 'axis', backgroundColor: 'rgb(30,98,166)', textStyle:{ color:'#fff', }, axisPointer: { type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, }, legend: { show: true, selectedMode:false, orient: 'horizontal', icon: 'circle', }, xAxis: { data: dataArr.xAxis, }, yAxis: { type: 'value', axisLine: { lineStyle: { //color: '#C0C1D3' } }, splitLine: { show: true, } }, series:series };
myChart.on('click', function (params) { console.log('name-----',params); });
`
What is expected?
When clicking the second section of the first column, the obtained name should be the name of the x-axis corresponding to the first column. Now the obtained name does not match;
When the click event of the legend at the top of echats is disabled, the next two legends cannot be clicked, which is normal; However, the first two legend can be clicked; Triggered the click event of echart;
What is actually happening?
no
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
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
[GitHub] [echarts] echarts-bot[bot] commented on issue #15609: Superimpose the histogram. Use 'diamond' and pictorialbar at the top. When you click the second segment of data of the first column, the obtained names do not match
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #15609:
URL: https://github.com/apache/echarts/issues/15609#issuecomment-906280814
This issue is not created using [issue template](https://ecomfe.github.io/echarts-issue-helper/) so I'm going to close it. 🙊
Sorry for this, but it helps save our maintainers' time so that more developers get helped.
Feel free to create another issue using the issue template.
If you think you have already made your point clear without the template, or your problem cannot be covered by it, you may re-open this issue again.
这个 issue 未使用 [issue 模板](https://ecomfe.github.io/echarts-issue-helper/?lang=zh-cn) 创建，所以我将关闭此 issue。
为此带来的麻烦我深表歉意，但是请理解这是为了节约社区维护者的时间，以更高效地服务社区的开发者群体。
如果您愿意，请使用 issue 模板重新创建 issue。
如果您认为虽然没有使用模板，但您已经提供了复现问题的充分描述，或者您的问题无法使用模板表达，也可以重新 open 这个 issue。
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
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
[GitHub] [echarts] echarts-bot[bot] closed issue #15609: Superimpose the histogram. Use 'diamond' and pictorialbar at the top. When you click the second segment of data of the first column, the obtained names do not match
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] closed issue #15609:
URL: https://github.com/apache/echarts/issues/15609
--
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.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
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