ECharts 图表的通用配置项

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
        }
      ]