Echarts学习笔记5（树形图、数据排序、主题、地图、图表自适应大小、加载动画效果、动画配置、echarts事件）

本文链接：https://blog.csdn.net/weixin_60968779/article/details/124506172

基本树形图

树图主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树，和右子树。

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart);
    let data = {// 注意，最外层是一个对象，代表树的根节点
      name: "层级1",// 节点的名称，当前节点 label 对应的文本
      children: [
        {
          name: "层级2",
          children: [
            {
              name: "层级3-1",
              children: [//子节点
                { name: "数据1", value: 3938 }, // value 值，只在 tooltip 中显示
                { name: "数据2", value: 3812 },
                { name: "数据3", value: 6714 },
                { name: "数据4", value: 743 },
              ],
            },
            {
              name: "层级3-2",
              children: [
                { name: "数据1", value: 3534 },
                { name: "数据2", value: 5731 },
                { name: "数据3", value: 7840 },
                { name: "数据4", value: 5914 },
                { name: "数据5", value: 3416 },
              ],
            },
          ],
        },
      ],
    };

    let options = {
      tooltip: {//提示框
        trigger: "item",//触发时机
      },
      series: [
        {
          type: "tree",//树图
          data: [data],
          top: "1%",//tree组件离容器顶部的距离
          left: "7%",
          bottom: "1%",
          right: "20%",
          symbolSize: 10,//标记的大小
          label: {//描述了每个节点所对应的文本标签的样式。
            position: "left",//标签的位置。
            verticalAlign: "middle",//文字垂直对齐方式
            align: "right",//文字水平对齐方式
            fontSize: 9,
          },
          leaves: {//叶子节点的特殊配置
            label: {//了叶子节点所对应的文本标签的样式
              position: "right",
              verticalAlign: "middle",
              align: "left",
            },
          },
          emphasis: {//树图中个图形和标签高亮的样式。
            focus: "descendant",//聚焦所有子孙节点
          },
          expandAndCollapse: true,//子树折叠和展开的交互由于绘图区域是有限的，而通常一个树图的节点可能会比较多，
          // 这样就会出现节点之间相互遮盖的问题。为了避免这一问题，可以将暂时无关的子树折叠收起，
          // 等到需要时再将其展开。如上面径向布局树图示例，节点中心用蓝色填充的就是折叠收起的子树，
          // 可以点击将其展开。
          animationDuration: 550,
          animationDurationUpdate: 750,
        },
      ],
    };

    myEcharts.setOption(options);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

方向切换数据图

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart);
    let data = {// 注意，最外层是一个对象，代表树的根节点
      name: "层级1",// 节点的名称，当前节点 label 对应的文本
      children: [
        {
          name: "层级2",
          children: [
            {
              name: "层级3-1",
              children: [//子节点
                { name: "数据1", value: 3938 }, // value 值，只在 tooltip 中显示
                { name: "数据2", value: 3812 },
                { name: "数据3", value: 6714 },
                { name: "数据4", value: 743 },
              ],
            },
            {
              name: "层级3-2",
              children: [
                { name: "数据1", value: 3534 },
                { name: "数据2", value: 5731 },
                { name: "数据3", value: 7840 },
                { name: "数据4", value: 5914 },
                { name: "数据5", value: 3416 },
              ],
            },
          ],
        },
      ],
    };

    let options = {
      tooltip: {//提示框
        trigger: "item",//触发时机
      },
      series: [
        {
          type: "tree",
          data: [data],
          top: "1%",
          left: "7%",
          bottom: "1%",
          right: "20%",
          symbolSize: 10,
            //树图中 正交布局 的方向
          // 水平 方向的 从左到右'LR'，从右到左'RL'；
          // 以及垂直方向的 从上到下'TB'，从下到上'BT'
          orient: 'BT',
          label: {
            position: "bottom",
             rotate: 90,//文字旋转
            verticalAlign: "middle",
            align: "right",
            fontSize: 9,
          },
          leaves: {
            label: {
              position: "right",
              verticalAlign: "middle",
              align: "left",
            },
          },
          emphasis: {
            focus: "descendant",
          },
          expandAndCollapse: true,
      
          animationDuration: 550,
          animationDurationUpdate: 750,
        },
      ],
    };

    myEcharts.setOption(options);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

数据排序

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- 2.echarts根结点根容器如果我们没有去指定当前容器的大小 echarts会按照0来进行处理 -->
    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.demoh);

    let option = {
      dataset: [
        //数据集组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。
        {
          dimensions: ["分类", "数量"], //设置分类数据
          source: [
            //原始数据。一般来说，原始数据表达的是二维表。
            ["Hannah Krause", 41],
            ["Zhao Qian", 20],
            ["Jasmin Krause ", 52],
            ["Li Lei", 37],
            ["Karle Neumann", 25],
            ["Adrian Groß", 19],
            ["Mia Neumann", 71],
          ],
        },
        {
          transform: {
            //数据改变
            type: "sort", //按照大小排序
            config: { dimension: "数量", order: "desc" }, //"sort" 数据转换器的“条件”
          },
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          interval: 0, //坐标轴刻度标签的显示间隔，在类目轴中有效。
          rotate: 30, //刻度标签旋转的角度
        },
      },
      yAxis: {},
      series: [
        //系列 配置图表的类型
        {
          type: "bar",
          encode: {
            //可以定义 data 的哪个维度被编码成什么。
            x: "分类", //x映射内容
            y: "数量",
          },
          datasetIndex: 1,
        },
      ],
    };
    // 绘制图表 setOption 配置图表的配置项
    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>

内置主题

echarts中默认主题有两个:light、dark

echarts.init(选取容器dom,'主题')

<template>
  <div class="about">
    <h1>This is an about page</h1>

    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    //echarts中默认主题有两个:light、dark
    let myChart = echarts.init(this.$refs.demoh,"dark");
    let xData = ["美食", "数码", "日化", "蔬菜", "熟食"];
    let yData = [88, 75, 20, 210, 35];
    let option = {
      xAxis: {
        data: xData,
        type: "category",
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          type: "bar",
          name: "销量",
          data: yData,
        },
      ],
    };

    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>

自定义主题

1.在主题编辑器中编辑主题

主题编辑器地址：主题编辑器 - Apache EChartshttps://echarts.apache.org/zh/theme-builder.html

2.下载对应主题json格式

3.创建js文件把刚才下载的文件写入并且暴露

let roma=你的主题json

export default roma

4.引用主题文件

import roma from "../assets/roma"

5.在init方法中使用主题

中国地图展示效果

1.准备echarts基本结构

2.设置中国地图的矢量数据创建js文件（在其中创建变量接受json数据并且暴露）

地图数据下载地址:https://datav.aliyun.com/portal/school/atlas/area_selectorhttps://datav.aliyun.com/portal/school/atlas/area_selector

3.在组件中获取地图矢量数据（引用数据json）

4.使用地图数据创建地图

<template>
  <div class="about">
    <h1>This is an about page</h1>

    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
// 引用的就是中国各省份的矢量数据
import cmap from "../assets/roma"
export default {
  mounted() {
    
    let myChart = echarts.init(this.$refs.demoh);
   echarts.registerMap("chinaMap",cmap)//使用 registerMap 注册的地图名称。
    let option = {
     geo:{//地理坐标系组件。地理坐标系组件用于地图的绘制
       type:"map",
       map:"chinaMap",//使用 registerMap 注册的地图名称
      //  默认设置完地图是固定死的不能拖动
      roam:true,//否开启鼠标缩放和平移漫游。默认不开启。
      zoom :10,//当前视角的缩放比例。越大比例越大
      center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309
      label:{//地图上显示文字提示信息
        show:true,
        color:"#ff6600",
        fontSize:10//字体大小
      },
      itemStyle:{//地图区域的多边形 图形样式。
        areaColor:"#ff6600"//地图区域的颜色。
      }
     }
    };

    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>

省份地图显示

同中国地图使用方式就是切换地图数据即可

地图标记设置与效果

<template>
  <div class="about">
    <h1>This is an about page</h1>

    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

import cmap from "../assets/roma";
export default {
  mounted() {
    // 设置气泡点数据
    let data = [
      {
        value: [108.956239, 34.268309],
      },
    ];

    let myChart = echarts.init(this.$refs.demoh);
    echarts.registerMap("chinaMap", cmap);
    let option = {
      geo: {
        type: "map",
        map: "chinaMap",

        roam: true,
      },
      series: [
        {
          type: "effectScatter", //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
          coordinateSystem: "geo", //使用什么坐标系geo使用地理坐标系
          data,
          // 这个时候地图上就会有点的涟漪效果
          rippleEffect: {
            //涟漪特效相关配置。
            number: 2, //波纹的数量。
            scale: 4, //动画中波纹的最大缩放比例
          },
          //  label:{
          //    show:true
          //  },
          itemStyle: {
            color: "red",
          },
        },
        // 也可以绘制点效果
        {
          symbolSize: 20,
          data: [
            {
              name: "北京市", // 数据项名称，在这里指地区名称
              value: [
                // 数据项值
                116.46, // 地理坐标，经度
                39.92, // 地理坐标，纬度
                340, // 北京地区的数值
              ],
            },
          ],
          type: "scatter",
          coordinateSystem: "geo", series坐标系类型
        },
      ],
    };

    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>

图表自适应大小

当浏览器大小改变的时候我们需要让图表一同改变这个时候就会用到图表自适应大小

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.myChart);
    let xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    let option = {
      xAxis: {
        type: "category",
        data: xData,
      },
      yAxis: {
        type: "value",
      },

      series: [
        {
          name: "美食",
          type: "line",
          stack: "num",
          data: [120, 132, 101, 134, 90, 230, 210],
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
        },
        {
          name: "日化",
          type: "line",
          stack: "num",
          data: [220, 182, 191, 234, 290, 330, 310],
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
        },
        {
          name: "熟食",
          type: "line",
          stack: "num",
          data: [150, 232, 201, 154, 190, 330, 410],
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
        },
      ],
    };
    myChart.setOption(option);

    // 监听页面的大小
    window.addEventListener("resize", () => {
      myChart.resize()
    });
  },
};
</script>

<style>
#myChart {
  width: 100%;
  height: 500px;
  border: 1px solid red;
}
</style>

图表加载动画效果

myChart.showLoading();开始等待

myChart.hideLoading();关闭等待

1.设置json-server模拟数据

（1）全局下载 npm install -g json-server

（2）新建mock文件夹并且在其中创建json文件设置数据

（3）终端cd到mock文件夹下启动 json-server --watch xx.json --port 端口号

2.页面请求数据并且设置等待效果

<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
// import {mapData} from "../assets/mapData.js"
export default {
  data() {
    return {
      echartsData: {},
    };
  },
  methods: {
    // 获取json-server数据
    async linkData() {
      let mapnum = await axios({ url: "http://localhost:3000/one" });
      console.log(mapnum.data);
      this.echartsData = mapnum.data;
    },
  },

  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);
    // 设置开始等待
    myChart.showLoading();

    // 调用数据请求方法
    this.linkData().then(() => {
      myChart.hideLoading();
      // 2.设置echarts数据

      let option = {
        title: {
          text: "饼状图",
          subtext: "基本设置",
          left: "center", //设置位置居中
        },
        tooltip: {
          trigger: "item", //触发类型item数据项图形触发
        },
        legend: {
          orient: "vertical", //图例列表的布局朝向vertical纵向
          left: "left",
        },
        series: [
          {
            name: "销售量",
            type: "pie",
            // 设置环形图
            radius: ["40%", "70%"], //饼图的半径。数组的第一项是内半径，第二项是外半径。
            // 设置环形图
            label: {
              //饼图图形上的文本标签
              show: true,
              position: "inside", //outside饼图扇区外侧inside饼图扇区内部center在饼图中心位置
              color: "yellow",
            },
            labelLine: {
              //标签的视觉引导线配置
              show: false,
            },
            roseType: "area", //是否展示成南丁格尔图，通过半径区分数据大小
            itemStyle: {
              //设置内容样式
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            data: this.echartsData,
          },
        ],
      };
      // 4.设置图表绘制图表
      myChart.setOption(option);
    });
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

图表动画配置

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.demoh);
    let xData = ["美食", "数码", "日化", "蔬菜", "熟食"];
    let yData = [88, 75, 20, 210, 35]; 
    let option = {
      animation:true,//是否开启动画。
      animationThreshold:5,//是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
      animationDuration:2000,//初始动画的时长
      animationEasing:"linear",//初始动画的缓动效果。官方更多解释：https://echarts.apache.org/examples/zh/editor.html?c=line-easing
      animationDelay:1000,//初始动画的延迟
      xAxis: {
        type: "value",
      },
      yAxis: {
        data: xData,
        type: "category",
      },
      series: [
        {
          type: "bar",
          name: "销量",
          data: yData,
          barWidth: 50, 
          itemStyle: {
            normal: {
              color: function (params) {
                let colorList = [
                  "#c23531",
                  "#2f4554",
                  "#61a0a8",
                  "#d48265",
                  "#91c7ae",
                ];
                return colorList[params.dataIndex];
              },
            },
          },
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },

          markLine: {
            data: [
              {
                type: "average",
                name: "平均值",
              },
            ],
          },
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>

echarts 事件

ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。

ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.demoh);
    // 事件
    // ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。

    // ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。
    myChart.on("click", function (params) {
      // 在用户点击后控制台打印数据的名称
      // params对象的属性
      // componentType 当前点击的图形元素所属的组件名称
      // seriesType 系列类型

      // seriesName 系列名称。
      // name数据名，类目名
      // data传入的原始数据项
      // value传入的数据值

      console.log(params);
    });

    let xData = ["美食", "数码", "日化", "蔬菜", "熟食"];
    let yData = [88, 75, 20, 210, 35];
    let option = {
      xAxis: {
        type: "value",
      },
      yAxis: {
        data: xData,
        type: "category",
      },
      series: [
        {
          type: "bar",
          name: "销量",
          data: yData,
          barWidth: 50,
          itemStyle: {
            normal: {
              color: function (params) {
                let colorList = [
                  "#c23531",
                  "#2f4554",
                  "#61a0a8",
                  "#d48265",
                  "#91c7ae",
                ];
                return colorList[params.dataIndex];
              },
            },
          },
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },

          markLine: {
            data: [
              {
                type: "average",
                name: "平均值",
              },
            ],
          },
        },
  
      ],
    };
    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>

有多个图形怎么监听呢？

使用 query 只对指定的组件的图形元素的触发回调：

chart.on(eventName, query, handler);

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

下面就在添加一个折线图

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="myecharts" ref="demoh"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.demoh);
    // 事件
    // ECharts 中我们可以通过监听用户的操作行为来回调对应的函数。

    // ECharts 通过 on 方法来监听用户的行为，例如监控用户的点击行为。
    // myChart.on("click", function (params) {
      // 在用户点击后控制台打印数据的名称
      // params对象的属性
      // componentType 当前点击的图形元素所属的组件名称
      // seriesType 系列类型

      // seriesName 系列名称。
      // name数据名，类目名
      // data传入的原始数据项
      // value传入的数据值

    //   console.log(params);
    // });


    // 只对折线图做出反应
    //   myChart.on("click", 'series.line',function (params) {
    //   console.log(params);
    // });
    // 只对某一项最做出反应
    // 比如对折线图的数码项点击做出反应  
    // myChart.on("click",{name:"数码"},function (params) {
    //   console.log(params);
    // });
    // 但是发现折线图柱状图都可以
    // 只对折线图生效
    myChart.on("click",{seriesIndex: 1,name:"数码"},function (params) {
      console.log(params);
    });

    let xData = ["美食", "数码", "日化", "蔬菜", "熟食"];
    let yData = [88, 75, 20, 210, 35];
    let option = {
      xAxis: {
        type: "value",
      },
      yAxis: {
        data: xData,
        type: "category",
      },
      series: [
        {
          type: "bar",
          name: "销量",
          data: yData,
          barWidth: 50,
          itemStyle: {
            normal: {
              color: function (params) {
                let colorList = [
                  "#c23531",
                  "#2f4554",
                  "#61a0a8",
                  "#d48265",
                  "#91c7ae",
                ];
                return colorList[params.dataIndex];
              },
            },
          },
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },

          markLine: {
            data: [
              {
                type: "average",
                name: "平均值",
              },
            ],
          },
        },
  // 在添加一个折线图
        {
          data: [150, 230, 224, 218, 135],
          type: "line", //设置系列为折线图
          smooth: true, //是否平滑曲线显示如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5

          markPoint: {
            //图表标注。
            data: [
              { type: "max", name: "Max" },
              { type: "min", name: "Min" },
            ],
          },
          markLine: {
            //图表标线。
            data: [{ type: "average", name: "Avg" }],
          },
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>
<style scoped>
#myecharts {
  width: 600px;
  height: 600px;
  border: 2px solid red;
}
</style>