Echarts 图表点击事件和图表容器中标签的显示.

目录

今天完成了关于俩张饼图分别的点击事件，现在简单写一下要领。

       首先js里写出俩张饼图.如图。

如何在项目里玩Echarts.

饼图分别的点击事件.

标签的显示.

---

今天完成了关于俩张饼图分别的点击事件，现在简单写一下要领。

       首先js里写出俩张饼图.如图。

 可能有的朋友刚接触Echarts为了方便大家学习下面讲一下如何运行Echarts.

如何在项目里玩Echarts.

我是用的vue，npm下载完然后配置一下就可以。具体可以查官网https://echarts.apache.org/zh/index.html

npm install echarts

然后页面js导入.

import * as echarts from "echarts";

饼图分别的点击事件.

一开始走了点弯路，用正常的点击事件获取不到点击的属性，后面翻看文档发现如图：

发现可以直接从series里获取到当前点击的饼图name.于是分别将第一个饼图name：one；第二个饼图name：two；.

然后写出点击事件（直接附代码）：

var vue = this;
    myChart.on("click", function (params) {
      if (params.seriesName == "one") {
        vue.$router.push("/跳转的页面名");
      } else if (params.seriesName == "two") {
        vue.$router.push("/跳转的页面名");
      }
    });

主要是： params.seriesName == "one" 来获取点击的饼图名

（点击事件跳转成功可以自定义加各种事件.）

标签的显示.

如图 发现第二张图里有标签的显示.

同样方法在文档里找这个配置项

 里面有个show默认为是true

代码加上

series: [
        {
          type: "pie",
          name: "one",
          radius: "75%",
          center: ["40%", "50%"],
          data: data,
          label: {
            position: "outer",
            alignTo: "none",
            bleedMargin: 5,
            //加入下行代码
            show:true, 
          },
          left: 0,
          right: "46.6667%",
          top: 0,
          bottom: 0,
        },]

在之前旧版本的话需要在show前面加一个如代码（现在可以直接在label里添加）：

 normal: {
              show: true,
            },

如图标签出现：

默认为是开启(show:true)一般来说不需要修改，如果不想要图例可以将show：false加上

show：true 开启图例

show：false 关闭图例