Echarts中的通用配置

最新推荐文章于 2023-07-31 14:24:49 发布

H20220803

最新推荐文章于 2023-07-31 14:24:49 发布

阅读量248

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/H20220803/article/details/126167537

版权

本文详细介绍了Echarts图表中的通用配置，包括标题(title)的定制，如文字样式、边框等；tooltip的交互设置；toolbox工具栏的功能；以及legend图例的使用。通过实例展示如何为图表添加实用的交互和视觉元素。

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

Echarts中的通用配置

通用配置：就是任何图表都能使用的配置（和series同级别）

标题：title
提示：tooltip（用于配置鼠标滑过或者点击图表时的显示框）
工具按钮：toolbox
图例：legend
效果图

标题：title

      title: {
        text: "成绩",
        textStyle: {
          color: "#333",
        },
        borderWidth: 5, //标题边框的宽度
        borderColor: "#000", //标题边框的颜色
        borderRadius: 5, //标题边框的圆角
        left: 50, //标题边框距离左侧的位置
        top: 30, //标题边框距离上面的位置
      },

提示：tooltip

      tooltip: {
        // trigger: "item",
        trigger: "axis",
        triggerOn: "click",
        // formatter: "{b}的{a}成绩是{c}",
        formatter(arg) {
          // console.log(arg);
          return arg[0].name + "的分数是：" + arg[0].data;
        },
      },

工具按钮：toolbox

      toolbox: {
        feature: {
          saveAsImage: {}, //导出图片
          dataView: {}, //数据视图
          restore: {}, //重置数据
          dataZoom: {}, //区域缩放
          magicType: {
            type: ["bar", "line"], //动态图表类型的切换
          },
        },
      },

图例：legend

      legend: {
        data: ["语文", "数学"], //和series里面的name对应
      },
      series: [
        {
          name: "语文",
          type: "bar",
          data: yDataArr1,
        },
        {
          name: "数学",
          type: "bar",
          data: yDataArr2,
        },
      ],