初学 js 求助大佬 数据可视化 echarts 的一个问题
本帖最后由 zh648990 于 2021-10-21 15:41 编辑有一个时间轴组件，一个柱状图组件 柱状图的Y轴是类目轴 X轴是数据轴
需求就是 点击时间轴的时候 Y轴的数据如何随着时间轴节点的变化而变化？
安装官方的教程，Y轴的数据是固定的 举个例子 ['浙江省','江苏省','北京市']; 即使切换时间轴 X轴对应的数据永远是这三个类目的
我想实现 昨天是 ['浙江省','江苏省','北京市']; 切换时间轴 今天就是 ['河南省','湖南省','上海市']; 这样？
我尝试用官方的 数据集 dataset 方法 切换的时候 如果Y轴数据和上一次不一致会出现空缺
求助大佬 如何实现这个效果 感谢
实例
https://www.makeapie.com/editor.html?c=xiJP3xhHUz&v=2 点击之后重新设置数据并渲染图表 本帖最后由 zh648990 于 2021-10-21 15:59 编辑
ashergo 发表于 2021-10-21 13:53
点击之后重新设置数据并渲染图表
https://www.makeapie.com/editor.html?c=xiJP3xhHUz&v=2
这个是我做的实例，类目轴不一致切换有空缺 你要每个类目轴都要设置值，这样切换就不会有问题 本帖最后由 zh648990 于 2021-10-21 15:59 编辑
qq231 发表于 2021-10-21 14:18
你要每个类目轴都要设置值，这样切换就不会有问题
// 统计日期
var dateList = ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07'];
// 指定图表的配置项和数据
var options = {
// 时间轴
timeline: {
axisType: 'category',
left: '33%',
right: '33%',
controlStyle: {
showPlayBtn: false,
},
data: dateList
},
// 地图
geo: {
map: 'china',
zoom: '0.6',
itemStyle: {
areaColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(100,149,237,1)',
borderWidth: 0.5,
},
emphasis: {
label: {
show: false
},
itemStyle: {
areaColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(100,149,237,1)',
borderWidth: 1,
},
},
top: '28%',
},
// 直角坐标系 组件定位
grid: [
{left: '70%', top: '48%', right: '20%',},
],
// X轴
xAxis: [
{
gridIndex: 0,
type: 'value',
position: 'top',
axisLine: {show: false},
axisTick: {show: false},
minorTick: {show: false},
axisLabel: {show: true},
splitLine: {show: false},
minorSplitLine: {show: false},
splitArea: {show: false},
},
],
// Y轴
yAxis: [
{
gridIndex: 0,
type: 'category',
inverse: true,
axisLine: {show: false},
axisTick: {show: false},
minorTick: {show: false},
axisLabel: {show: true},
splitLine: {show: false},
minorSplitLine: {show: false},
splitArea: {show: false},
},
],
// 数据集
dataset: [
// 序号为 0 的 dataset。
{
source: [
['浙江省', 244],
['江苏省', 177],
['广东省', 167],
['山东省', 142],
['四川省', 134],
['河南省', 123],
['河北省', 98],
['福建省', 93],
['安徽省', 96],
['湖北省', 86],
]
},
// 序号为 1 的 dataset。
{
source: [
['浙江省', 238],
['广东省', 175],
['江苏省', 163],
['河南省', 159],
['四川省', 140],
['山东省', 137],
['福建省', 120],
['河北省', 114],
['辽宁省', 101],
['湖南省', 97],
]
},
],
// 配置项
series: [
// 图表一
{
type: 'bar',
coordinateSystem: 'cartesian2d',
xAxisIndex: 0,
yAxisIndex: 0,
},
],
// 数据
options: [
{
series: [
{datasetIndex: 0}
]
},
{
series: [
{datasetIndex: 1}
]
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(options);
大佬请看 我设置过类目轴的数据了，一天一个数据集，但是有BUG 切换的时候如果类目轴数据不一致的话会有空缺
可能是我的写法不对，但是这个我是按照官网的教程来写的
https://www.makeapie.com/editor.html?c=xiJP3xhHUz&v=2
这个是实例，我只写了两天的 zh648990 发表于 2021-10-21 14:26
// 统计日期
var dateList = ['2021-10-01', '2021-10-02', '2021-10-03' ...
尝试用官方的 数据集 dataset 方法 切换的时候 如果Y轴数据和上一次不一致会出现空缺（现在3个是空的，bar是0值）
子 ['浙江省','江苏省','北京市']; 即使切换时间轴 X轴对应的数据永远是这三个类目的
你意思是 图上 只出现 3个省的 bar,而不是6个？
这个好像不行的。 本帖最后由 zh648990 于 2021-10-21 15:49 编辑
zpy2 发表于 2021-10-21 14:47
尝试用官方的 数据集 dataset 方法 切换的时候 如果Y轴数据和上一次不一致会出现空缺（现在3个是空的，ba ...
不是这个
举个例子 我想实现这样的
时间轴 2021-10-01 Y轴显示 ['浙江省','江苏省','北京市']
时间轴 2021-10-02 Y轴显示 ['浙江省','山东省','上海市']
实例我只写了两天的数据 剩下的5天我没写 我改下
https://www.makeapie.com/editor.html?c=xiJP3xhHUz&v=2
现在这个实例应该能展示我的问题了 10-02的Y轴和10-01的Y轴数据不一致，切换时间轴的时候 就会出现空缺
看截图 正常效果
切换时间轴后 10-02我是没有安徽湖北的数据 出现空缺了
在切换回去 也有空缺
用框架了没有 lucklys 发表于 2021-10-21 15:38
用框架了没有
没有用框架 zh648990 发表于 2021-10-21 15:36
不是这个
举个例子 我想实现这样的
时间轴 2021-10-01 Y轴显示 ['浙江省','江苏省','北京市']
后 10-02我是没有安徽湖北的数据 出现空缺了
你是想 不要 显示 安徽湖北 这二个省了，但是 ECharts认为这2个省的数据为0（所以要显示这个标签），而不是 不显示 这个bar,这个是ECharts的一个特性，应该没法改变的，除非改echarts的源码。
页:
[1]
2