ECharts数据可视化数据集与事件入门基础知识【2】

最新推荐文章于 2025-04-18 17:22:49 发布

坚强de土豆仔

最新推荐文章于 2025-04-18 17:22:49 发布

阅读量1.2k

点赞数 23

分类专栏： ECharts 前端数据可视化文章标签：信息可视化 echarts 前端

本文链接：https://blog.youkuaiyun.com/weixin_43483590/article/details/141167634

版权

echarts一个基于 JavaScript 的开源可视化图表库。其有丰富的图表类型、强大的渲染引擎、专业多维度的数据分析、灵活配置的可视化设计。关于echarts的下载安装以及在项目中使用的基础知识我们前面已经回顾过了： ECharts 数据可视化入门基本知识下载安装常用的图表【1】-优快云博客

这里主要回顾echarts的点击事件以及回调函数、服务端渲染数据、异步获取数据等基本知识。有问题欢迎评论区留言，谢谢。

1.事件与行为

在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等

1.1 绑定一个事件

如下是一个绑定点击操作的示例：

myChart.on('click', function(params) {
  // 控制台打印数据的名称
  console.log(params.name);
});

ECharts 支持常规的鼠标事件类型，包括：click | mousedown | mousemove | mouseup | mouseover | mouseout | globalout | contextmenu 事件。下面是一个点击饼图后打开相应的页面：

// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function(params) {
  window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

1.2 事件的回调函数

你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表，显示浮层等等，如下示例代码：

myChart.on('click', function(parmas) {
  $.get('detail?q=' + params.name, function(detail) {
    myChart.setOption({
      series: [
        {
          name: 'pie',
          // 通过饼图表现单个柱子中的数据分布
          data: [detail.data]
        }
      ]
    });
  });
});