echarts - 如何在echarts中的每个水平条的顶部放置标签?
问题描述
我正在尝试使用非常好的 libray echarts在每个条形图顶部制作带有 y 标签的水平直方图。这是一个例子:
这是我使用这个 jsfiddle https://jsfiddle.net/795f84o0/6/的地方:
Echarts 文档非常好,但我没有找到将这些标签(sankey、漏斗、量规......)放在每个栏顶部的方法:/
你知道我该怎么做吗?感谢您的帮助!
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var builderJson = {
"all": 10887,
"charts": {
"map": 3237,
"lines": 2164,
"bar": 7561,
"line": 7778,
"pie": 7355,
"scatter": 2405,
"candlestick": 1842,
"radar": 2090,
"heatmap": 1762,
"treemap": 1593,
"graph": 2060,
"boxplot": 1537,
"parallel": 1908,
"gauge": 2107,
"funnel": 1692,
"sankey": 1568
},
"components": {
"geo": 2788,
"title": 9575,
"legend": 9400,
"tooltip": 9466,
"grid": 9266,
"markPoint": 3419,
"markLine": 2984,
"timeline": 2739,
"dataZoom": 2744,
"visualMap": 2466,
"toolbox": 3034,
"polar": 1945
},
"ie": 9743
};
option = {
xAxis: [{
type: 'value',
max: builderJson.all,
}],
yAxis: [{
data: Object.keys(builderJson.charts),
axisLabel: {
show: false,
},
},
{
data: Object.keys(builderJson.charts),
axisLabel: {
show: true,
},
},
],
series: [{
type: 'bar',
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
}]
};
option && myChart.setOption(option);
解决方案
好的,两个小时后我收到了...
只需发布屏幕截图以显示结果:
小提琴和代码:
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var builderJson = {
"all": 100,
"charts": {
"pie": 1,
"scatter": 1,
"candlestick": 1,
"radar": 2,
"heatmap": 3,
"treemap": 6,
"graph": 7,
"boxplot": 7,
"parallel": 8,
"gauge": 9,
"funnel": 15,
"sankey": 30
},
};
option = {
xAxis: [{
type: 'value',
max: builderJson.all,
axisLabel: {
show: false,
},
splitLine: {
show: false
}
},
],
yAxis: [{
data: Object.keys(builderJson.charts),
axisLabel: {
show: false,
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false,
}
},
],
series: [{
type: 'bar',
stack: 'chart',
barCategoryGap: 30,
barWidth: 20,
label: {
position: [0, -14],
formatter: '{b}',
show: true
},
itemStyle: {
borderRadius: [0, 2, 2, 0],
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'chart',
barCategoryGap: 30,
barWidth: 20,
itemStyle: {
color: 'whitesmoke'
},
label: {
position: 'insideRight',
formatter: function(params) { return 100 - params.value + '%'},
show: true
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
}
]
};
option && myChart.setOption(option);
推荐阅读
- php - 在退出迭代之前向 guzzle 请求池添加更多请求
- linux - 从控制台连接spring Postgres DB
- java - 未处理的异常:在 Windows 上设置 AndroidDriver 时出现 java.net.MalformedURLException
- libgdx - Three.js 在 libGDX 中提供的默认着色器制服的等价物是什么?
- python - 如何将两个list的相同位置的元素放在一起形成list的list?
- google-maps-api-3 - 如何使用 WebglOverlayView 在 Google maps Javascript API 中绘制标记/多边形/等?
- kdb - 计算组内的滞后时间差
- android - 如何将布局放在协调器布局中的AppBar(Collapsing ToolBar)上方,保持滚动?
- swift - Vapor 4:如何将急切加载的父关系映射到不同的格式?
- elasticsearch - uniq 性别只返回 10 个值。而我需要所有独特的价值观