ECharts数据可视化学习笔记（温故而知新）

VIP文章南河③

已于 2023-07-14 12:21:20 修改

阅读量115

点赞数

分类专栏：前端学习笔记文章标签： echarts 笔记前端数据可视化

于 2023-07-14 12:15:19 首次发布

本文链接：https://blog.csdn.net/qq_64510496/article/details/131720746

版权

数据可视化概念

数据可视化的概念和作用

将数据以图表的形式呈现
更有效的传达数据中的信息

常见的可视化工具

报表类
BI类
编程类

ECharts基础使用

ECharts的介绍

ECharts是一个使用JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表
ECharts能满足绝大多数可视化图表实现
- 兼容性强
- 使用方便
- 功能强大
ECharts官网

ECharts的特点

丰富的可视化类型
- 折线图、柱状图、饼图、线图…
多种数据格式支持
- key-value数据格式
- 二维表
- TypedArray格式
流数据的支持
- 流数据的动态渲染
- 增量渲染技术
移动端优化
跨平台使用
绚丽的特效
三维可视化
…

ECharts的快速入门

5分钟上手ECharts
- 步骤1：引入echarts.js文件
- 步骤2：准备一个呈现图表的盒子
- 步骤3：初始化echarts实例对象
- 步骤4：准备配置项
- 步骤5：将配置项设置给echarts实例对象

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 步骤1：引入echarts.js文件 -->
    <script src="lib/echarts.min.js"></script>
  </head>

  <body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 步骤3：初始化echarts实例对象
      var myChart = echarts.init(document.getElementById('main'))
      // 步骤4：准备配置项
      var option = {
     
        title: {
     
          text: 'ECharts 入门示例'
        },
        tooltip: {
     },
        legend: {
     
          data: ['销量']
        },
        xAxis: {
     
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {
     },
        series: [{
     
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };
      // 步骤5：将配置项设置给echarts实例对象
      myChart.setOption(option)
    </script>
  </body>

</html>

ECharts的配置项

基础配置
- xAxis：直角坐标系中的x轴（类目轴category``数值轴value）
- yAxis：直角坐标系中的y轴
- series：系列列表，每个系列通过 type 决定自己的图表类型
通用配置
- title：标题，用于配置标题的各种样式
  - 文字样式：textStyle
  - 标题边框：borderWidth``borderColor``borderRadius
  - 标题位置：left``top``right``bottom
- tooltip：提示框，用于配置鼠标滑过或点击图标时的显示框
  - 触发类型：trigger（鼠标在圆柱内:item``鼠标在竖轴内:axis）
  - 触发时机：triggerOn（鼠标经过:mouseover``鼠标点击:click）
  - 格式化：formatter（字符串模板``回调函数）
- toolbox：ECharts提供的工具栏
  - 显示工具栏按钮：feature
    - 内置导出图片:saveAsImage
    - 数据视图:dataView
    - 重置:restore
    - 数据区域缩放:dataZoom
    - 动态类型切换:magicType
- legend：图例，用于筛选系列，需要和series配合使用
  - legend中的data是一个数组
  - legend中的data的值需要和series数组中某组数据的name值一致（全筛选可省略data，默认都有）

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="lib/echarts.min.js"></script>
  </head>

  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'))
      var option = {
     
        //配置标题
        title: {
     
          text: '成绩展示',
          textStyle: {
     	//文字样式
            color: 'red'
          },
          borderWidth: 5,	//边框宽度
          borderColor: 'blue',	//边框颜色
          borderRadius: 10,	//边框圆角
          left: 50,	//边框位置
          top: 10
        },
        //配置提示框
        tooltip: {
     
          trigger: 'item',	//触发类型
          triggerOn: 'click',	//触发时机
          formatter: function (arg) {
     	//格式化内容
            return arg.name + '的分数是:' + arg.data
          }
        },
        //配置工具栏
        toolbox: {
     
          feature: {
     
            saveAsImage: {
     }, //导出图片功能
            dataView: {
     }, //数据视图
            restore: {
     }, //重置
            dataZoom: {
     }, //数据区域缩放
            magicType: {
       //动态类型切换
              type: ['bar', 'line']
            }, 
          }
        },
        //配置图例筛选
        legend: {
     
          data: ['语文', '数学'] //都显示时可以省略
        },
        //配置X轴
        xAxis: {
     
          type: 'category',
          data: ['张三', '李四', '王五', '小明']
        },
        //配置Y轴
        yAxis: {
     
          type: 'value',
        },
        //配置图表系列
        series: [
          {
     
            name: '语文',
            type: 'bar',
            data: [56, 81, 34, 90],
            //显示最大值最小值
            markPoint: {
     
              data: [{
      type: 'max' }, {
      type: 'min' }]
            },
            //显示平均值
            markLine: {
     
              data: [{
      type: 'average' }]
            },
            //显示数值
            label: {
     
              show: true,
              rotate: 10,
              position: 'top'
            },
            //设置柱宽度
            barWidth: '20%',

          },
          {
     
            name: '数学',
            type: 'bar',
            data: [86, 61, 64, 40]
          }
        ]
      };
      myChart.setOption(option)
    </script>
  </body>

</html>

ECharts的常用图表

7大图表：柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图

柱状图

基本的柱状图：

基本的代码结构
x轴和y轴的数据
series中的type设置为bar

柱状图常见效果：

最大值/最小值 markPoint
平均值 markLine
数值的显示 label
柱的宽度 barwidth

柱状图特点：

柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="lib/echarts.min.js"></script>
  </head>

  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'))
      var option = {
     
        xAxis: {
     
          type: 'category',
          data: ['张三', '李四', '王五', '小明']
        },
        yAxis: {
     
          type: 'value',
        },
        series: [
          {
     
            name: '语文',
            type: 'bar',
            data: [56, 81, 34, 90],
            //显示最大值最小值
            markPoint: {
     
              data: [{
      type: 'max' }, {
      type: 'min' }]
            },
            //显示平均值
            markLine: {
     
              data: [{
      type: 'average' }]
            },
            //显示数值
            label: {
     
              show: true, //显示
              rotate: 10,	//角度
              position: 'top' //位置
            },
            //设置柱宽度
            barWidth: '30%',

          }
        ]
      };
      myChart.setOption(option)
    </script>
  </body>

</html>

折线图

基本的折线图：

基本的代码结构
x轴和y轴的数据
series中的type设置为line

折线图常见效果：

最大值/最小值 markPoint
平均值 markLine
标注区间 markArea
线条控制 smooth``lineStyle（平滑、风格）
填充风格 areaStyle
紧挨边缘 boundaryGap
缩放:脱离0值比 scale
堆叠图 stack

折线图特点：

折线图常用来分析数据随时间的变化趋势

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="lib/echarts.min.js"></script>
  </head>

  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'))
      var option = {
     
        xAxis: {
     
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
          //配置紧挨边缘
          boundaryGap: false
        },
        yAxis: {
     
          type: 'value',
          //配置缩放:脱离0值比例
          scale: true
        },
        series: [
          {
     
            name: '康师傅',
            type: 'line',
            //配置堆叠图,两个图的该值要相同
            stack: 'all',
            data: [1000, 2000, 3000, 2000, 2000, 2500, 1500, 3500, 2200],
            //显示最大值最小值
            markPoint: {
     
              data: [{
      type: 'max' }, {
      type: 'min' }]
            },
            //显示平均值
            markLine: {
     
              data: [{
      type: 'average' <