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

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

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

目录

1.事件与行为

1.1 绑定一个事件 

1.2 事件的回调函数 

1.3 图标空白事件 

 2.服务端渲染

2.1 服务端 SVG 渲染

3.异步数据的加载与动态更新

3.1 获取数据后配置图标 

3.2 先设置后获取数据 

3.3 loading 动画

---

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]
        }
      ]
    });
  });
});

 在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 events 文档中有列出。

下面是监听一个图例开关的示例：

// 图例开关的行为只会触发 legendselectchanged 事件
myChart.on('legendselectchanged', function(params) {
  // 获取点击图例的选中状态
  var isSelected = params.selected[params.name];
  // 在控制台中打印
  console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
  // 打印所有图例的状态
  console.log(params.selected);
});

 在 ECharts 通过调用 myChart.dispatchAction({ type: '' }) 触发图表行为，统一管理了所有动作，下面示例演示了如何通过 dispatchAction 去轮流高亮饼图的每个扇形。

option = {
  title: {
    text: '饼图程序调用高亮示例',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

let currentIndex = -1;

setInterval(function() {
  var dataLen = option.series[0].data.length;
  // 取消之前高亮的图形
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  currentIndex = (currentIndex + 1) % dataLen;
  // 高亮当前图形
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
  // 显示 tooltip
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: currentIndex
  });
}, 1000);

1.3 图标空白事件 

 实现监听空白处的事件：

myChart.getZr().on('click', function(event) {
  // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
  if (!event.target) {
    // 点击在了空白处，做些什么。
  }
});

 2.服务端渲染

2.1 服务端 SVG 渲染

// 服务端代码
const echarts = require('echarts');

// 在 SSR 模式下第一个参数不需要再传入 DOM 对象
let chart = echarts.init(null, null, {
  renderer: 'svg', // 必须使用 SVG 模式
  ssr: true, // 开启 SSR
  width: 400, // 需要指明高和宽
  height: 300
});

// 像正常使用一样 setOption
chart.setOption({
  //...
});

// 输出字符串
const svgStr = chart.renderToSVGString();

// 如果不再需要图表，调用 dispose 以释放内存
chart.dispose();
chart = null;

 在浏览器中我们在setOption完之后 ECharts 就会自动进行渲染将结果绘制到页面中，后续也会在每一帧判断是否有动画需要进行重绘。Node.js 中我们在设置了ssr: true后则没有这个过程。取而代之我们使用了renderToSVGString，将当前的图表渲染到 SVG 字符串，进一步得再通过 HTTP Response 返回给前端或者缓存到本地

HTTP Response 返回给前端（这里以 Express.js为例）：

Express基于Node.js基础知识【1】全面总结 推荐收藏_express.js 教程-CSDN博客

res.writeHead(200, {
  'Content-Type': 'application/xml'
});
res.write(svgStr); // svgStr 是上面 chart.renderToSVGString() 得到的字符串
res.end();

或者保存到本地：

fs.writeFile('bar.svg', svgStr, 'utf-8');

如果你不希望有这个动画效果，可以在setOption的时候通过animation: false关闭动画。

setOption({
  animation: false
});

3.异步数据的加载与动态更新

3.1 获取数据后配置图标 

在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行

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

$.get('data.json').done(function(data) {
  // data 的结构:
  // {
  //     categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
  //     values: [5, 20, 36, 10, 10, 20]
  // }
  myChart.setOption({
    title: {
      text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {},
    xAxis: {
      data: data.categories
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: data.values
      }
    ]
  });
});

3.2 先设置后获取数据 

或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
  title: {
    text: '异步数据加载示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: []
    }
  ]
});

// 异步加载数据
$.get('data.json').done(function(data) {
  // 填入数据
  myChart.setOption({
    xAxis: {
      data: data.categories
    },
    series: [
      {
        // 根据名字对应到相应的系列
        name: '销量',
        data: data.data
      }
    ]
  });
});

3.3 loading 动画

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

 关于echarts的常用基础知识，如何绑定点击事件以及回调函数，图表空白事件、服务端如何渲染、异步数据如何加载等基础知识回顾完了，echarts丰富的图标以及功能远不止这些，其他关于echarts的知识请参考官网：Documentation - Apache ECharts

---

关于echarts的安装下载以及如何在项目中使用，echarts的常用的图标类型以及基本配置基础知识请参考：ECharts 数据可视化 入门基本知识 下载安装常用的图表 【1】-CSDN博客