[TOC]
  • ECharts 是一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观、交互丰富，可高度个性化定制的数据可视化图表

    基本使用

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1. 引入 echarts.js 文件 -->
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<!-- 2. 准备一个呈现图标的盒子 -->
<div style="width: 600px; height: 400px;"></div>
<script>
  // 3. 初始化 echarts 实例对象
  // 参数，dom，决定图标最终呈现的位置
  let myCharts = echarts.init(document.querySelector('div'))
  // 4. 准备配置项
  let option = {
    xAxis: {
      type: 'category',
      data: ['小明', '小红', '小王'],
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        data: [70, 92, 87]
      }
    ]
  }
  // 5. 将配置项设置给 echarts 实例对象
  myCharts.setOption(option)
</script>
</body>
</html>

    生成一个简单的柱状统计图

相关配置项

  • xAxis：直角坐标系中的 X 轴

  • yAxis：直角坐标系中的 Y 轴

  • serires：系列列表，每个系列通过 type 决定自己的图标类型

    ECharts常用图表

  1. 柱状图（bar）：描述分类数据，呈现的是每一个分类中有多少
  2. 折线图（line）：分析数据随时间的变化趋势
  3. 散点图（scatter/effectScatter）：推断不同维度数据之间的相关性
  4. 饼图（pie）：快速了解不同分类数据的占比情况
  5. 地图（map）：宏观地看出不同地理位置上数据的差异
  6. 雷达图（radar）：分析多个维度的数据与标准数据的对比情况
  7. 仪表盘图（gauge）：更直观地表现出某个指标的进度或实际情况

    ECharts常用属性

    series

  • markPoint：最大值和最小值

    // 在 series 对象节点下
markPoint: {
  data: [
  {
      type: 'max', name: '最大值'
  },
  {
      type: 'min', name: '最小值'
  }
]
},

  • markLine：平均值

    // 在 series 对象节点下
markLine: {
data: [
  {
    type: 'average', name: '平均值'
  }
]
},

  • label：显示图表内的数据

    • show：是否展示图表内数据，默认值为 false
    • rotate：将图表内的数据进行旋转（传入一个数值）
    • position：图表数据显示的位置，默认值为 inside（柱状图内部）
      label: {
show: true,
rotate: 60,
position: 'inside'
},

  • barWidth：柱的宽度

    barWidth: '30%'

  • 横向柱状图

    xAxis: {
type: 'value' // 数值轴
},
yAxis: {
type: 'category', // 类目轴
data: xData
},

    通用配置（写在 option 对象下）

  • 标题：title

    • 文字样式
      • textStyle：标题颜色样式，传入一个对象
    • 标题边框
      • borderWidth：标题边框宽度
      • borderColor：标题边框颜色
      • borderRadius：标题边框圆角
    • 标题位置
      • left
      • top
      • right
      • bottom
        title: {
text: '成绩展示',
// 标题文字颜色
textStyle: {
color: 'aqua'
},
// 标题边框
borderWidth: 2, // 宽度
borderColor: 'aqua', // 颜色
borderRadius: 5, // 圆角
left: 250 // 位置
},

  • 提示：tooltip（提示框组件，用于配置鼠标划过或i单机图表时的显示框）

    • trigger：触发类型
      • item：鼠标移入图表内部
      • axis：鼠标移入图表范围内
    • triggerOn：触发时机
      • mouseover：鼠标在图表上时显示，默认可以不用写
      • click：鼠标点击图表时显示
    • formatter：格式化（呈现在提示框中的内容）
      • 字符串模板
      • 回调函数
        tooltip: {
// 触发类型
// trigger: 'item' // 鼠标移入图表内部
trigger: 'axis', // 鼠标移入图表范围内
// 触发时机
// triggerOn: 'mouseover'
triggerOn: 'click', // 鼠标点击图表时显示
// 格式化
// formatter: '{b}: {c}' // 字符串模板
formatter(arg) { // 回调函数
console.log(arg);
return arg[0].name + ': ' + arg[0].data
}
},

  • 工具按钮：toolbox（工具栏）

    • 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
    • saveAsImage，dataView，restore、dataZoom、magicType
      toolbox: {
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {  // 动态图表类型切换
 type: ['bar', 'line']  // 柱状图和折线图
}
}
},

  • 图例：legend（筛选系列，需要和 serires 配合使用）

    • legend 中的 data 是一个数组
    • legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致

折线图（line）

常见效果（series对象下）

标记

  • markPoint：最大值 & 最小值
  • markLine：平均值
  • markArea：标注区间
    // 最大值 & 最小值
markPoint: {
data: [
  {
    type: 'max'
  },
  {
    type: 'min'
  }
]
},
// 平均值
markLine: {
data: [
  {
    type: 'average'
  }
]
},
// 标注区间
markArea: {
data: [
  [
    {
      xAxis: '1月'
    },
    {
      xAxis: '2月'
    }
  ],
  [
    {
      xAxis: '7月'
    },
    {
      xAxis: '8月'
    }
  ]
]
},

线条控制

  • smooth：平滑
  • lineStyle：风格
    // 平滑
smooth: true,
// 风格
lineStyle: { // 线条样式
color: 'aqua', // 线条颜色
type: 'dashed' // 虚线
// type: 'dotted' // 点线
// type: 'solid' // 实线
},

填充风格

  • areaStyle：填充风格
    areaStyle: { // 填充样式
color: 'aqua' // 颜色
}

紧挨边缘

  • boundaryGap：紧挨边缘
    • 写在 xAxis 对象下
      xAxis: {
type: 'category', // 类目轴
data: xData,
boundaryGap: false
},

缩放

  • scale：脱离0值比例

    yAxis: {
type: 'value', // 数值轴
scale: true // 允许缩放
},

    堆叠图

  • stack: 'all';：堆叠效果

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px;"></div>

<script>
  let myCharts = echarts.init(document.querySelector('div'))
  let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  let yData = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600];
  let yData1 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300, 1900, 1500, 1800, 200];
  let option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category', // 类目轴
      data: xData,
      boundaryGap: false
    },
    yAxis: {
      type: 'value' // 数值轴
    },
    series: [
      {
        name: '康师傅',
        type: 'line',
        data: yData,
        // 堆叠效果
        stack: 'all',
        // 填充区域
        areaStyle: {},
        smooth: true
      },
      {
        name: '统一',
        type: 'line',
        data: yData1,
        // 堆叠效果
        stack: 'all',
        // 填充区域
        areaStyle: {},
        smooth: true
      }
    ]
  }
  myCharts.setOption(option)
</script>
</body>
</html>

    散点图（scatter/effectScatter）

  • 散点图可以帮助我们推断出变量间的相关性

  • 图表类型：在 series 下设置 type: scatter，xAxis 和 yAxis 的 type 都要设置为 value

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px;"></div>

<script>
  let myCharts = echarts.init(document.querySelector('div'))
  var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166, "weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, { "gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female", "height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9, "weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, { "gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female", "height": 160, "weight": 50 }, { "gender": "female", "height": 147.2, "weight": 49.8 }, { "gender": "female", "height": 168.2, "weight": 49.2 }, { "gender": "female", "height": 175, "weight": 73.2 }, { "gender": "female", "height": 157, "weight": 47.8 }, { "gender": "female", "height": 167.6, "weight": 68.8 }, { "gender": "female", "height": 159.5, "weight": 50.6 }, { "gender": "female", "height": 175, "weight": 82.5 }, { "gender": "female", "height": 166.8, "weight": 57.2 }, { "gender": "female", "height": 176.5, "weight": 87.8 }, { "gender": "female", "height": 170.2, "weight": 72.8 }, { "gender": "female", "height": 174, "weight": 54.5 }, { "gender": "female", "height": 173, "weight": 59.8 }, { "gender": "female", "height": 179.9, "weight": 67.3 }, { "gender": "female", "height": 170.5, "weight": 67.8 }, { "gender": "female", "height": 160, "weight": 47 }, { "gender": "female", "height": 154.4, "weight": 46.2 }, { "gender": "female", "height": 162, "weight": 55 }, { "gender": "female", "height": 176.5, "weight": 83 }, { "gender": "female", "height": 160, "weight": 54.4 }, { "gender": "female", "height": 152, "weight": 45.8 }, { "gender": "female", "height": 162.1, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 73.2 }, { "gender": "female", "height": 160.2, "weight": 52.1 }, { "gender": "female", "height": 161.3, "weight": 67.9 }, { "gender": "female", "height": 166.4, "weight": 56.6 }, { "gender": "female", "height": 168.9, "weight": 62.3 }, { "gender": "female", "height": 163.8, "weight": 58.5 }, { "gender": "female", "height": 167.6, "weight": 54.5 }, { "gender": "female", "height": 160, "weight": 50.2 }, { "gender": "female", "height": 161.3, "weight": 60.3 }, { "gender": "female", "height": 167.6, "weight": 58.3 }, { "gender": "female", "height": 165.1, "weight": 56.2 }, { "gender": "female", "height": 160, "weight": 50.2 }, { "gender": "female", "height": 170, "weight": 72.9 }, { "gender": "female", "height": 157.5, "weight": 59.8 }, { "gender": "female", "height": 167.6, "weight": 61 }, { "gender": "female", "height": 160.7, "weight": 69.1 }, { "gender": "female", "height": 163.2, "weight": 55.9 }, { "gender": "female", "height": 152.4, "weight": 46.5 }, { "gender": "female", "height": 157.5, "weight": 54.3 }, { "gender": "female", "height": 168.3, "weight": 54.8 }, { "gender": "female", "height": 180.3, "weight": 60.7 }, { "gender": "female", "height": 165.5, "weight": 60 }, { "gender": "female", "height": 165, "weight": 62 }, { "gender": "female", "height": 164.5, "weight": 60.3 }, { "gender": "female", "height": 156, "weight": 52.7 }, { "gender": "female", "height": 160, "weight": 74.3 }, { "gender": "female", "height": 163, "weight": 62 }, { "gender": "female", "height": 165.7, "weight": 73.1 }, { "gender": "female", "height": 161, "weight": 80 }, { "gender": "female", "height": 162, "weight": 54.7 }, { "gender": "female", "height": 166, "weight": 53.2 }, { "gender": "female", "height": 174, "weight": 75.7 }, { "gender": "female", "height": 172.7, "weight": 61.1 }, { "gender": "female", "height": 167.6, "weight": 55.7 }, { "gender": "female", "height": 151.1, "weight": 48.7 }, { "gender": "female", "height": 164.5, "weight": 52.3 }, { "gender": "female", "height": 163.5, "weight": 50 }, { "gender": "female", "height": 152, "weight": 59.3 }, { "gender": "female", "height": 169, "weight": 62.5 }, { "gender": "female", "height": 164, "weight": 55.7 }, { "gender": "female", "height": 161.2, "weight": 54.8 }, { "gender": "female", "height": 155, "weight": 45.9 }, { "gender": "female", "height": 170, "weight": 70.6 }, { "gender": "female", "height": 176.2, "weight": 67.2 }, { "gender": "female", "height": 170, "weight": 69.4 }, { "gender": "female", "height": 162.5, "weight": 58.2 }, { "gender": "female", "height": 170.3, "weight": 64.8 }, { "gender": "female", "height": 164.1, "weight": 71.6 }, { "gender": "female", "height": 169.5, "weight": 52.8 }, { "gender": "female", "height": 163.2, "weight": 59.8 }, { "gender": "female", "height": 154.5, "weight": 49 }, { "gender": "female", "height": 159.8, "weight": 50 }, { "gender": "female", "height": 173.2, "weight": 69.2 }, { "gender": "female", "height": 170, "weight": 55.9 }, { "gender": "female", "height": 161.4, "weight": 63.4 }, { "gender": "female", "height": 169, "weight": 58.2 }, { "gender": "female", "height": 166.2, "weight": 58.6 }, { "gender": "female", "height": 159.4, "weight": 45.7 }, { "gender": "female", "height": 162.5, "weight": 52.2 }, { "gender": "female", "height": 159, "weight": 48.6 }, { "gender": "female", "height": 162.8, "weight": 57.8 }, { "gender": "female", "height": 159, "weight": 55.6 }, { "gender": "female", "height": 179.8, "weight": 66.8 }, { "gender": "female", "height": 162.9, "weight": 59.4 }, { "gender": "female", "height": 161, "weight": 53.6 }, { "gender": "female", "height": 151.1, "weight": 73.2 }, { "gender": "female", "height": 168.2, "weight": 53.4 }, { "gender": "female", "height": 168.9, "weight": 69 }, { "gender": "female", "height": 173.2, "weight": 58.4 }, { "gender": "female", "height": 171.8, "weight": 56.2 }, { "gender": "female", "height": 178, "weight": 70.6 }, { "gender": "female", "height": 164.3, "weight": 59.8 }, { "gender": "female", "height": 163, "weight": 72 }, { "gender": "female", "height": 168.5, "weight": 65.2 }, { "gender": "female", "height": 166.8, "weight": 56.6 }, { "gender": "female", "height": 172.7, "weight": 105.2 }, { "gender": "female", "height": 163.5, "weight": 51.8 }, { "gender": "female", "height": 169.4, "weight": 63.4 }, { "gender": "female", "height": 167.8, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 47.6 }, { "gender": "female", "height": 167.6, "weight": 63 }, { "gender": "female", "height": 161.2, "weight": 55.2 }, { "gender": "female", "height": 160, "weight": 45 }, { "gender": "female", "height": 163.2, "weight": 54 }, { "gender": "female", "height": 162.2, "weight": 50.2 }, { "gender": "female", "height": 161.3, "weight": 60.2 }, { "gender": "female", "height": 149.5, "weight": 44.8 }, { "gender": "female", "height": 157.5, "weight": 58.8 }, { "gender": "female", "height": 163.2, "weight": 56.4 }, { "gender": "female", "height": 172.7, "weight": 62 }, { "gender": "female", "height": 155, "weight": 49.2 }, { "gender": "female", "height": 156.5, "weight": 67.2 }, { "gender": "female", "height": 164, "weight": 53.8 }, { "gender": "female", "height": 160.9, "weight": 54.4 }, { "gender": "female", "height": 162.8, "weight": 58 }, { "gender": "female", "height": 167, "weight": 59.8 }, { "gender": "female", "height": 160, "weight": 54.8 }, { "gender": "female", "height": 160, "weight": 43.2 }, { "gender": "female", "height": 168.9, "weight": 60.5 }, { "gender": "female", "height": 158.2, "weight": 46.4 }, { "gender": "female", "height": 156, "weight": 64.4 }, { "gender": "female", "height": 160, "weight": 48.8 }, { "gender": "female", "height": 167.1, "weight": 62.2 }, { "gender": "female", "height": 158, "weight": 55.5 }, { "gender": "female", "height": 167.6, "weight": 57.8 }, { "gender": "female", "height": 156, "weight": 54.6 }, { "gender": "female", "height": 162.1, "weight": 59.2 }, { "gender": "female", "height": 173.4, "weight": 52.7 }, { "gender": "female", "height": 159.8, "weight": 53.2 }, { "gender": "female", "height": 170.5, "weight": 64.5 }, { "gender": "female", "height": 159.2, "weight": 51.8 }, { "gender": "female", "height": 157.5, "weight": 56 }, { "gender": "female", "height": 161.3, "weight": 63.6 }, { "gender": "female", "height": 162.6, "weight": 63.2 }, { "gender": "female", "height": 160, "weight": 59.5 }, { "gender": "female", "height": 168.9, "weight": 56.8 }, { "gender": "female", "height": 165.1, "weight": 64.1 }, { "gender": "female", "height": 162.6, "weight": 50 }, { "gender": "female", "height": 165.1, "weight": 72.3 }, { "gender": "female", "height": 166.4, "weight": 55 }, { "gender": "female", "height": 160, "weight": 55.9 }, { "gender": "female", "height": 152.4, "weight": 60.4 }, { "gender": "female", "height": 170.2, "weight": 69.1 }, { "gender": "female", "height": 162.6, "weight": 84.5 }, { "gender": "female", "height": 170.2, "weight": 55.9 }, { "gender": "female", "height": 158.8, "weight": 55.5 }, { "gender": "female", "height": 172.7, "weight": 69.5 }, { "gender": "female", "height": 167.6, "weight": 76.4 }, { "gender": "female", "height": 162.6, "weight": 61.4 }, { "gender": "female", "height": 167.6, "weight": 65.9 }, { "gender": "female", "height": 156.2, "weight": 58.6 }, { "gender": "female", "height": 175.2, "weight": 66.8 }, { "gender": "female", "height": 172.1, "weight": 56.6 }, { "gender": "female", "height": 162.6, "weight": 58.6 }, { "gender": "female", "height": 160, "weight": 55.9 }, { "gender": "female", "height": 165.1, "weight": 59.1 }, { "gender": "female", "height": 182.9, "weight": 81.8 }, { "gender": "female", "height": 166.4, "weight": 70.7 }, { "gender": "female", "height": 165.1, "weight": 56.8 }, { "gender": "female", "height": 177.8, "weight": 60 }, { "gender": "female", "height": 165.1, "weight": 58.2 }, { "gender": "female", "height": 175.3, "weight": 72.7 }, { "gender": "female", "height": 154.9, "weight": 54.1 }, { "gender": "female", "height": 158.8, "weight": 49.1 }, { "gender": "female", "height": 172.7, "weight": 75.9 }, { "gender": "female", "height": 168.9, "weight": 55 }, { "gender": "female", "height": 161.3, "weight": 57.3 }, { "gender": "female", "height": 167.6, "weight": 55 }, { "gender": "female", "height": 165.1, "weight": 65.5 }, { "gender": "female", "height": 175.3, "weight": 65.5 }, { "gender": "female", "height": 157.5, "weight": 48.6 }, { "gender": "female", "height": 163.8, "weight": 58.6 }, { "gender": "female", "height": 167.6, "weight": 63.6 }, { "gender": "female", "height": 165.1, "weight": 55.2 }, { "gender": "female", "height": 165.1, "weight": 62.7 }, { "gender": "female", "height": 168.9, "weight": 56.6 }, { "gender": "female", "height": 162.6, "weight": 53.9 }, { "gender": "female", "height": 164.5, "weight": 63.2 }, { "gender": "female", "height": 176.5, "weight": 73.6 }, { "gender": "female", "height": 168.9, "weight": 62 }, { "gender": "female", "height": 175.3, "weight": 63.6 }, { "gender": "female", "height": 159.4, "weight": 53.2 }, { "gender": "female", "height": 160, "weight": 53.4 }, { "gender": "female", "height": 170.2, "weight": 55 }, { "gender": "female", "height": 162.6, "weight": 70.5 }, { "gender": "female", "height": 167.6, "weight": 54.5 }, { "gender": "female", "height": 162.6, "weight": 54.5 }, { "gender": "female", "height": 160.7, "weight": 55.9 }, { "gender": "female", "height": 160, "weight": 59 }, { "gender": "female", "height": 157.5, "weight": 63.6 }, { "gender": "female", "height": 162.6, "weight": 54.5 }, { "gender": "female", "height": 152.4, "weight": 47.3 }, { "gender": "female", "height": 170.2, "weight": 67.7 }, { "gender": "female", "height": 165.1, "weight": 80.9 }, { "gender": "female", "height": 172.7, "weight": 70.5 }, { "gender": "female", "height": 165.1, "weight": 60.9 }, { "gender": "female", "height": 170.2, "weight": 63.6 }, { "gender": "female", "height": 170.2, "weight": 54.5 }, { "gender": "female", "height": 170.2, "weight": 59.1 }, { "gender": "female", "height": 161.3, "weight": 70.5 }, { "gender": "female", "height": 167.6, "weight": 52.7 }, { "gender": "female", "height": 167.6, "weight": 62.7 }, { "gender": "female", "height": 165.1, "weight": 86.3 }, { "gender": "female", "height": 162.6, "weight": 66.4 }, { "gender": "female", "height": 152.4, "weight": 67.3 }, { "gender": "female", "height": 168.9, "weight": 63 }, { "gender": "female", "height": 170.2, "weight": 73.6 }, { "gender": "female", "height": 175.2, "weight": 62.3 }, { "gender": "female", "height": 175.2, "weight": 57.7 }, { "gender": "female", "height": 160, "weight": 55.4 }, { "gender": "female", "height": 165.1, "weight": 104.1 }, { "gender": "female", "height": 174, "weight": 55.5 }, { "gender": "female", "height": 170.2, "weight": 77.3 }, { "gender": "female", "height": 160, "weight": 80.5 }, { "gender": "female", "height": 167.6, "weight": 64.5 }, { "gender": "female", "height": 167.6, "weight": 72.3 }, { "gender": "female", "height": 167.6, "weight": 61.4 }, { "gender": "female", "height": 154.9, "weight": 58.2 }, { "gender": "female", "height": 162.6, "weight": 81.8 }, { "gender": "female", "height": 175.3, "weight": 63.6 }, { "gender": "female", "height": 171.4, "weight": 53.4 }, { "gender": "female", "height": 157.5, "weight": 54.5 }, { "gender": "female", "height": 165.1, "weight": 53.6 }, { "gender": "female", "height": 160, "weight": 60 }, { "gender": "female", "height": 174, "weight": 73.6 }, { "gender": "female", "height": 162.6, "weight": 61.4 }, { "gender": "female", "height": 174, "weight": 55.5 }, { "gender": "female", "height": 162.6, "weight": 63.6 }, { "gender": "female", "height": 161.3, "weight": 60.9 }, { "gender": "female", "height": 156.2, "weight": 60 }, { "gender": "female", "height": 149.9, "weight": 46.8 }, { "gender": "female", "height": 169.5, "weight": 57.3 }, { "gender": "female", "height": 160, "weight": 64.1 }, { "gender": "female", "height": 175.3, "weight": 63.6 }, { "gender": "female", "height": 169.5, "weight": 67.3 }, { "gender": "female", "height": 160, "weight": 75.5 }, { "gender": "female", "height": 172.7, "weight": 68.2 }, { "gender": "female", "height": 162.6, "weight": 61.4 }, { "gender": "female", "height": 157.5, "weight": 76.8 }, { "gender": "female", "height": 176.5, "weight": 71.8 }, { "gender": "female", "height": 164.4, "weight": 55.5 }, { "gender": "female", "height": 160.7, "weight": 48.6 }, { "gender": "female", "height": 174, "weight": 66.4 }, { "gender": "female", "height": 163.8, "weight": 67.3 }, { "gender": "male", "height": 174, "weight": 65.6 }, { "gender": "male", "height": 175.3, "weight": 71.8 }, { "gender": "male", "height": 193.5, "weight": 80.7 }, { "gender": "male", "height": 186.5, "weight": 72.6 }, { "gender": "male", "height": 187.2, "weight": 78.8 }, { "gender": "male", "height": 181.5, "weight": 74.8 }, { "gender": "male", "height": 184, "weight": 86.4 }, { "gender": "male", "height": 184.5, "weight": 78.4 }, { "gender": "male", "height": 175, "weight": 62 }, { "gender": "male", "height": 184, "weight": 81.6 }, { "gender": "male", "height": 180, "weight": 76.6 }, { "gender": "male", "height": 177.8, "weight": 83.6 }, { "gender": "male", "height": 192, "weight": 90 }, { "gender": "male", "height": 176, "weight": 74.6 }, { "gender": "male", "height": 174, "weight": 71 }, { "gender": "male", "height": 184, "weight": 79.6 }, { "gender": "male", "height": 192.7, "weight": 93.8 }, { "gender": "male", "height": 171.5, "weight": 70 }, { "gender": "male", "height": 173, "weight": 72.4 }, { "gender": "male", "height": 176, "weight": 85.9 }, { "gender": "male", "height": 176, "weight": 78.8 }, { "gender": "male", "height": 180.5, "weight": 77.8 }, { "gender": "male", "height": 172.7, "weight": 66.2 }, { "gender": "male", "height": 176, "weight": 86.4 }, { "gender": "male", "height": 173.5, "weight": 81.8 }, { "gender": "male", "height": 178, "weight": 89.6 }, { "gender": "male", "height": 180.3, "weight": 82.8 }, { "gender": "male", "height": 180.3, "weight": 76.4 }, { "gender": "male", "height": 164.5, "weight": 63.2 }, { "gender": "male", "height": 173, "weight": 60.9 }, { "gender": "male", "height": 183.5, "weight": 74.8 }, { "gender": "male", "height": 175.5, "weight": 70 }, { "gender": "male", "height": 188, "weight": 72.4 }, { "gender": "male", "height": 189.2, "weight": 84.1 }, { "gender": "male", "height": 172.8, "weight": 69.1 }, { "gender": "male", "height": 170, "weight": 59.5 }, { "gender": "male", "height": 182, "weight": 67.2 }, { "gender": "male", "height": 170, "weight": 61.3 }, { "gender": "male", "height": 177.8, "weight": 68.6 }, { "gender": "male", "height": 184.2, "weight": 80.1 }, { "gender": "male", "height": 186.7, "weight": 87.8 }, { "gender": "male", "height": 171.4, "weight": 84.7 }, { "gender": "male", "height": 172.7, "weight": 73.4 }, { "gender": "male", "height": 175.3, "weight": 72.1 }, { "gender": "male", "height": 180.3, "weight": 82.6 }, { "gender": "male", "height": 182.9, "weight": 88.7 }, { "gender": "male", "height": 188, "weight": 84.1 }, { "gender": "male", "height": 177.2, "weight": 94.1 }, { "gender": "male", "height": 172.1, "weight": 74.9 }, { "gender": "male", "height": 167, "weight": 59.1 }, { "gender": "male", "height": 169.5, "weight": 75.6 }, { "gender": "male", "height": 174, "weight": 86.2 }, { "gender": "male", "height": 172.7, "weight": 75.3 }, { "gender": "male", "height": 182.2, "weight": 87.1 }, { "gender": "male", "height": 164.1, "weight": 55.2 }, { "gender": "male", "height": 163, "weight": 57 }, { "gender": "male", "height": 171.5, "weight": 61.4 }, { "gender": "male", "height": 184.2, "weight": 76.8 }, { "gender": "male", "height": 174, "weight": 86.8 }, { "gender": "male", "height": 174, "weight": 72.2 }, { "gender": "male", "height": 177, "weight": 71.6 }, { "gender": "male", "height": 186, "weight": 84.8 }, { "gender": "male", "height": 167, "weight": 68.2 }, { "gender": "male", "height": 171.8, "weight": 66.1 }, { "gender": "male", "height": 182, "weight": 72 }, { "gender": "male", "height": 167, "weight": 64.6 }, { "gender": "male", "height": 177.8, "weight": 74.8 }, { "gender": "male", "height": 164.5, "weight": 70 }, { "gender": "male", "height": 192, "weight": 101.6 }, { "gender": "male", "height": 175.5, "weight": 63.2 }, { "gender": "male", "height": 171.2, "weight": 79.1 }, { "gender": "male", "height": 181.6, "weight": 78.9 }, { "gender": "male", "height": 167.4, "weight": 67.7 }, { "gender": "male", "height": 181.1, "weight": 66 }, { "gender": "male", "height": 177, "weight": 68.2 }, { "gender": "male", "height": 174.5, "weight": 63.9 }, { "gender": "male", "height": 177.5, "weight": 72 }, { "gender": "male", "height": 170.5, "weight": 56.8 }, { "gender": "male", "height": 182.4, "weight": 74.5 }, { "gender": "male", "height": 197.1, "weight": 90.9 }, { "gender": "male", "height": 180.1, "weight": 93 }, { "gender": "male", "height": 175.5, "weight": 80.9 }, { "gender": "male", "height": 180.6, "weight": 72.7 }, { "gender": "male", "height": 184.4, "weight": 68 }, { "gender": "male", "height": 175.5, "weight": 70.9 }, { "gender": "male", "height": 180.6, "weight": 72.5 }, { "gender": "male", "height": 177, "weight": 72.5 }, { "gender": "male", "height": 177.1, "weight": 83.4 }, { "gender": "male", "height": 181.6, "weight": 75.5 }, { "gender": "male", "height": 176.5, "weight": 73 }, { "gender": "male", "height": 175, "weight": 70.2 }, { "gender": "male", "height": 174, "weight": 73.4 }, { "gender": "male", "height": 165.1, "weight": 70.5 }, { "gender": "male", "height": 177, "weight": 68.9 }, { "gender": "male", "height": 192, "weight": 102.3 }, { "gender": "male", "height": 176.5, "weight": 68.4 }, { "gender": "male", "height": 169.4, "weight": 65.9 }, { "gender": "male", "height": 182.1, "weight": 75.7 }, { "gender": "male", "height": 179.8, "weight": 84.5 }, { "gender": "male", "height": 175.3, "weight": 87.7 }, { "gender": "male", "height": 184.9, "weight": 86.4 }, { "gender": "male", "height": 177.3, "weight": 73.2 }, { "gender": "male", "height": 167.4, "weight": 53.9 }, { "gender": "male", "height": 178.1, "weight": 72 }, { "gender": "male", "height": 168.9, "weight": 55.5 }, { "gender": "male", "height": 157.2, "weight": 58.4 }, { "gender": "male", "height": 180.3, "weight": 83.2 }, { "gender": "male", "height": 170.2, "weight": 72.7 }, { "gender": "male", "height": 177.8, "weight": 64.1 }, { "gender": "male", "height": 172.7, "weight": 72.3 }, { "gender": "male", "height": 165.1, "weight": 65 }, { "gender": "male", "height": 186.7, "weight": 86.4 }, { "gender": "male", "height": 165.1, "weight": 65 }, { "gender": "male", "height": 174, "weight": 88.6 }, { "gender": "male", "height": 175.3, "weight": 84.1 }, { "gender": "male", "height": 185.4, "weight": 66.8 }, { "gender": "male", "height": 177.8, "weight": 75.5 }, { "gender": "male", "height": 180.3, "weight": 93.2 }, { "gender": "male", "height": 180.3, "weight": 82.7 }, { "gender": "male", "height": 177.8, "weight": 58 }, { "gender": "male", "height": 177.8, "weight": 79.5 }, { "gender": "male", "height": 177.8, "weight": 78.6 }, { "gender": "male", "height": 177.8, "weight": 71.8 }, { "gender": "male", "height": 177.8, "weight": 116.4 }, { "gender": "male", "height": 163.8, "weight": 72.2 }, { "gender": "male", "height": 188, "weight": 83.6 }, { "gender": "male", "height": 198.1, "weight": 85.5 }, { "gender": "male", "height": 175.3, "weight": 90.9 }, { "gender": "male", "height": 166.4, "weight": 85.9 }, { "gender": "male", "height": 190.5, "weight": 89.1 }, { "gender": "male", "height": 166.4, "weight": 75 }, { "gender": "male", "height": 177.8, "weight": 77.7 }, { "gender": "male", "height": 179.7, "weight": 86.4 }, { "gender": "male", "height": 172.7, "weight": 90.9 }, { "gender": "male", "height": 190.5, "weight": 73.6 }, { "gender": "male", "height": 185.4, "weight": 76.4 }, { "gender": "male", "height": 168.9, "weight": 69.1 }, { "gender": "male", "height": 167.6, "weight": 84.5 }, { "gender": "male", "height": 175.3, "weight": 64.5 }, { "gender": "male", "height": 170.2, "weight": 69.1 }, { "gender": "male", "height": 190.5, "weight": 108.6 }, { "gender": "male", "height": 177.8, "weight": 86.4 }, { "gender": "male", "height": 190.5, "weight": 80.9 }, { "gender": "male", "height": 177.8, "weight": 87.7 }, { "gender": "male", "height": 184.2, "weight": 94.5 }, { "gender": "male", "height": 176.5, "weight": 80.2 }, { "gender": "male", "height": 177.8, "weight": 72 }, { "gender": "male", "height": 180.3, "weight": 71.4 }, { "gender": "male", "height": 171.4, "weight": 72.7 }, { "gender": "male", "height": 172.7, "weight": 84.1 }, { "gender": "male", "height": 172.7, "weight": 76.8 }, { "gender": "male", "height": 177.8, "weight": 63.6 }, { "gender": "male", "height": 177.8, "weight": 80.9 }, { "gender": "male", "height": 182.9, "weight": 80.9 }, { "gender": "male", "height": 170.2, "weight": 85.5 }, { "gender": "male", "height": 167.6, "weight": 68.6 }, { "gender": "male", "height": 175.3, "weight": 67.7 }, { "gender": "male", "height": 165.1, "weight": 66.4 }, { "gender": "male", "height": 185.4, "weight": 102.3 }, { "gender": "male", "height": 181.6, "weight": 70.5 }, { "gender": "male", "height": 172.7, "weight": 95.9 }, { "gender": "male", "height": 190.5, "weight": 84.1 }, { "gender": "male", "height": 179.1, "weight": 87.3 }, { "gender": "male", "height": 175.3, "weight": 71.8 }, { "gender": "male", "height": 170.2, "weight": 65.9 }, { "gender": "male", "height": 193, "weight": 95.9 }, { "gender": "male", "height": 171.4, "weight": 91.4 }, { "gender": "male", "height": 177.8, "weight": 81.8 }, { "gender": "male", "height": 177.8, "weight": 96.8 }, { "gender": "male", "height": 167.6, "weight": 69.1 }, { "gender": "male", "height": 167.6, "weight": 82.7 }, { "gender": "male", "height": 180.3, "weight": 75.5 }, { "gender": "male", "height": 182.9, "weight": 79.5 }, { "gender": "male", "height": 176.5, "weight": 73.6 }, { "gender": "male", "height": 186.7, "weight": 91.8 }, { "gender": "male", "height": 188, "weight": 84.1 }, { "gender": "male", "height": 188, "weight": 85.9 }, { "gender": "male", "height": 177.8, "weight": 81.8 }, { "gender": "male", "height": 174, "weight": 82.5 }, { "gender": "male", "height": 177.8, "weight": 80.5 }, { "gender": "male", "height": 171.4, "weight": 70 }, { "gender": "male", "height": 185.4, "weight": 81.8 }, { "gender": "male", "height": 185.4, "weight": 84.1 }, { "gender": "male", "height": 188, "weight": 90.5 }, { "gender": "male", "height": 188, "weight": 91.4 }, { "gender": "male", "height": 182.9, "weight": 89.1 }, { "gender": "male", "height": 176.5, "weight": 85 }, { "gender": "male", "height": 175.3, "weight": 69.1 }, { "gender": "male", "height": 175.3, "weight": 73.6 }, { "gender": "male", "height": 188, "weight": 80.5 }, { "gender": "male", "height": 188, "weight": 82.7 }, { "gender": "male", "height": 175.3, "weight": 86.4 }, { "gender": "male", "height": 170.5, "weight": 67.7 }, { "gender": "male", "height": 179.1, "weight": 92.7 }, { "gender": "male", "height": 177.8, "weight": 93.6 }, { "gender": "male", "height": 175.3, "weight": 70.9 }, { "gender": "male", "height": 182.9, "weight": 75 }, { "gender": "male", "height": 170.8, "weight": 93.2 }, { "gender": "male", "height": 188, "weight": 93.2 }, { "gender": "male", "height": 180.3, "weight": 77.7 }, { "gender": "male", "height": 177.8, "weight": 61.4 }, { "gender": "male", "height": 185.4, "weight": 94.1 }, { "gender": "male", "height": 168.9, "weight": 75 }, { "gender": "male", "height": 185.4, "weight": 83.6 }, { "gender": "male", "height": 180.3, "weight": 85.5 }, { "gender": "male", "height": 174, "weight": 73.9 }, { "gender": "male", "height": 167.6, "weight": 66.8 }, { "gender": "male", "height": 182.9, "weight": 87.3 }, { "gender": "male", "height": 160, "weight": 72.3 }, { "gender": "male", "height": 180.3, "weight": 88.6 }, { "gender": "male", "height": 167.6, "weight": 75.5 }, { "gender": "male", "height": 186.7, "weight": 101.4 }, { "gender": "male", "height": 175.3, "weight": 91.1 }, { "gender": "male", "height": 175.3, "weight": 67.3 }, { "gender": "male", "height": 175.9, "weight": 77.7 }, { "gender": "male", "height": 175.3, "weight": 81.8 }, { "gender": "male", "height": 179.1, "weight": 75.5 }, { "gender": "male", "height": 181.6, "weight": 84.5 }, { "gender": "male", "height": 177.8, "weight": 76.6 }, { "gender": "male", "height": 182.9, "weight": 85 }, { "gender": "male", "height": 177.8, "weight": 102.5 }, { "gender": "male", "height": 184.2, "weight": 77.3 }, { "gender": "male", "height": 179.1, "weight": 71.8 }, { "gender": "male", "height": 176.5, "weight": 87.9 }, { "gender": "male", "height": 188, "weight": 94.3 }, { "gender": "male", "height": 174, "weight": 70.9 }, { "gender": "male", "height": 167.6, "weight": 64.5 }, { "gender": "male", "height": 170.2, "weight": 77.3 }, { "gender": "male", "height": 167.6, "weight": 72.3 }, { "gender": "male", "height": 188, "weight": 87.3 }, { "gender": "male", "height": 174, "weight": 80 }, { "gender": "male", "height": 176.5, "weight": 82.3 }, { "gender": "male", "height": 180.3, "weight": 73.6 }, { "gender": "male", "height": 167.6, "weight": 74.1 }, { "gender": "male", "height": 188, "weight": 85.9 }, { "gender": "male", "height": 180.3, "weight": 73.2 }, { "gender": "male", "height": 167.6, "weight": 76.3 }, { "gender": "male", "height": 183, "weight": 65.9 }, { "gender": "male", "height": 183, "weight": 90.9 }, { "gender": "male", "height": 179.1, "weight": 89.1 }, { "gender": "male", "height": 170.2, "weight": 62.3 }, { "gender": "male", "height": 177.8, "weight": 82.7 }, { "gender": "male", "height": 179.1, "weight": 79.1 }, { "gender": "male", "height": 190.5, "weight": 98.2 }, { "gender": "male", "height": 177.8, "weight": 84.1 }, { "gender": "male", "height": 180.3, "weight": 83.2 }, { "gender": "male", "height": 180.3, "weight": 83.2 }]
  let axisData = []
  for(let i = 0; i < data.length; i++) {
    let height = data[i].height
    let weight = data[i].weight
    let newArr = [height, weight]
    axisData.push(newArr)
  }
  // console.log(axisData);
  let option = {
    xAxis: {
      type: 'value',
      scale: true
    },
    yAxis: {
      type: 'value',
      scale: true
    },
    series: [
      {
        type: 'scatter',
        data: axisData
      }
    ]
  }
  myCharts.setOption(option)
</script>
</body>
</html>

    常见效果

    气泡图效果

  • symbolSize：散点的大小不同

  • itemStyle：散点的颜色不同

    series: [
{
  // 所展示的图表类型
  type: 'scatter',
  // 要渲染的图表数据
  data: axisData,
  // 散点不同的大小
  symbolSize(arg) {
    let height = arg[0] / 100
    let weight = arg[1]
    let bmi = weight / (height * height)
    if (bmi > 28) {
      return 20
    }else {
      return 5
    }
  },
  // 散点不同的颜色
  itemStyle: {
    color(arg) {
      let height = arg.data[0] / 100
      let weight = arg.data[1]
      let bmi = weight / (height * height)
      if (bmi > 28) {
        return 'pink'
      }else {
        return 'skyblue'
      }
    }
  }
}
]

    涟漪动画效果

  • type: 'effectScatter'; 设置涟漪动画

  • showEffectOn: 'emphasis'; 设置鼠标移入数据中显示涟漪动画

  • rippleEffect: { scale: 5 }; 设置鼠标移入后涟漪动画的大小

    series: [
{
  // type: 'scatter',
  // 设置涟漪动画
  type: 'effectScatter',
  // 设置鼠标移入数据中显示涟漪动画
  showEffectOn: 'emphasis',
  // 设置鼠标移入后数据中的涟漪动画的大小
  rippleEffect: {
    scale: 5
  },
  data: axisData,
  // 散点不同的大小
  symbolSize(arg) {
    let height = arg[0] / 100
    let weight = arg[1]
    let bmi = weight / (height * height)
    if (bmi > 28) {
      return 20
    }else {
      return 5
    }
  },
  // 散点不同的颜色
  itemStyle: {
    color(arg) {
      let height = arg.data[0] / 100
      let weight = arg.data[1]
      let bmi = weight / (height * height)
      if (bmi > 28) {
        return 'pink'
      }else {
        return 'skyblue'
      }
    }
  }
}
]

    直角坐标系

    直角坐标系图表

  • 柱状图

  • 折线图

  • 散点图

    常用配置

    配置1：网格 grid

    grid 是用来控制直角坐标系的位置、布局和大小

  • 显示 grid

    • show
  • grid 的边框
    • borderWidth、borderColor

  • grid 的位置和大小

    • left、top、right、bottom、width、height

      配置2：坐标轴 axis

      坐标轴分为 x 轴和 y 轴
      一个 grid 中最多有两种位置的 x 轴和 y 轴

  • 坐标轴类型：type

    • value：数值轴，自动会从目标数据中读取数据
    • category：类目轴，该类型必须通过 data 设置类目数据

  • 显示位置：position

    • xAxis：可取值为 top 或者 bottom
    • yAxis：可取值为 left 或者 right

      配置3：区域缩放 dataZoom

      dataZoom 用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有
      dataZoom 是一个数组，意味着可以配置多个区域缩放器

  • 类型 type

  • slider：滑块（默认值）
  • inside：内置，依靠鼠标滚轮或者双指缩放

饼图（pie）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;"></div>

  <script>
    let myCharts = echarts.init(document.querySelector('div'))
    let pieData = [
      {name: '某宝', value: 11231},
      {name: '某东', value: 22673},
      {name: '某品会', value: 6123},
      {name: '某号店', value: 8989},
      {name: '某某优品', value: 6700}
    ]
    let option = {
      series: [
        {
          type: 'pie',
          data: pieData
        }
      ]
    }
    myCharts.setOption(option)
  </script>
</body>
</html>

常见效果（设置在 series 对象中）

  • 显示数值

    label: {
show: true,
formatter(arg) {
  console.log(arg);
  return arg.name + '消费' + arg.value + '元\n占比' + arg.percent + '%'
}
}

  • 圆环 ```javascript // 饼图的半径 // 百分比参照的是宽高中值较小的那部分的二分之一来进行百分比设置的 radius: ‘20%’

// 参数1：内圆的半径 // 参数2：外圆的半径 radius: [‘50%’, ‘75%’]


- 南丁格尔图
   - 没部分的半径都是不同的，半径的大小取决于数值的大小
```javascript
roseType: 'radius'
  • 选中效果
    • selectedMode 选中模式
      • single：选中的区域偏离原点一小段距离（只能偏离一个）
      • multiple：选中的区域偏离原点一小段距离（可以选择多个）
    • selectedOffset 选中偏移量
      • 传入数值，不能是百分比
        // 选中模式：只能偏离一个
selectedMode: 'single',
// 选中偏移量：传入数值，不能是百分比
selectedOffset: 50

        饼图可以很好的帮助用户快速了解不同分类的数据的占比情况

地图（map）

  • 地图图表的使用方式
    • 百度地图API
      • 需要申请百度地图ak
    • 矢量地图
      • 需要准备矢量地图数据

        配置在 geo 对象下

常用配置

  • roam：缩放拖动；值为 true 时允许缩放以及拖动效果，值为 boolean 类型
  • label：名称显示；show: true;，值为 object 类型
  • zoom：设置初始缩放比例，值为 number 类型

  • center：设置地图中心点的坐标，值为 array 类型

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/echarts.min.js"></script>
<!-- 引入 jq 文件 -->
<script src="./lib/jquery.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px;"></div>

<script>
  let myCharts = echarts.init(document.querySelector('div'))
  // 使用 Ajax 获取矢量地图数据
  $.get('json/map/china.json', (ret) => {
    // 注册地图矢量数据
    echarts.registerMap('chinaMap', ret)
    let option = {
      // 配置 geo 对象
      geo: {
        type: 'map',  // 类型为 地图
        map: 'chinaMap', // 地图矢量数据
        roam: true, // 设置允许缩放以及拖动的效果
        label: { // 名称显示
            show: true
        },
        zoom: 1, // 设置初始缩放比例
        center: [87.617733, 43.792818]
      }
    }
    myCharts.setOption(option)
  })
</script>
</body>
</html>

    option 对象和 echarts实例对象需要注册在函数内部，否则地图无法正常渲染

常见效果

显示某个区域：

  1. 加载该区域的矢量地图数据
  2. 通过 registerMap 注册到 echarts 全局对象中
  3. 指明 geo 配置下的 type 和 map 属性
  4. 通过 zoom 放大该区域

  5. 通过 center 定位中心点

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/echarts.min.js"></script>
<script src="./lib/jquery.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; border: 1px solid aqua;"></div>

<script>
 let myCharts = echarts.init(document.querySelector('div'))
 $.get('json/map/province/jiangxi.json', (ret) => {
   console.log(ret);
   echarts.registerMap('jiangxi', ret)
   let option = {
     geo: {
       type: 'map',
       map: 'jiangxi',
       roam: true,
       label: {
         show: true
       },
       zoom: 1, // 设置初始缩放比例
       center: [116.358351, 27.98385]
     }
   }
   myCharts.setOption(option)
 })
</script>
</body>
</html>

    不同城市不同颜色

  6. 显示基本的中国地图

  7. 城市的空气质量数据设置给 series
  8. 将 series 下的数据和 geo 关联起来

  9. 结合 visualMap 配合使用

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/echarts.min.js"></script>
<script src="./lib/jquery.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; border: 1px solid aqua;"></div>

<script>
 // 矢量地图数据数组
 let airData = [{ name: '北京', value: 39.92 },{ name: '天津', value: 39.13 },{ name: '上海', value: 31.22 },{ name: '重庆', value: 66 },{ name: '河北', value: 147 },{ name: '河南', value: 113 },{ name: '云南', value: 25.04 },{ name: '辽宁', value: 50 },{ name: '黑龙江', value: 114 },{ name: '湖南', value: 175 },{ name: '安徽', value: 117 },{ name: '山东', value: 92 },{ name: '新疆', value: 84 },{ name: '江苏', value: 67 },{ name: '浙江', value: 84 },{ name: '江西', value: 96 },{ name: '湖北', value: 273 },{ name: '广西', value: 59 },{ name: '甘肃', value: 99 },{ name: '山西', value: 39 },{ name: '内蒙古', value: 58 },{ name: '陕西', value: 61 },{ name: '吉林', value: 51 },{ name: '福建', value: 29 },{ name: '贵州', value: 71 },{ name: '广东', value: 38 },{ name: '青海', value: 57 },{ name: '西藏', value: 24 },{ name: '四川', value: 58 },{ name: '宁夏', value: 52 },{ name: '海南', value: 54 },{ name: '台湾', value: 88 },{ name: '香港', value: 66 },{ name: '澳门', value: 77 },{ name: '南海诸岛', value: 55 }]
 let myCharts = echarts.init(document.querySelector('div'))
 $.get('json/map/china.json', (ret) => {
   console.log(ret);
   echarts.registerMap('chinaMap', ret)
   let option = {
     geo: {
       type: 'map',
       map: 'chinaMap',
       roam: true, // 允许拖动缩放
       label: {
         show: true // 显示城市标签
       },
     },
     series: [
       {
         data: airData,
         geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
         type: 'map' // 地图类型
       }
     ],
     // 视觉映射
     visualMap: {
       min: 0, // 最小值
       max: 300, // 最大值
       inRange: { // 控制颜色阈值
         color: ['white', 'aqua']
       },
       calculable: true // 出现滑块
     }
   }
   myCharts.setOption(option)
 })
</script>
</body>
</html>

    地图和散点图结合

  10. 给 series 下增加新的对象

  11. 准备好散点数据，设置给新对象的 data
  12. 配置新对象的 type
    1. type: effectScatter;
  13. 让散点图使用地图坐标系统
    1. coordinateSystem: ‘geo’;

  14. 让涟漪的效果更加明显

    1. **eEffect: { scale: 10 } ```html <!DOCTYPE html>

    ```

    雷达图（radar）

    特点：雷达图可以用来分析多个维度的数据与标准数据的对比情况

  • radar 对象

    • shape: 'polygon';：配置图表最外层的盒子形状，默认值为 polygon ```html <!DOCTYPE html>

    ```

    仪表盘图（gauge）

    主要用于进度把控以及数据范围的监测

实现步骤：

  1. ECharts最基本的代码结构
    1. 引入js文件，DOM容器，初始化对象，设置option
  2. 准备数据，设置给 series 下的 data
    1. data: [{ value: 97 }]
    2. data 数组中的每个对象都代表一个指针
  3. 图表类型：
    1. 在 series 下设置 type: gauge

      特点：仪表盘可以更直观的表现出某个指标的进度或实际情况

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px; border: 1px solid aqua;"></div>

  <script>
    let myCharts = echarts.init(document.querySelector('div'))
    let option = {
      series: [
        {
          type: 'gauge',
          data: [
            {
              value: 97,
              itemStyle: { // 控制仪表盘指针样式
                color: 'pink'
              }
            }, // 每一个对象代表一个指针
            {
              value: 57
            },
          ],
          min: 50, // min & max 控制仪表盘数值范围
        }
      ]
    }
    myCharts.setOption(option)
  </script>
</body>
</html>

数据可视化

主题

  • 内置主题：light 和 dark ```javascript let chart = echarts.init(dom,’light’);

let chart = echarts.init(dom,’dark’);


- 自定义主题
```javascript
// 1. 导入下载的自定义主题文件
<script src="theme/itcast.js"></script>

// 2. 改变 init 方法的第二个参数
let mCharts = echarts.init(document.querySelector('div'),'itcast');

调色盘

一组颜色、图形、系类都会从其中选择颜色

  • 主题调色盘

    • 设置在 js主题文件下的 color 数组中
      // itcast.js 文件下
"color": [
"#893448",
"#d95850",
"#eb8146",
"#ffb248",
"#f2d643",
"#ebdba4"
]

  • 全局调色盘

    • 设置在 option 对象下
      let option = {
color: ['aqua','skyblue','pink']
}

  • 局部调色盘

    • 设置在 series 数组下
      series: [
{
   type: 'pie',
   data: pieData,
 color:['#f15a22','#b4533c','#d3c6a6','#74787c','#c7a252']
}
]

      就近原则：优先读取局部调色盘的样式

颜色渐变

  • 线性渐变

    series: [
{
    type: 'bar',
  data: yData,
  itemStyle: {
      color: {
      // 渐变类型
        type: 'linear', // 线性渐变
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
            offset: 0, color: 'aqua' // 0% 处的颜色为青色
        },
        {
            offset: 1, color: 'skyblue' // 100% 处的颜色为天空蓝
        }
      ]
    }
  }
}
]

  • 径向渐变

    series: [
{
    type: 'bar',
  data: yData,
  itemStyle: {
      color: {
      // 渐变类型
        type: 'radial', // 线性渐变
      x: 0.5,
      y: 0.5,
      r: 0.5,
      colorStops: [
        {
            offset: 0, color: 'aqua' // 0% 处的颜色为青色
        },
        {
            offset: 1, color: 'skyblue' // 100% 处的颜色为天空蓝
        }
      ]
    }
  }
}
]

    样式

  • 直接样式

    • itemStyle：控制局部区域的样式

      data: [{
name: '某宝',
value: 11231, 
itemStyle: {
color: 'skyblue'
}
}

    • textStyle：控制标题文字样式

      title: {
text: '销量',
textStyle: { // 控制标题文字样式
color: 'pink'
}
}

    • lineStyle：控制折线图样式

    • areaStyle：控制雷达图样式
    • label：控制区域文本样式
      data: [{
name: '某宝',
value: 11231, 
itemStyle: {
color: 'skyblue'
},
label: {
 color: 'aqua'
}
}

  • 高亮样式

    • emphasis：设置高亮样式
      data: [{
name: '某宝',
value: 11231, 
itemStyle: {
color: 'skyblue'
},
label: {
 color: 'aqua'
},
emphasis: {
 itemStyle: {
color: 'black'
},
label: {
 color: 'pink'
},
}
}

      自适应

      当浏览器的大小发生变化时，图表也随之适配变化 ```javascript window.onresize = function() { mCharts.resize() }

window.onresize = mCharts.resize

<a name="AlDUn"></a>
## 动画
<a name="TOySf"></a>
### 加载动画
Echarts内置加载数据的动画，只需隐藏或显示即可

- 显示加载动画
```javascript
mCharts.showLoading()
  • 隐藏加载动画
    mCharts.hideLoading()