Echarts学习笔记

Echarts学习笔记

四月 17, 2022
该文章更新于 2022.06.24

Echarts学习笔记

快速上手

引入ECharts

在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

echarts.min.js

也可以引入在线文件(不推荐使用，版本无法控制)

1
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

新建一个 index.html 文件,为 ECharts 准备一个定义了高宽的 DOM 容器,通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 步骤1：引入echarts.js文件 -->
    <!-- 引入本地echart文件 -->
  <!-- <script src="lib/echarts.min.js"></script> -->
   <!-- 引入在线echart文件 -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
  <!--
  步骤1：引入echarts.js文件
  步骤2：准备一个呈现图表的盒子
  步骤3：初始化echarts实例对象
  步骤4：准备配置项
  步骤5：将配置项设置给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: 'https://hopesy.github.io', // 标题超链接
        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>

</html>

模块化安装echarts

开发环境使用了npm或者yarn等包管理工具，并且使用 Webpack 等打包工具进行构建，将引入 Apache EChartsTM 并通过 treeshaking 特性只打包需要的模块。

NPM 安装 ECharts

1
npm install echarts --save

引入Echarts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

按需引入 ECharts 图表和组件

上面的代码会引入 ECharts 中所有的图表和组件，但是假如你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

**注意：**需要注意的是为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入 CanvasRenderer 或者 SVGRenderer 作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的 CanvasRenderer 模块。

基础使用

通用配置

任何一种类型的图表都可以使用的配置

常见效果

  • 标记：最大值最小值、平均值。markPount，markLine

  • 显示：数值显示、柱宽度、横向。label，barWidth，更改x轴和y轴的角色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴数据:['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    //3. y轴数据:[88, 92, 63, 77, 94, 80, 72, 86]
    //4. 将type的值设置为bar
    var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'] // 准备x轴数据
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
    var option = {
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: xDataArr
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          markPoint: { // 标记点
            data: [
              {
                type: 'max', name: '最大值'
              },{
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: { // 标记线
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
          barWidth: '30%', // 柱的宽度
          data: yDataArr
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

标题title

表格的标题

  • 文字样式textStyle

  • 标题边框borderWidth、borderColor、borderRadius

  • 标题位置left、top、right、bottom

  • 水平居中，垂直居中textAlign、textVerticalAlign

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

提示框tooltip

tooltip:提示框组件，用于配置鼠标滑过或者点击图标时的显示框

  • 触发类型item、axis前者鼠标移到图标上才有显示框，后者只要是在轴上就有显示框

  • 触发时机triggerOn:mouseover/click鼠标移动上去显示、点击才会显示

  • 格式化formatter设置字符串模板、回调函数。注意字符串模板{a}在不同类型的表格中代表的意义是不同的。

1
2
3
4
5
6
7
8
9
tooltip: {
  // trigger: 'item'
  trigger: 'axis',
  triggerOn: 'click',
  // formatter: '{b} 的成绩是 {c}'
  formatter: function(arg){
  //formatter:'{b}的成绩是{c}'
    return arg[0].name + '的分数是:' + arg[0].data
  }

图例legend

legend:图例，用于筛选系列，需要和series配合使用。

  • legend中的data是一个数组

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
legend: { // 图例, 图例中的data数据来源于series中每个对象的name,
          //图例可以帮助我们对图表进行筛选
  data: ['语文', '数学']
},
xAxis: {
  type: 'category',
  data: xDataArr
},
yAxis: {
  type: 'value'
},
//
series: [
  {
    name: '语文',
    type: 'bar',
    data: yDataArr1
  },
  {
    name: '数学',
    type: 'bar',
    data: yDataArr2
  }
]

工具栏toolbox

toolbox:ECharts提供的工具栏

  • 导出图片saveAsImage: {}。下载图片按钮

  • 数据视图dataView: {}。点击可以看到原始数据并修改查看效果

  • 重置数据restore: {}。重置原始数据

  • 区域缩放dataZoom: {}。框选缩放特定区域

  • 动态切换图表类型magicType: {type: ['bar', 'line']}。

1
2
3
4
5
6
7
8
9
10
11
toolbox: {
  feature: {
    saveAsImage: {}, // 导出图片
    dataView: {}, // 数据视图
    restore: {}, // 重置
    dataZoom: {}, // 区域缩放
    magicType: {
      type: ['bar', 'line']
    } // 动态图表类型的切换
  }
}

柱状图

住柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。设置柱状图的方式，是将 series 的 type 设为 'bar'。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
    var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30]
    var option = {
      title: {
        text: '成绩展示',
        textStyle: {
          color: 'red'
        },
        borderWidth: 5,
        borderColor: 'blue',
        borderRadius: 5,
        left: 50,
        top: 10
      },
      tooltip: {
        // trigger: 'item'
        trigger: 'axis',
        triggerOn: 'click',
        // formatter: '{b} 的成绩是 {c}'
        formatter: function(arg){
          return arg[0].name + '的分数是:' + arg[0].data
        }
      },
      toolbox: {
        feature: {
          saveAsImage: {}, // 导出图片
          dataView: {}, // 数据视图
          restore: {}, // 重置
          dataZoom: {}, // 区域缩放
          magicType: {
            type: ['bar', 'line']
          } // 动态图表类型的切换
        }
      },
      legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
        data: ['语文', '数学']
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '语文',
          type: 'bar',
          data: yDataArr1
        },
        {
          name: '数学',
          type: 'bar',
          data: yDataArr2
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

折线图

折线图常用来分析数据随着时间变化地方。series设置****

  • 标记:最大值最小值、平均值、标注区间markPoint、markLine、markArea标记最大值最小值及区间

  • 线条控制:平滑曲线、线条风格smooth、lineStyle折线变曲线，线条颜色线型

  • 填充风格areaStyle:{}折线与x轴围成一个区域

  • 紧挨边缘boundaryGapx轴的第1个元素是否与y轴有距离

  • 缩放scale数值轴的元素不从0开始

  • 堆叠图第二组数据stack:"all"只要series中两组数据的stack属性相同，那么第二组数据就不是从0开始，而是从第一组对应的数据开始进行数值的累加(stack值可以是任意)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴数据:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    //3. y轴数据:[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    //4. 将type的值设置为line
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    var yDataArr2 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300, 1900, 1500, 1800, 200]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr,
        boundaryGap: false // x轴的第1个元素是否与y轴有距离，默认true有距离
      },
      yAxis: {
        type: 'value',
        scale: true //数值轴的数据不从0开始，相当于缩放
      },
      series: [
        {
          name: '康师傅',
          data: yDataArr,
          stack: 'all', // 堆叠图的设置
          type: 'line',
          markPoint: { // 标记点
            data: [ { type: 'max'},{ type: 'min'}]
          },
          markLine: { // 标记线
            data: [{  type: 'average'}]
          },
          markArea: { // 标记区域
            data: [//一个区域一个数组，起始终止数据
              [{ xAxis: '1月' },{xAxis: '2月'}],
              [{ xAxis: '7月'},{ xAxis: '8月' }]
            ]
          },
          smooth: true, // 是否为平滑线
          lineStyle: { // 线的样式设置
            color: 'green',
            type: 'dashed' // dashed dotted solid
          },
          areaStyle: { color: 'pink' }// 线和x轴形成的区域设置
        },
        {
          type: 'line',
          data: yDataArr2,
          stack: 'all', // 堆叠图的设置
          areaStyle: {}
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

散点图

散点图可以帮助我们推断出变量间的相关性。比如身高和体重的关系。series设置 ****

  • xAxis与yAxis都是数值轴。type:'value'

  • 缩放scale:true数值轴的元素不从0开始

  • 气泡图控制散点的大小颜色symbolSize:30或者设置回调函数symbolSize: function (arg) { return arg[1]/100}(arg是默认传递的参数)

  • 气泡图控制散点的颜色itemStyle:{color:'red'}或者设置回调函数itemStyle: {color: function (arg) {if (arg.data[1] > 28) {return 'red'}else{return 'green'}}

  • 涟漪动画，需要将series里面的type设置为type；'effectSkatter';涟漪动画时, 散点的缩放比例

rippleEffect: {scale: 10 };出现涟漪动画的时机 showEffectOn: 'emphasis'(render渲染完成后， emphasis鼠标移动上去产生

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. x轴和y轴数据 二维数组 [ [身高,体重],...   ]
    //3. 将type的值设置为scatter, x轴和y轴的type都是value
    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 },]
    var axisData = []
    for (var i = 0; i < data.length; i++) {
      var height = data[i].height
      var weight = data[i].weight
      var newArr = [height, weight]
      axisData.push(newArr)
    }
    console.log(axisData)
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      xAxis: {
        type: 'value',
        scale: true
      },
      yAxis: {
        type: 'value',
        scale: true
      },
      series: [
        {
          // type: 'scatter',
          type: 'effectScatter', // 指明图表为带涟漪动画的散点图
          showEffectOn: 'emphasis', // 出现涟漪动画的时机 render emphasis
          rippleEffect: {
            scale: 10 // 涟漪动画时, 散点的缩放比例
          },
          data: axisData,
          // symbolSize: 30
          symbolSize: function (arg) { // 控制散点的大小
            // console.log(arg)
            var height = arg[0] / 100
            var weight = arg[1]
            // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
            var bmi = weight / (height * height)
            if (bmi > 28) {
              return 20
            }
            return 5
          },
          itemStyle: { // 控制散点的样式
            color: function (arg) {
              // console.log(arg)
              var height = arg.data[0] / 100
              var weight = arg.data[1]
              // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
              var bmi = weight / (height * height)
              if (bmi > 28) {
                return 'red'
              }
              return 'green'
            }
          }
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

直角坐标系的常用配置（柱状图，折线图，散点图）

网格grid

grid是用来控制直角坐标系的布局和大小。x轴和y轴就是在grid的基础上进行绘制的。

  • 显示grid。show:true

  • 边框。borderWidth、borderColor

  • 位置和大小。left、top、right、bottom和width、height

1
2
3
4
5
6
7
8
9
10
// 直接配置在option下
grid: { // 坐标轴容器
  show: true, // 是否可见
  borderWidth: 10, // 边框的宽度
  borderColor: 'red', // 边框的颜色
  left: 120, // 边框的位置
  top: 120,
  width: 300, // 边框的大小
  height: 150
}

坐标轴axis

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

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

  • 坐标轴的显示位置。xAxis可取值top或者bottom；yAxis可取值left或者right。

1
2
3
4
5
6
7
8
9
10
// 直接配置在option下
xAxis: {
  type: 'category',
  data: xDataArr,
  position: 'top' // 控制坐标轴的位置
},
yAxis: {
  type: 'value',
  position: 'right' // 控制坐标轴的位置
}

区域缩放dataZoom

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

  • 类型type:sllide坐标轴下方显示滑块，鼠标可以拖动，type:indide内置，不显示滑块，依靠鼠标滚轮或者双指缩放。

  • 指明缩放产生作用的轴。xAxisIndex:0设置缩放组件控制的是哪个x轴，一般写0，yAxisIndex:0设置缩放组件控制的是哪个y轴，一般写0。(配置多个缩放效果必须指定，配置单个缩放不指定默认x轴y轴都缩放)

  • 指明初始状态的缩放情况。start数据窗口范围 的起始百分比；end数据窗口范围的结束百分比。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 // 直接配置在option下
dataZoom: [ // 控制区域缩放效果的实现
  {
    type: 'slider', // 缩放的类型  slide代表滑块  inside代表依靠鼠标滚轮
    // type: 'inside'
    xAxisIndex: 0
  },
  {
    type: 'slider',
    yAxisIndex: 0,
    start: 0, // 渲染完成后, 数据筛选的初始值, 百分比
    end: 80 // 渲染完成后, 数据筛选的结束值, 百分比
  }
]

饼图

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

  • 数据是由name和value组成的对象所组成的数组

  • 无需配置xAxis和yAxis

  • 显示文字，label属性配置show:true格式化formatter: function(arg){return arg.name+ '平台' +arg.value + '元\n' + arg.percent + '%'}

  • 圆的半径radius: 20或者radius:20%

  • 圆环radius: ['50%', '75%'] 第0个元素代表的是內圆的半径 第1个元素外圆的半径

  • 南丁格尔图roseType: 'radius', 百分比越大半径越大

  • 选中效果，能够将选中的区域偏离圆点一小段距离。多个选中selectedMode: 'multiple',单个selectedMode: 'single,选中偏移距离selectedOffset: 30

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>饼图</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. 准备数据[{name:???, value:??? },{}]
    //3. 将type的值设置为pie
    var mCharts = echarts.init(document.querySelector("div"))
    // pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
    var pieData = [{ name: '淘宝',value: 11231},{ name: '京东',value: 22673},{name: '唯品会',value: 6123 },
      {name: '1号店',value: 8989},{ name: '聚美优品',value: 6700}]
    var option = {
      series: [
        {
          type: 'pie',
          data: pieData,
          label: { // 饼图文字的显示
            show: true, // 显示文字
            //formatter: 'hehe' // 决定文字显示的内容
            formatter: function(arg){
              // console.log(arg)
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          // radius: 20 // 饼图的半径
          // radius: '20%' // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
          // radius: ['50%', '75%'] // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
          roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
          // selectedMode: 'single' // 选中的效果,能够将选中的区域偏离圆点一小段距离
          selectedMode: 'multiple',
          selectedOffset: 30
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>

地图

矢量地图的实现。地图数据主要来自百度地图API,高德地图API,或者矢量数据。

  • 准备好矢量地图json文件

map.zip

  • 使用Ajax获取json文件echarts$.get('json/map/china.json', function (ret) { }

  • 在回调函数中往echarts全局对象注册地图的json数据echarts.registerMap('chinaMap', ret)

  • 在geo下设置type:'map',map:'chinaMap'

  • 允许缩放以及拖动的效果geo下设置roam: true

  • 展示标签geo下设置label: {show: true }

  • 初始化的缩放比例geo下设置zoom: 1

  • 地图中心点的坐标geo下设置center: [87.617733, 43.792818]经纬度坐标。坐标值可以通过地图矢量数组得到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px;border: 1px solid #f00"></div>

  <script>
    //1. 给series下增加一个新的对象
    //2. 准备数据散点数据  , 配置给series下的另外一个对象
    //3. 配置series下的新对象的type值为effectScatter
    //4. 指明散点图的坐标系统为geo
    //5. 调整涟漪动画效果
    var 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 }
    ]
    var scatterData = [
      {
        value: [117.283042, 31.86119]
      }
    ]
    var mCharts = echarts.init(document.querySelector("div"))
    $.get('json/map/china.json', function (ret) {
      // ret 就是中国的各个省份的矢量地图数据
      console.log(ret)
      echarts.registerMap('chinaMap', ret)
      var option = {
        geo: {
          type: 'map',
          map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
          roam: true, // 设置允许缩放以及拖动的效果
          label: {
            show: true // 展示标签
          }
        },
        series: [
          {
            data: airData,
            geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
            type: 'map'
          },
          {
            data: scatterData, // 配置散点的坐标数据
            type: 'effectScatter',
            coordinateSystem: 'geo', // 指明散点使用的坐标系统  geo的坐标系统
            rippleEffect: {
              scale: 10 // 设置涟漪动画的缩放比例
            }
          }
        ],
        visualMap: {
          min: 0,
          max: 300,
          inRange: {
            color: ['white', 'red'] // 控制颜色渐变的范围
          },
          calculable: true // 出现滑块
        }
      }
      mCharts.setOption(option)
    })

  </script>
</body>

</html>

雷达图

雷达图可以用来分析多个维度的数据与标准数据的对比情况。在sereies下设置****

  • 定义各个维度的最大值radar下设置indicator:[{name:'使用性',max:100},{name:'耐久性',max:100},......]

  • 配置雷达图最外层的图形radar下设置 shape: 'polygon'或者circle

  • 准备具体的数据data:[{name:'华为',value:[80,90,...],{name:'中心',value:[85,85,...]}......]

  • 将每一个产品的雷达图形成阴影的面积,sereies下设置areaStyle: {}

  • 显示数值sereies下设置label: {show: true }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    //1. ECharts最基本的代码结构
    //2. 定义各个维度的最大值, 通过radar属性配置
    //   易用性,功能,拍照,跑分,续航, 每个维度的最大值都是100
    //3. 准备产品数据, 设置给series下的data
    //4. 将type的值设置为radar
    var mCharts = echarts.init(document.querySelector("div"))
    // 各个维度的最大值
    var dataMax = [
      {name: '易用性',max: 100}, {name: '功能',max: 100},
      { name: '拍照',max: 100},{ name: '跑分',max: 100},
      { name: '续航', max: 100}
    ]
    var option = {
      radar: {
        indicator: dataMax, // 配置各个维度的最大值
        shape: 'polygon' // 配置雷达图最外层的图形 circle polygon
      },
      series: [
        {
          type: 'radar', // radar 此图表时一个雷达图
          label: { // 设置标签的样式
            show: true // 显示数值
          },
          areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
          data: [
            {
              name: '华为手机',
              value: [80, 90, 80, 82, 90]
            },
            {
              name: '中兴手机',
              value: [70, 82, 75, 70, 78]
            }
          ]
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

仪表盘

仪表盘主要用在进度把控及数据范围的检测。在series下设置****

  • 设置给series下的data，{value: 97,itemStyle: { // 指针的样式color: 'pink' // 指针的颜色}

  • min max 控制仪表盘数值范围min:50

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>

  <script>
    //1. ECharts最基本的代码结构
    //2. 准备数据, 设置给series下的data
    //3. 将type的值设置为gauge
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      series: [
        {
          type: 'gauge',
          data: [
            {
              value: 97,
              itemStyle: { // 指针的样式
                color: 'pink' // 指针的颜色
              }
            }, // 每一个对象就代表一个指针
            {
              value: 85,
              itemStyle: {
                color: 'green'
              }
            }
          ],
          min: 50 ,// min max 控制仪表盘数值范围
          max:90
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

进阶

主题

内置主题

Echarts中默认内置了两套主题:light、dark

在初始化对象方法init中可以指明

1
2
var mCharts = echarts.init(document.querySelector("div"), 'light')
var mCharts = echarts.init(document.querySelector("div"), 'dark')

自定义主题

定义主题地址https://echarts.apache.org/zh/theme-builder.html

  • 1.在主题编辑器中编辑主题

  • 2.下载主题，是一个js文件

  • 3.引入主题js文件

  • 4.在init方法中使用主题

调色盘

主题调色盘。调色盘是一个color数组，主题调色盘定义在注册主题的对象中(下载的自定义主题js文件)

1
2
3
4
5
6
7
8
9
echarts.registerTheme('itcast', {
    "color": [
        "#893448",
        "#d95850",
        "#eb8146",
        "#ffb248",
        "#f2d643",
        "#ebdba4"
    ],...)

全局调色盘。全局调色盘会覆盖主题调色盘。我们可以直接在option中定义color数组，来覆盖图标的一部分颜色。

1
2
3
4
5
6
7
8
9
var option = {
  color: ['red', 'green', 'blue', 'skyblue', 'purple'],
  series: [
    {
      type: 'pie',
      data: pieData,
            }
  ]
};

**局部调色盘。**直接定义在series中的colors数组。由于调色盘采取就近原则，因此局部调色盘会覆盖全局调色盘。

1
2
3
4
5
6
7
8
9
10
11
var option = {
  //会被覆盖掉
  color: ['red', 'green', 'blue', 'skyblue', 'purple'],
  series: [
    {
      type: 'pie',
      data: pieData,
      color: ['pink', 'yellow', 'black', 'orange', 'red']
    }
  ]
};

颜色渐变

线型渐变。配置在series中的itemStyle对象中的color属性上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
itemStyle: {
         color: {
           type: 'linear', // 线性渐变
           x: 0,
           y: 0,
           x2: 0,
           y2: 1,
           colorStops:[
             {
               offset: 0, color: 'red' // 0%处的颜色为红色
             },
             {
               offset: 1, color: 'blue' // 100%处的颜色为蓝
             }
           ]
         }

径向渐变。配置在series中的itemStyle对象中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
itemStyle: {
  color: {
    type: 'radial', // 径向渐变圆心点，半径
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [
      {
        offset: 0, color: 'red' // 0%处的颜色为红色
      },
      {
        offset: 1, color: 'blue' // 100%处的颜色为蓝
      }
    ]
  }
}

样式

优先级搞，会覆盖三种调色盘效果。

  • 直接样式:itemStyle、textStyle、lineStyle、areaStyle、label

  • 高亮样式(鼠标移动到表上显示的样式)。在emphasis中包裹以上属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      title: {
        text: '饼图的测试',
        textStyle: { // 控制标题的文字样式
          color: 'blue'
        }
      },
      series: [
        {
          type: 'pie',
          data: [{
            value: 11231,
            name: "淘宝",
            // 控制淘宝这一区域的样式
            itemStyle: { color: 'yellow'},
            label: {color: 'green'},
            emphasis: {
              // 控制淘宝这一区域的样式
              itemStyle: { color: 'pink'},
              label: { color: 'black'}
            }
          },
              {value: 22673,name: "京东"},
              {value: 6123,name: "唯品会",},
              { value: 8989, name: "1号店"},
              {value: 6700, name: "聚美优品"}]
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>

自适应

当浏览器大小发生变化时，图表大小也会跟着变化。图表父元素宽度设置100%或者不设置，监听window窗口大小变化的事件，调用resize()方法重新生成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
  <!-- 图表的父容器的宽度没有设置 -->
  <!-- 此时图表的宽度就是浏览器窗口的宽度 -->
  <div style="height:400px;border: 1px solid red"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              {type: 'max', name: '最大值'},{type: 'min', name: '最小值'}
            ]
          },
          markLine: {
            data: [
              {type: 'average', name: '平均值'}
            ]
          },
          label: {show: true,rotate: 60 },
          barWidth: '30%'
        }
      ]
    }
    mCharts.setOption(option)
    // 监听window窗口大小变化的事件，调用resize()方法重新生成
    window.onresize = function(){
      // console.log('window.onresize...')
      // 调用echarts实例对象的resize方法
      mCharts.resize()
    }
     // 不加括号是赋值，加了括号是立即调用
    // window.onresize = mCharts.resize
  </script>
</body>
</html>

动画

加载动画

Echarts已经内置好了加载数据的动画，我们只需要在获取数据之前加载动画，在获取数据之后隐藏动画。

  • 显示加载动画 mCharts.showLoading()

  • 隐藏加载动画 mCharts.hideLoading()

本案例通过ajax加载服务器数据

test_data.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    // var data =
    var mCharts = echarts.init(document.querySelector("div"))
    mCharts.showLoading() // 在获取数据之前, 显示加载动画。网速慢的时候或者服务器加载失败会显示loading动画
    $.get('data/test_data.json', function (ret) {
      mCharts.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      var axisData = []
      for (var i = 0; i < ret.length; i++) {
        var height = ret[i].height
        var weight = ret[i].weight
        var itemArr = [height, weight]
        axisData.push(itemArr)
      }
      console.log(axisData)
      var option = {
        xAxis: {
          type: 'value',
          scale: true
        },
        yAxis: {
          type: 'value',
          scale: true
        },
        series: [
          {
            type: 'effectScatter',
            data: axisData,
            symbolSize: function (arg) {
              // console.log(arg)
              var weight = arg[1]
              var height = arg[0] / 100
              // BMI > 28 肥胖
              // BMI: 体重/ 身高*身高     kg  m
              var bmi = weight / (height * height)
              if (bmi > 28) {
                return 20
              }
              return 5
            },
            itemStyle: {
              color: function (arg) {
                console.log(arg)
                var weight = arg.data[1]
                var height = arg.data[0] / 100
                var bmi = weight / (height * height)
                if (bmi > 28) {
                  return 'red'
                }
                return 'green'
              }
            },
            showEffectOn: 'emphasis',
            rippleEffect: {
              scale: 10
            }
          }
        ]
      };
      mCharts.setOption(option)
    })
  </script>
</body>
</html>

增量动画

图表展示出来之后，修改数据或者配置,Echarts会找到两组数据之间的差异，然后或自动通过合适的动画去表现数据的变化。

  • 增量动画 myCharts.setOption(option)(无论什么时候定义配置变量名称都是option)

  • 所有数据的更新都通过setOption实现。

  • 新旧option的关系并不是相互覆盖的关系, 是相互整合的关系。

  • setOption 可以设置多次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <button id="modify">修改数据</button>
  <button id="add">增加数据</button>
  <script>
    var mCharts = echarts.init(document.querySelector("div"),'dark')
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              { type: 'max', name: '最大值'},{type: 'min', name: '最小值' }
            ]
          },
          markLine: {
            data: [
              { type: 'average', name: '平均值'}
            ]
          },
          label: {
            show: true,
            rotate: 60
          },
          barWidth: '30%'
        }
      ]
    }
    mCharts.setOption(option)
    var btnModify = document.querySelector('#modify')
    btnModify.onclick = function () {
      var newYDataArr = [68, 32, 99, 77, 94, 80, 72, 86]
      // setOption 可以设置多次
      // 新的option 和 旧的option
      // 新旧option的关系并不是相互覆盖的关系, 是相互整合的关系
      // 我们在设置新的option的时候, 只需要考虑到变化的部分就可以
      var option = {
        series: [
          {
            data: newYDataArr
          }
        ]
      }
      mCharts.setOption(option)
    }
    var btnAdd = document.querySelector('#add')
    btnAdd.onclick = function(){
      xDataArr.push('小明')
      yDataArr.push(90)
      var option = {
        xAxis: {
          data: xDataArr
        },
        series: [
          {
            data: yDataArr
          }
        ]
      }
      mCharts.setOption(option)
    }
  </script>
</body>
</html>

动画配置

常用动画配置。在option下配置。

  • 开启动画animation:true

  • 动画时长animationDuration:5000也可以跟回调函数，默认传参打印如下

  • 缓动动画animationEasing:'bounceOut'

  • 动画阈值animationThreshold:8单种形式的元素数量大于这个阈值时会关闭动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      animation: true,  // 控制动画是否开启
      // animationDuration: 7000, // 动画的时长, 它是以毫秒为单位
      animationDuration: function(idx){
        console.log(idx)
        return 2000 * idx
      },
      animationEasing: 'bounceOut', // 缓动动画
      // animationThreshold: 7, // 动画元素的阈值
      xAxis: {type: 'category',data: xDataArr},
      yAxis: {type: 'value'},
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [{ type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}]
          },
          markLine: {
            data: [{type: 'average', name: '平均值'}]
          },
          label: {show: true,rotate: 60},
          barWidth: '30%'
        }
      ]
    };
    mCharts.setOption(option)
  </script>
</body>
</html>

交互API

全局echarts对象

全局echarts对象是引入echarts.js文件之后就可以直接使用的对象

  • init方法。初始化Echasrts实例对象；使用主题。

  • registerTheme方法。注册主题，只有注册过的主题才能在init方法中使用。

  • registerMap方法。注册地图数据。geo组件使用地图数据。

  • connect方法可以实现多图关联。传入联动目标为echarts实例对象，支持数组

&#x20; 保存图片的自动拼接

&#x20; 刷新按钮

&#x20; 重置按钮

&#x20; 提示框联动、图例选择、数据范围修改等……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <style type="text/css">
    .biao {
      display: flex;
      height: 500px;
      justify-content: space-between;
    }
    #div1,#div2{
      flex:1;
      width: 50%;
    }
  </style>
</head>

<body>
  <div class="biao">
    <div style="height:400px;border: 1px solid red" id="div1"></div>
    <div style="height:400px;border: 1px solid green" id="div2"></div>
  </div>
  <script>
    var mCharts = echarts.init(document.querySelector("#div1"), 'dark')
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'bar',
        data: yDataArr,
        markPoint: {
          data: [{
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        },
        markLine: {
          data: [{
            type: 'average',
            name: '平均值'
          }]
        },
        label: {
          show: true,
          rotate: 60
        },
        barWidth: '30%'
      }]
    }
    mCharts.setOption(option)

    var mCharts2 = echarts.init(document.querySelector('#div2'))
    $.get('json/map/china.json', function (ret) {
      echarts.registerMap('aa', ret)
      var option2 = {
        geo: {
          type: 'map',
          map: 'aa'
        }
      }
      mCharts2.setOption(option2)
      // echarts.connect([mCharts, mCharts2]) // 将柱状图和地图关联起来
    })
    window.onresize = mCharts.resize
  </script>
</body>

</html>

echartsInstance对象

echartsInstance对象是通过echarts.init方法调用之后得到的对象

  • setOption方法。设置或修改图标实例的配置项以及数据；多次调用,合并新旧配置。

  • resize方法。重新计算和绘制图标；一般和window对象的resize事件结合使用window.onresize=mychart.resize

  • on\off方法。绑定或者解绑事件处理函数。mycharts.on('click',function(arg){})及mycharts.off('click')

&#x20; 常见鼠标事件click,dbclick,mousedown,mousemove,mouseup等，事件参数。

&#x20; echarts常见事件legendselectchanged,datazoom,pieselectchanged,mapselectchanged等

  • dispatchAction方法。触发某些行为，使用代码模拟用户的行为.
1
2
3
4
5
6
// 模拟用户的行为
mCharts.dispatchAction({
  type: 'highlight',
  seriesIndex: 0, // 系列的索引
  dataIndex: 1 // 数据的索引
})

  • clear方法。清除当前实例，会移除实例中所有的组件和图标；清空之后可以再次setOption

  • dispose方法。销毁示例，没法再次setOption使图表重新显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
  <div style="width: 600px;height:400px"></div>
  <button id="btn1">触发行为</button>
  <button id="btn2">clear</button>
  <button id="btn3">setOption</button>
  <button id="btn4">dispose</button>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var pieData = [
      {value: 11231,name: "淘宝",},{value: 22673,name: "京东"},{value: 6123,name: "唯品会"},
      {value: 8989,name: "1号店"},{value: 6700,name: "聚美优品"}
    ]
    var option = {
      legend: {data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品']},
      tooltip: {
        show: true
      },
      series: [
        {type: 'pie', data: pieData}
      ]
    }
    mCharts.setOption(option)
    mCharts.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听
    mCharts.off('click') // 解绑click的事件
    mCharts.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    $('#btn1').click(function () {
      // 模拟用户的行为
      mCharts.dispatchAction({
        type: 'highlight',
        seriesIndex: 0, // 系列的索引
        dataIndex: 1 // 数据的索引
      })
      mCharts.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 2
      })
    })
    $('#btn2').click(function () {
      // 清空图表的实例
      mCharts.clear()
    })
    $('#btn3').click(function () {
      // 重新设置option
      mCharts.setOption(option)
    })

    $('#btn4').click(function () {
      // 销毁mCharts
      mCharts.dispose()
    })
  </script>
</body>
</html>



-   END   -