ECharts 图表的通用配置项

最新推荐文章于 2024-09-17 07:23:55 发布

予你@。

最新推荐文章于 2024-09-17 07:23:55 发布

阅读量597

点赞数 4

分类专栏： js 文章标签： echarts

本文链接：https://blog.csdn.net/weixin_44948981/article/details/124421140

版权

js 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

本文详细介绍了Echarts的配置项，包括标题配置，如颜色、边框和位置；提示工具的设置，如触发类型和文字格式化；工具箱功能，如下载图片和数据视图；以及图例和系列数据的定义，用于展示条形图。通过这些配置，可以自定义美观且交互性强的数据可视化图表。

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

1 title ：标题配置

    title: { 
        text: '语文成绩', // 标题文字
        textStyle: { // 标题文字样式设置
          color: 'skyblue'
        },
        borderWidth: 5, // 标题边框宽度
        borderColor: 'blue', // 标题边框颜色
        borderRadius: 5, // 标题边框圆角
        left: 50, // 标题距离左边的距离
        top: 10 // 标题距离顶部的距离
      },

2 tooltip：提示工具

    tooltip: { 
        // trigger: 'item' 工具提示的类型 item代表的是每个柱本身, axis代表的是坐标轴
        trigger: 'axis',
        triggerOn: 'click', // 触发时机, click代表点击, mouseOver代表鼠标移过
        // 模板的格式
        // formatter: '{b} 的成绩是 {c}'
        //  传入一个回调函数
        formatter: function(arg){ // 文字格式化
          // 点击的时候触发这个函数
          console.log(arg);
          return arg[0].name + '的分数是:' + arg[0].data
        }
      },

3 toolbox 工具箱按钮配置

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

4 legend 需要配合series使用可以添加多个图列

    legend: { 
        // 图例, 图例中的data数据来源于series中每个对象的name, 需要和series的name一致
        data: ['语文', '数学']
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: yDataArr1
        },
        {
          name: '数学',
          type: 'bar',
          data: yDataArr2
        }
      ]