Echarts环形图加外边框，鼠标放上去外边框随着一起突出

2024-02-20 11:23:42

前言

Echarts是一个强大的数据可视化库，它提供了丰富的图表类型和交互功能。在Echarts中，环形图是一种常用的图表类型，它可以直观地展示数据之间的比例关系。为了让环形图更加美观和易于理解，我们可以为其添加外边框。此外，还可以实现鼠标悬停时外边框随着一起突出的效果，以突出显示当前选中的数据项。

实现步骤

1. 引入Echarts库

首先，我们需要在HTML页面中引入Echarts库。可以使用以下代码：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>

2. 创建Echarts实例

接下来，我们需要创建一个Echarts实例。可以使用以下代码：

var myChart = echarts.init(document.getElementById('myChart'));

3. 设置环形图数据

接下来，我们需要设置环形图的数据。可以使用以下代码：

var option = {
  series: [
    {
      type: 'pie',
      data: [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 274, name: '联盟广告'},
        {value: 235, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
      ]
    }
  ]
};

4. 设置外边框

为了为环形图添加外边框，可以使用以下代码：

option.series[0].itemStyle = {
  borderWidth: 2,
  borderColor: '#ccc'
};

5. 实现鼠标悬停效果

为了实现鼠标悬停时外边框随着一起突出的效果，可以使用以下代码：

myChart.on('mouseover', function (params) {
  var index = params.dataIndex;
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: index
  });
});

myChart.on('mouseout', function (params) {
  var index = params.dataIndex;
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: index
  });
});

完整代码

以下是如何为环形图添加外边框和实现鼠标悬停效果的完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
</head>
<body>
  <div id="myChart" style="width: 600px; height: 400px;"></div>

  <script>
    var myChart = echarts.init(document.getElementById('myChart'));

    var option = {
      series: [
        {
          type: 'pie',
          data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 274, name: '联盟广告'},
            {value: 235, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
          ]
        }
      ]
    };

    option.series[0].itemStyle = {
      borderWidth: 2,
      borderColor: '#ccc'
    };

    myChart.on('mouseover', function (params) {
      var index = params.dataIndex;
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index
      });
    });

    myChart.on('mouseout', function (params) {
      var index = params.dataIndex;
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: index
      });
    });

    myChart.setOption(option);
  </script>
</body>
</html>