一文搞定Echarts种7种基本图表

本文最后更新于：8 个月前

起步

数据可视化概念和作用

  1. 将数据以图表的形式呈现
  2. 更有效的传递数据中的信息

常见的可视化工具有

  • 报表类
  • BI类
  • 编程类

ECharts介绍

ECharts是一个javascript实现的开源可视化库，兼容性强，底层依靠矢量图形库ZRender，提供直观，交互丰富，可高度定制的数据可视化图表。
ECharts 能够做出各种各样漂亮的图表，它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便, 功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址：https://echarts.apache.org/zh/index.html

ECharts中常用的图表

  • 柱状图
    柱状图
  • 折线图
    折线图
  • 散点图
    散点图
  • 饼图
    饼图
  • 地图
    地图
  • 雷达图
    雷达图
  • 仪表盘
    仪表盘

柱状图的基本实现

将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
<!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>
  <!-- 引入echarts.min.js -->
  <script src="../lib/echarts.min.js"></script>
</head>
<body>
  <!-- 创建echarts容器 -->
  <div style="width: 600px; height: 400px;"></div>
  <script>
    // 创建echarts实例
    const mEchart=echarts.init(document.querySelector('div'))
    /**
     * 创建x轴与y轴数据
     */
    let xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'];
    let yDataArr = [88, 92, 63, 77, 94, 80, 72, 86];
    /**
     * 准备配置项
     */
    const option={
      xAxis:{
        type:'category',
        data:xDataArr
      },
      yAxis:{
        type:'value'
      },
      series:{
        name:'成绩',
        type:'bar',
        barWidth: '30%', // 柱的宽度
        label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 60, // 旋转角度
            position: 'top' // 显示位置
          },
        markPoint:{
          data:[
            {type:'min',name:'最小值'},
            {type:'max',name:'最大值'}
          ]
        },
        markLine:{
          data:[
            {       name: '平均线',
              // 支持 'average', 'min', 'max'
             type: 'average'}
          ]
        },
        data:yDataArr
      }
    }
    mEchart.setOption(option);
  </script>
</body>
</html>

折线图的实现

  • 与柱状图类似将type设置为‘line’就行了
  • 常见配置：markPoint,markLine,markArea(标注区间),smooth(是否为平滑曲线),lineStyle(线条样式),areaStyle(线与x轴的样式，填充风格),…..堆叠图（stack），在x与y轴设置 scale: 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
    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
    <!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>
        //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 option = {
          xAxis: {
            type: 'category',
            data: xDataArr
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '康师傅',
              data: yDataArr,
              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: 'solid' // dashed dotted solid
              },
              areaStyle: { // 线和x轴形成的区域设置
                color: 'pink'
              }
            }
          ]
        }
        mCharts.setOption(option)
      </script>
    </body>

    </html>

散点图基本实现

  • 散点图的概念：可以帮助我们推断出变量的相关性（例如身高与体重的关系）
  • x轴，y轴数据为二维数据
  • 在series配置项下设置为type：scatter， 注意xAxis与yAxis的type都要设置为value
  • 常见效果：散点气泡,在series中设置配置项。涟漪动画，在series中设置
    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="lib/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": 161.2, "weight": 51.6 } .................] //散点数据补充
       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', // 指明图表的类型为散点图
              data: axisData
            }
          ]
        }
        mCharts.setOption(option)
      </script>
    </body>
    </html>

    饼图的实现

  • 数据准备：一个数组，数组内为对象
  • 图表类型为 ：type:’pie’ 
    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="lib/echarts.min.js"></script>
    </head>

    <body>
      <div style="width: 600px;height:400px"></div>
      <script>
        //1. ECharts最基本的代码结构
        //2. 准备数据[{name:???, value:??? },{}]
        //   淘宝: 11231  京东: 22673  唯品会: 6123  1号店: 8989   聚美优品: 6700
        //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，矢量地图
  • 步骤
    1. ECharts最基本的代码结构
    2. 准备中国地图的矢量数据
    3. 使用Ajax获取矢量地图数据
    4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap(‘chinaMap’, 矢量地图数据)
    5. 配置geo的type为’map’, map为’chinaMap’
  • 常见效果：
    1. 显示某个区域
    2. 不同城市空气质量来显示不同颜色
    3. 地图和散点图的结合
      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
      <!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>
        <script src="../lib/jquery.min.js"></script>
      </head>

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

        <script>
          //1. ECharts最基本的代码结构
          //2. 准备中国地图的矢量数据
          //3. 使用Ajax获取矢量地图数据
          //4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据)
          //5. 配置geo的type为'map', map为'chinaMap' 
          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 // 展示标签
                },
                zoom: 1, // 设置初始化的缩放比例
                center: [87.617733, 43.792818] // 设置地图中心点的坐标
              }
            }
            mCharts.setOption(option)
          })
        </script>
      </body>

      </html>

      雷达图的实现

      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="lib/echarts.min.js"></script>
      </head>

      <body>
        <div style="width: 600px;height:400px"></div>
        <script>
          //1. ECharts最基本的代码结构
          //2. 定义各个维度的最大值, 通过radar属性配置
          //   易用性,功能,拍照,跑分,续航, 每个维度的最大值都是100
          //3. 准备产品数据, 设置给series下的data
          //   华为手机1: 80, 90, 80, 82, 90
          //   中兴手机1: 70, 82, 75, 70, 78
          //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: '华为手机1',
                    value: [80, 90, 80, 82, 90]
                  },
                  {
                    name: '中兴手机1',
                    value: [70, 82, 75, 70, 78]
                  }
                ]
              }
            ]
          }
          mCharts.setOption(option)
        </script>
      </body>

      </html>

      仪表盘实现

      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="lib/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 控制仪表盘数值范围
              }
            ]
          }
          mCharts.setOption(option)
        </script>
      </body>

      </html>

关于

echarts更重要的是配置项的配置，在实际开发过程请参考查阅官网地址：https://echarts.apache.org/zh/index.html

Echarts
Echarts

本博客所有文章除特别声明外，如需转载或引用，请注明出处！