初学 js 求助大佬 数据可视化 echarts 的一个问题

zh648990

有一个时间轴组件，一个柱状图组件 柱状图的Y轴是类目轴 X轴是数据轴
需求就是 点击时间轴的时候 Y轴的数据如何随着时间轴节点的变化而变化？
安装官方的教程，Y轴的数据是固定的 举个例子 ['浙江省','江苏省','北京市']; 即使切换时间轴 X轴对应的数据永远是这三个类目的

我想实现 昨天是 ['浙江省','江苏省','北京市']; 切换时间轴 今天就是 ['河南省','湖南省','上海市']; 这样？

我尝试用官方的 数据集 dataset 方法 切换的时候 如果Y轴数据和上一次不一致会出现空缺

求助大佬 如何实现这个效果 感谢

实例
https://www.makeapie.com/editor.html?c=xiJP3xhHUz&v=2

ashergo

点击之后重新设置数据并渲染图表

zh648990

ashergo 发表于 2021-10-21 13:53
点击之后重新设置数据并渲染图表

https://www.makeapie.com/editor.html?c=xiJP3xhHUz&v=2
这个是我做的实例，类目轴不一致切换有空缺

qq231

你要每个类目轴都要设置值，这样切换就不会有问题

zh648990

qq231 发表于 2021-10-21 14:18
你要每个类目轴都要设置值，这样切换就不会有问题

[JavaScript] 纯文本查看 复制代码

// 统计日期
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
这个是实例，我只写了两天的

zpy2

zh648990 发表于 2021-10-21 14:26
[mw_shl_code=javascript,true]// 统计日期
var dateList = ['2021-10-01', '2021-10-02', '2021-10-03' ...

尝试用官方的 数据集 dataset 方法 切换的时候 如果Y轴数据和上一次不一致会出现空缺（现在3个是空的，bar是0值）
子 ['浙江省','江苏省','北京市']; 即使切换时间轴 X轴对应的数据永远是这三个类目的
你意思是 图上 只出现 3个省的 bar,而不是6个？
这个好像不行的。

zh648990

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

用框架了没有

zh648990

lucklys 发表于 2021-10-21 15:38
用框架了没有

没有用框架

zpy2

zh648990 发表于 2021-10-21 15:36
不是这个
举个例子 我想实现这样的
时间轴 2021-10-01 Y轴显示 ['浙江省','江苏省','北京市']

后 10-02我是没有安徽湖北的数据 出现空缺了

你是想 不要 显示 安徽湖北 这二个省了，但是 ECharts认为这2个省的数据为0（所以要显示这个标签），而不是 不显示 这个bar,这个是ECharts的一个特性，应该没法改变的，除非改echarts的源码。