Echarts之通用配置

上节我们学习了柱状图的基本配置和常用效果，我们已经跨出学会 ehcarts 的一小步。本节我会给大家介绍一些通用配置来更好的学习其他类型的图表

通用配置

什么是通用配置呢？ 任何图表都可以使用的配置。

一般常用的为以下四个：
⚪ 标题：title
⚪ 提示：tooltip
⚪ 工具按钮：toolbox
⚪ 图例：legend

title

标题组件，包含主标题和副标题。

标题我们常常要控制以下三个样式：
● 文字样式
● 标题边框
● 标题位置

更多样式设置请参考官方文档 titile

文字样式 textStyle

textStyle
属性配置很多，参考文档就好，这里就不列举了。

title: {
    text:'成绩', // 主标题文本，支持使用 \n 换行。
  textStyle: {
      color: '#aaa' // 文字样式有很多用到时参考文档
  }
}

点击查看【codepen】

标题边框 border

这几个是边框属性
borderWidth、borderColor、borderRadius

title: {
    text:'成绩', // 主标题文本，支持使用 \n 换行。
  textStyle: {
      color: '#aaa' // 文字样式有很多用到时参考文档
  },
  borderWidth: 1,    // 边框宽度
  borderColor: '#bbb', // 边框颜色
  borderRadius: 5,  // 边框圆角
}

点击查看【codepen】

标题位置 left…

标题与容器的间距，可以是具体的像素数值（如，20），也可以是相对于容器高宽百分比（如，’20%’）
left（离容器左侧的距离）、top（离容器上侧的距离）、right（离容器右侧的距离）、bottom（离容器下侧的距离）

title: {
    text:'成绩', // 主标题文本，支持使用 \n 换行。
  textStyle: {
      color: '#aaa' // 文字样式有很多用到时参考文档
  },
  borderWidth: 1,    // 边框宽度
  borderColor: '#bbb', // 边框颜色
  borderRadius: 5,  // 边框圆角
  left: 100,
  top: 10
}

点击查看【codepen】

tooltip

tooltip 是提示框组件，用于配置鼠标滑过或点击图表时的显示框。
我们在使用提示框组件时需要了解以下几个内容：
⚪ 触发类型：trigger，
⚪ 触发条件：triggerOn，
⚪ 格式化（提示框文字展示的样式）：formatter

触发类型 trigger

trigger 有三个可选值
item（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）
axis（坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用）
none（什么都不触发）
大家可以尝试下不同的可选值来观察图表的变化。

tooltip: {
  trigger: "item"
}

为 item 时，鼠标移入到柱子的内部才会生效。
点击查看【codepen】
为 axis 时，鼠标移入到坐标轴当中就会生效。
点击查看【codepen】
为 none 时，则不生效

触发条件 triggerOn

提示框触发的条件。有四个可选值 mousemove（鼠标移动时触发）、click（鼠标点击时触发）、mousemove|click（同时鼠标移动和点击时触发）、none（可以在其他条件下手动触发和隐藏）

由于默认就是鼠标移动时触发这里我们将triggerOn 改为 click

tooltip: {
    triggerOn: "click"
}

点击查看【codepen】

格式化 formatter

formatter 可以自定义提示框中的内容，支持字符串模板和回调函数两种形式。

字符串模板

可以通过字符串显示出自定义的内容，echarts 已经预置了一些模板变量供我们使用。
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等，在不同图表下具体含义不同。

更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。
示例

formatter: '{b}的成绩是{c}'

点击查看【codepen】

回调函数

通过回调函数，我们可以更加灵活的定制我们想要显示的内容。

// triggerOn 设置成 click 来打印一下 arg（只是一个形参的名字随便起的） 的内容
tooltip: {
    trigger: 'axis',
  triggerOn: 'click'
}
formatter: function(arg) {
  console.log('arg的内容',arg)
    return "自定义的内容"
}

arg 的内容

{
    "componentType": "series",
    "componentSubType": "bar",
    "componentIndex": 0,
    "seriesType": "bar",
    "seriesIndex": 0,
    "seriesId": "\u0000语文\u00000",
    "seriesName": "语文",
    "name": "大强",
    "dataIndex": 7,
    "data": 86,
    "value": 86,
    "color": "#5470c6",
    "dimensionNames": [
        "x",
        "y"
    ],
    "encode": {
        "x": [
            0
        ],
        "y": [
            1
        ]
    },
    "$vars": [
        "seriesName",
        "name",
        "value"
    ],
    "marker": "<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#5470c6;\"></span>"
}

接下来用 回调函数 的形式来显示成绩：

formatter: function(arg) {
  return arg.marker + arg.name + '的分数是:' + arg.value
}

点击查看【codepen】
使用回调函数可以帮助我们创造出各种各样的提示框，快动手试一下吧！

toolbox

工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
如果想要使用这几个工具需要添加 feature，它是工具的开关。
下面来举个例子，给 option 添加 toolbox

toolbox: {
    show: true,
  feature: {
      saveAsImage: {}, //导出图片
    dataView: {}, // 数据视图
    restore: {}, // 重置
    dataZoom: {}, // 区域缩放
    magicType: {
        type: ['bar','line'] // 动态图表类型的切换，这里设置了柱状图和折线图两种类型
    }
  }
}

点击查看【codepen】
可以看到我们的图表右上方就多出了几个图表，对应着相应的功能，直接点击试试吧。

官方文档 toolbox

legend

图例组件。
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

需要配合series使用

我们先给series再添加一个”数学对象”

series: {
        {
        name: '语文', // 名称：语文
      type: 'bar',    // 类型：柱状图
      data: yData1,
    },
    {
        name: '数学', 
      type: 'bar',
      data: yData2,
    }
}

接下来我们来配置 lenged

• legend 中的 data 是一个数组
• legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致
• 如果 data 没有被指定，会自动从当前系列中获取。

  legend:{
    data: ['语文'，'数学']
  }

  点击查看【codepen】
  还有很多具体的参数配置，快去官方文档看看吧。