如何在echarts条形图中手动强调系列？

编程问答 2022-06-09

问题描述

我有一个带有一系列数据的echarts条形图。单击条形时，将对其施加强调。有没有一种方法可以通过编程方式选择条形图中的系列之一，以便在图形加载时重点关注？

Before Emphasis

Emphasis when clicked

条形图的选项代码：

a = np.array([1,2,3])
print(a.shape)
(3,)
print(a.transpose().shape)
(3,)

b = np.array([[1,3]))
print(b.shape)
(1,3)
print(b.transpose().shape)
(3,1)

谢谢。

解决方法

是的，这很容易。 Echarts API有两种操作相反的方法：

一个小例子： 

  var myChart = echarts.init(document.getElementById('main'));
    var chartData = [5,20,36,10,20];

  var option = {
    tooltip: {},legend: {
      data: ['Label']
    },xAxis: {
      data: ["Category1","Category2","Category3","Category4","Category5","Category6"]
    },yAxis: {},series: [{
      name: 'Series',type: 'bar',data: chartData,emphasis: {
                itemStyle: {
                    color: 'blue'
                }
            },}]
  };

  myChart.setOption(option);
    
    // Current selected dataPoint
    var selectedDataPoint = null;
    
    // Each eteration set another type of 
    setInterval(() => {
        var randomDataPoint = Math.floor(Math.random() * Math.floor(chartData.length));
        myChart.dispatchAction({ type: 'highlight',dataIndex: randomDataPoint })
    },800)
    
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

,
angularangularechartsecharts