Question

我想在图形图表上显示数据。我正在使用Echarts图形，但是在打开页面时，所有显示在开始处的数据。您能帮我打开页面时仅显示2016年处于活动状态，而其他年份则当访问者单击该数据时都处于非活动状态吗？

这是我的ECharts选项：

var myChart = echarts.init(document.getElementById('bar-chart'));
option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data:['2016', '2017', '2018', '2019']
  },
  toolbox: {
    show: true,
    feature: {
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  color: ["#55ce63", "#009efb", "#b20202", "#a8b202"],
  calculable: true,
  xAxis: [
    {
      type: 'category',
      data: [  
       'Jan','Feb','Mar',
       'Apr','May','Jun',
       'Jul','Aug','Sep',
       'Oct','Nov','Dec'
      ]
    }
  ],
  yAxis: [
    {
      type : 'value'
    }
  ],
  series: [
    {
      name: '2016',
      type: 'line',
      data: [...],
      markPoint: {...},
      markLine: {...}
    },{
      name: '2017',
      type: 'line',
      data: [...],
      markPoint: {...},
      markLine: {...}
    },{
      name: '2018',
      type: 'line',
      data: [...],
      markPoint: {...},
      markLine: {...}
    },{
      name: '2019',
      type: 'line',
      data: [...],
      markPoint: {...},
      markLine: {...}
    }
  ]
};

Answer 1

我发布的上一个答案不是一个好答案，因为它需要外部JS函数来处理options对象。这是使用ECharts的内置legend.selected属性的快速解决方案：

legend: { 
  data:['2016', '2017', '2018', '2019'],
  selected: {
    '2016': true,
    '2017': false,
    '2018': false,
    '2019': false
  }
},

您可以想象，true默认显示该系列，false将其隐藏，直到用户单击图例图标以使其可见为止。

Echart图形在打开页面时不显示所有数据

1 个答案: