echarts series.data.name属性不管用了
这是
效果图
一个例子:
series-bar.data[index].name属性,文档上说是数据项名称,但是我这样设置了name属性:
data: [{name: "杨梅", value: 88},{name: "西瓜", value: 2},{name: "水蜜桃", value: 8}],但还是匹配不到对应类目,效果如下图:
只有按各类目的顺序写,其他位置需要用0或null占位,才是正确的:
data: [null,null,{name: "杨梅", value: 88}]效果如下↓
这样子,name属性是失效了吗?
相关代码
option = {
xAxis: [
{
id: "0",
gridId: "0",
type: "category",
name: "黑龙江省",
nameLocation: "center",
splitLine: { show: true },
axisTick: { show: true },
axisLabel: { show: true },
axisLine: { onZero: true, lineStyle: { color: "#666" } },
data: ["西瓜", "水蜜桃", "杨梅"],
z: 100,
}
],
yAxis: [
{
id: "0",
gridId: "0",
splitLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false, lineStyle: { color: "#1C70B6" } },
z: 100,
},
],
grid: [
{ id: "0", width: 500, height: 500, z: 100, top: "20%", right: "10%" }
],
series: [
{
name: "西瓜",
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
data: [2,0,0],
z: 100,
barGap: "-100%",
itemStyle: { normal: {} },
},
{
name: "水蜜桃",
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
data: [0, 120, 0],
z: 100,
itemStyle: { normal: {} },
barGap: "-100%"
},
{
name: "杨梅",
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
data: [null,null,{name: "杨梅", value: 88}],
barGap: "-100%",
z: 100,
}
]
};
附上:Echarts图表在线编译器:
https://echarts.apache.org/ex...
看了文档, series.data.name 是用于 legend 显示名称的
https://echarts.apache.org/ex...
底部的名称应该是使用 xAxis 来控制