一、相关配置

· xAxis
直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现
· yAxis
直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去series 下找数据进行图表的绘制
· series
系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

注意：配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的。
可由官方文档查看：配置项的官方文档网址

应用举例：

<body>
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    var option = {
      title: {
        text: '成绩', // 标题文字
        link: 'http://www.itcast.cn', // 标题的超链接
        textStyle: { // 标题样式设置
          color: 'red' // 标题文字
        }
      },
      xAxis: {
        type: 'category',  // 指明x轴为 类目轴
        data: ['小明', '小红', '小王'] // 为类目轴提供数据, 该数据是一个数组, 数组中的每个元素会呈现在x轴上
      },
      yAxis: {
        type: 'value'  // 指明x轴为 数值轴, 指明数值轴之后, 无需指定data
      },
      series: [
        {
          name: '语文', // 为图标起一个名称
          type: 'bar', // 用于指定图表类型，指明该图表类型为柱状图
          data: [70, 92, 87] // 为x轴的每一个元素, 指明呈现在y轴的数值
        }
      ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>

二、ECharts常用图表

ECharts基本代码结构：
1.引入js文件
2.DOM容器（必须在div 文件之下）
3.初始化对象
4.设置option（基本代码除了option以外剩下的内容都一样）
基本架构：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px;height:400px"></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))
        var option = {}
        mCharts.setOption(option)
     </script>
</body>
</html>

三、通用配置

使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置

1.标题: title

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

2.提示框: tooltip

tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框

属性

功能

trigger

鼠标移动到哪个部分进行显示

triggerOn

是否需要点击鼠标才能显示数据

formatter

将series中的值返回到图表内容中

注意：formatter可以通过字符串模板和回调函数实现功能
· 字符串模板

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

· 回调函数

var option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'click',
        formatter: function (arg) {
            return arg.name + ':' + arg.data
        }
    }
}

3.工具按钮: toolbox

toolbox 是 ECharts 提供的工具栏, 内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具，工具栏的按钮是配置在 feature 的节点之下

var option = {
	toolbox: {
		feature: {
			saveAsImage: {}, // 将图表保存为图片
			dataView: {}, // 是否显示出原始数据
			restore: {}, // 还原图表
			dataZoom: {}, // 数据缩放
			magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
				type: ['bar', 'line']
			}
		}
	}
}

4.图例: legend

legend 是图例,用于筛选类别,需要和 series 配合使用
legend 中的 data 是一个数组
legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致

var option = {
    legend: {
        data: ['语文', '数学']
    },
    xAxis: {
        type: 'category',
        data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '语文',
            type: 'bar',
            data: [88, 92, 63, 77, 94, 80, 72, 86]
        }
    }
}