echarts 折线图，通过点击事件实现在同一个区域多图切换

echarts 折线图，通过点击事件实现在同一个区域多图切换
就是我有三组数据
教练员:
X:'李牧','刘旭东','沈琼','王健','鞠根寅','沈富麟','吴卫','薛永业','杨礼康'
y:3,1,5,2,4,4,1,2,2

MVP:
X:'李牧','刘旭东','沈琼','王健','鞠根寅','沈富麟','吴卫','薛永业','杨礼康'
y:3,1,5,2,4,4,1,2,2

外援：
X:'李牧','刘旭东','沈琼','王健','鞠根寅','沈富麟','吴卫','薛永业','杨礼康'
y:3,1,5,2,4,4,1,2,2

这个样子

img


通过点击名称更换数据（不要用Vue）
我学的版本是这样子的

// 5.点击切换2020 和 2021 的数据
    $('.bar h2 a').on('click', function () {
      // console.log($(this).index());
      // 点击a 之后 根据当前a的索引号 找到对应的 RewardData 相关对象
      // console.log(yearData[$(this).index()]);
      var obj = RewardData[$(this).index()];
      option.series[0].data = obj.data[0];
      option.series[1].data = obj.data[1];
      // 选中年份高亮
      $('.bar h2 a').removeClass('a-active');
      $(this).addClass('a-active');

      // 需要重新渲染
      myChart.setOption(option);
    })

但具体怎么应用到我这边不太懂，希望大 佬指点一下下

其实就是 点击 ，切换 options 里data的数据 或者说 ，切换不同的options配置。

你根据点击的内容 切换这个option 。options里 data数据变换就行
myChart.setOption(option);

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7580385
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：使用多个 echarts 图表后，页面卡住、白屏？
  • 除此之外, 这篇博客: 1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列中的 五、本文总结 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 其实写到这里，我也发现了一些还原的样式上的不足，例如y轴的坐标数值与线之间的样式，示例写完了才发现没注意的情况下就写漏了，请见谅。

    其实通过上面的一个小节不难看出，常用的折线图设置，大部分的属性都是有的，从上一篇速记的属性还是可以快速的完成。

    这作为一个Echarts的系列的文章，主要目的是让学习Echart的朋友可以快速上手，会持续进行更新的。

    有问题请留言或者@博主,谢谢支持o(￣︶￣)o~

    感谢您的阅读,如果此文章或项目对您有帮助，若可以的话请给个一键三连吧！

    GitHub有开源项目,需要的小伙伴可以顺手star一下！

    GitHub: https://github.com/langyuxiansheng