可视化Echarts数据排序与事件

最新推荐文章于 2024-04-15 16:42:15 发布

open_test01

最新推荐文章于 2024-04-15 16:42:15 发布

阅读量710

点赞数 1

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/dafsq/article/details/130323478

版权

文章展示了如何在Echarts中实现数据排序，通过设置dataset的transform属性进行降序排序，并提供了点击事件监听的例子，当图表被点击时会在控制台打印出点击元素的信息。此外，还提及了针对不同图形类型的事件监听，如series,series.line,dataZoom,xAxis.category等。

摘要由CSDN通过智能技术生成

数据排序

Echarts中的事件

数据排序

以下代码实现了数据排序的效果：

<template>
  <div ref="ec" id="sec"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    let mc = echarts.init(this.$refs.ec);

    let option = {
      dataset: [
        {
            //设置数据分类
          dimensions: ["类别", "数量"],
            //设置分类数据
          source: [
            ["数据1", 100],
            ["数据2", 200],
            ["数据3", 50],
            ["数据4", 120],
            ["数据5", 60]
          ]
        },
        {
          transform: { //设置排序
            type: "sort",
            config: { dimension: "数量", order: "desc" }
          }
        }
      ],
      xAxis: {
        type: "category", //x轴设置为类目轴
        // 映射
        encode: { x: "类别" }
      },
      yAxis: {},
      series: [
        {
          type: "bar",
          // 映射
          encode: { x: "类别", y: "数量" },
          datasetIndex:1 //对数据索引值处数据进行排序
        }
      ]
    };

    mc.setOption(option);
  }
};
</script>

<style>
#sec {
  width: 500px;
  height: 500px;
  border: 1px solid royalblue;
  margin: 0 auto;
}
</style>

Echarts中的事件

let mc = echarts.init(this.$refs.ec);
    //事件 on方法监听
    mc.on("click",(p) =>{
      console.log(p)
    });

当随便点击图表中的内容时就在控制台打印出了元素的对象

多个图形的监听

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});