数据排序

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 () {...});