创建echart多个联动的示例代码

2023年6月10日下午1:32 • JavaScript

创建 ECharts 多个联动的示例代码需要以下几个步骤：

引入 ECharts 的资源文件

首先，在你的 HTML 文件中，需要按照以下方式引入 ECharts 的资源文件：

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

这里使用了 ECharts 5.0.0 版本的资源文件，你也可以选择其他版本。

准备数据和图表配置

在准备数据之前，需要先了解一下 ECharts 中的数据结构。ECharts 中的数据主要分为两种，分别是 series 和 data。

series 表示数据系列，比如柱状图中的每个柱子、折线图中的每条线。在 series 中，包含了该系列的各种配置信息，比如数据类型、颜色、标记等。

data 表示每个系列中的具体数据。在 data 中，一般是一个数组，数组中的每个元素表示一个数据点，可以是数字、字符串等。

下面是一个简单的示例，用于展示柱状图和饼图之间的联动效果，代码中包含了数据和图表配置：

// 柱状图数据和配置
var option1 = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'bar',
  }]
};

// 饼图数据和配置
var option2 = {
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 234, name: '联盟广告'},
      {value: 135, name: '视频广告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }]
};

实例化两个图表对象

接下来，需要分别实例化两个图表对象，并将上一步中设置好的图表配置赋值给它们。

// 实例化柱状图对象
var chart1 = echarts.init(document.getElementById('chart1'));
chart1.setOption(option1);

// 实例化饼图对象
var chart2 = echarts.init(document.getElementById('chart2'));
chart2.setOption(option2);

绑定事件

为实现两个图表之间的联动效果，需要在一个图表上绑定事件，在事件回调函数中处理另一个图表的数据。常见的事件有 click、mouseover 等，本文中我们以 click 事件为例。

下面是一个实现柱状图和饼图联动效果的示例代码，当柱状图上的柱子被点击时，会触发联动效果，改变饼图的数据。

// 为柱状图绑定点击事件
chart1.on('click', function(params) {
  // 获取点击的柱子的数据
  var data = params.data;

  // 修改饼图的数据
  option2.series[0].data = [
    {value: data, name: '柱状图数据'},
    {value: 100 - data, name: '其它数据'}
  ];
  chart2.setOption(option2);
});

完整示例代码说明

接下来，我们给出完整的示例代码说明，包括了一个简单的柱状图和饼图之间的联动效果。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ECharts 多个联动示例</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart1" style="width: 600px; height:400px;"></div>
  <div id="chart2" style="width: 600px; height:400px;"></div>
  <script>
    // 柱状图数据和配置
    var option1 = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
      }]
    };

    // 饼图数据和配置
    var option2 = {
      series: [{
        type: 'pie',
        data: [
          {value: 335, name: '直接访问'},
          {value: 310, name: '邮件营销'},
          {value: 234, name: '联盟广告'},
          {value: 135, name: '视频广告'},
          {value: 1548, name: '搜索引擎'}
        ]
      }]
    };

    // 实例化柱状图对象
    var chart1 = echarts.init(document.getElementById('chart1'));
    chart1.setOption(option1);

    // 实例化饼图对象
    var chart2 = echarts.init(document.getElementById('chart2'));
    chart2.setOption(option2);

    // 为柱状图绑定点击事件
    chart1.on('click', function(params) {
      // 获取点击的柱子的数据
      var data = params.data;

      // 修改饼图的数据
      option2.series[0].data = [
        {value: data, name: '柱状图数据'},
        {value: 100 - data, name: '其它数据'}
      ];
      chart2.setOption(option2);
    });
  </script>
</body>
</html>

上述示例代码中，我们首先引入了 ECharts 的资源文件，然后设置了两个图表的数据和配置，分别实例化了两个图表对象，最后为柱状图绑定了点击事件，实现了柱状图和饼图的联动效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：创建echart多个联动的示例代码 - Python技术站