全面详解ECharts4数据可视化，让你的数据穿上漂亮的新衣吧

编程语言 2023-06-25 10:55:42 阅读次数: 0

目录

第一章：ECharts简介

1.1、ECharts概述

返回目录

  • ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
  • ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
  • ECharts，全称Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，能够流畅的运行在PC以及移动设备上，兼容当前绝大部分浏览器。
  • 为我们许多提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
  • 能够支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，
  • 同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，
  • 支持多图表、组件的联动和混搭展现。

1.2、ECharts的特性

返回目录

（1）可视化类型丰富
ECharts提供了很多图的实现方式，包括折线图、柱状图、散点图、饼图、K线图、箱线图、地图、关系图、矩形树图、旭日图、漏斗图、仪表盘等
除此之外，ECharts还提供了自定义系列，从而能扩展出不同的图表
（2）支持多种数据格式
在ECharts 4.0以上版本，ECharts的dataset属性支持传入的数据格式除了二维表，还有键值对等。
（3）千万数据前端流畅展现
ECharts 4.0以上版本的增强渲染技术实现了千万数据量展现时仍然可流畅交互，如缩放和平移等操作。对流加载的支持使数据可以分块加载与渲染，用户体验更佳。
（4）动态数据的动画展示
当数据变化时，ECharts通过内部合适的动画变化展现出新数据的可视化，常常配合时间序列数据展示
（5）更多、更强大的三维可视化
ECharts提供了ECharts GL，可以实现三维地球、建筑等可视化效果，可应用在VR、大屏场景中，效果更加酷炫。
（6）跨平台适用
ECharts具有不同的渲染方案，可以在不同平台良好适配。例如，ECharts 4.0以上版本的SVG渲染使得移动端无须担忧内存，Canvas渲染使PC端可以展现大数据量的特效，且ECharts 4.0开始适配微信小程序
（7）数据深度探索
ECharts支持用户交互挖掘数据中的信息，同时提供图例、视觉映射、数据区域缩放等便捷的交互组件，使用户可以从总览开始挖掘数据展示的细节
（8）无障碍访问
ECharts 4.0遵从W3C指定的无障碍富互联网应用规范集，支持对可视化生成描述，使盲人可以通过语音了解图表的内容。

除以上提到的ECharts特性，还有更多惊喜存在ECharts中，大家在今后的学习中可以慢慢挖掘。

1.3、ECharts 对比 Highcharts

返回目录

Highcharts是用JavaScript编写的图表库，支持各种常用的可视化。作为同类可视化产品，ECharts 与Highcharts的对比如下
1.图表种类角度
目前ECharts和Highcharts的官网展示的共有可视化图大致相同，不同的是，ECharts 官网还展示了树图、路径图、旭日图、象形图、日历坐标系等，Highcharts官网还展示了子弹图、蜂巢图等。
2.是否免费
ECharts 免费。Highcharts学习免费，商业付费使用
3.可视化技术角度
最新的ECharts 支持Canvas和SVG两种渲染方式，Highcharts支持SVG渲染方式

Canvas（画布）容纳所有UI元素。Canvas是一个挂载了Canvas Component组件的Game Object，所有UI元素都必须是它的子节点，不支持事件处理。

SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。不适合游戏应用。

第二章：搭建开发环境

2.1、安装ECharts

返回目录

官网好像点击这个链接也进不去了
在这里插入图片描述
下载四种方式：直接下载，npm，github，CDN引入

直接下载：
我们可以在直接下载 echarts.min.js 并用 <script>标签引入。
https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js
另外，开发环境下可以使用源代码版本 echarts.js 并用 <script> 标签引入，源码版本包含了常见的错误提示和警告。
https://cdn.staticfile.org/echarts/4.7.0/echarts.js

我们也可以在 ECharts 的官网上直接下载更多丰富的版本，包含了不同主题跟语言，
下载地址：https://echarts.apache.org/zh/download.html。(暂时无法访问)
这些构建好的 echarts 提供了下面这几种定制：

CDN：

NPM 方法
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

npm 版本需要大于 3.0，如果低于此版本需要升级它：

查看版本
npm -v
2.3.0
升级 npm
cnpm install npm -g
升级或安装 cnpm
npm install cnpm -g

最新稳定版
$ cnpm install echarts --save

实例:

var echarts = require('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]
    }]
});

2.2、简单使用ECharts

返回目录

这里利用CDN引入测试，实际开发请下载

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '第一个 ECharts 实例'
            },
            tooltip: {
      
      },
            legend: {
      
      
                data:['销量']
            },
            xAxis: {
      
      
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
      
      },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

运行效果：
在这里插入图片描述

第三章：组件详解

3.1、配置语法

返回目录

第一步：创建 HTML 页面
创建一个 HTML 页面，引入 echarts.min.js：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

第二步: 为 ECharts 准备一个具备高宽的 DOM 容器
实例中 id 为 main 的 div 用于包含 ECharts 绘制的图表:

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

第三步: 设置配置信息
ECharts 库使用 json 格式来配置

echarts.init(document.getElementById('main')).setOption(option);

这里 option 表示使用 json 数据格式的配置来绘制图表。步骤如下：

标题

为图表配置标题：

title: {
    
    
    text: '第一个 ECharts 实例'
}

提示信息

配置提示信息：
tooltip: {},

图例组件

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
    
    
    data: [{
    
    
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
    
    
            color: 'red'
        }
    }]
}

X 轴

配置要在 X 轴显示的项:

xAxis: {
    
    
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}

Y 轴

配置要在 Y 轴显示的项。
yAxis: {}
系列列表

每个系列通过 type 决定自己的图表类型:

series: [{
    
    
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

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

  • type: ‘bar’：柱状/条形图
  • type: ‘line’：折线/面积图
  • type: ‘pie’：饼
  • type: ‘scatter’：散点（气泡）图
  • type: ‘effectScatter’：带有涟漪特效动画的散点（气泡）
  • type: ‘radar’：雷达图
  • type: ‘tree’：树型图
  • type: ‘treemap’：树型图
  • type: ‘sunburst’：旭日图
  • type: ‘boxplot’：箱形图
  • type: ‘candlestick’：K线图
  • type: ‘heatmap’：热力图
  • type: ‘map’：地图
  • type: ‘parallel’：平行坐标系的系列
  • type: ‘lines’：线图
  • type: ‘graph’：关系图
  • type: ‘sankey’：桑基图
  • type: ‘funnel’：漏斗图
  • type: ‘gauge’：仪表盘
  • type: ‘pictorialBar’：象形柱图
  • type: ‘themeRiver’：主题河流
  • type: ‘custom’：自定义系列

实例
以下为完整的实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '第一个 ECharts 实例'
            },
            tooltip: {
      
      },
            legend: {
      
      
                data:['销量']
            },
            xAxis: {
      
      
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
      
      },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

大家可以改变类型试试，有些类型是不支持这种格式的，也是正常的

3.2、详细解析语法

3.2.1 标题

返回目录

在ECharts中，标题一般包括主标题和副标题，标题的相关参数配置可以在option中的title内配置。下面例举一些常用的参数

  • text：主标题文本，支持用\n换行
  • subtext：副标题文本，支持用\n换行
  • left：与容器左侧的距离，其取值可以是具体像素值，例如：10；也可以是相对于容器的百分比值，例如：10%；还可以是更常用的left、center、right，可以理解为左对齐、居中、右对齐。
  • show：是否显示标题组件，取值为布尔数据型数据，默认为true
title{
    
    
	text:"这是主标题",
	subtext:"这是副标题",
	left:"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>ECharts图表</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center'
            },
            tooltip: {
      
      },
            // legend: {
      
      
            //     data: ['销量']
            // },
            xAxis: {
      
      
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
      
      },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

运行结果：
在这里插入图片描述

3.2.2 提示框

返回目录

在ECharts中，提示框组件成为tooltip，它的作用是在合适的时机向用户提供相关信息。

  • trigger：触发类型，可选的参数有item（图形触发）、axis（坐标轴触发）、none（不触发）。

  • formatter：提示框浮层内容格式器，一般使用字符串模板，模板变量有{a},{b},{c},{d},{e},分别表示系列名、数据名、数据值等。其中变量{a},{b},{c},{d} 在不同图表类型下代表的数据含义如下所示

    • 折线（区域）图、柱状（条形）图、K线图：{a}（系列名称），{b}（类型值），{c}（数值），{d}（无）
    • 散点图（气泡）图：{a}（系列名称），{b}（数据名称），{c}（数值数组），{d}（无）
    • 地图：{a}（系列名称），{b}（区域名称），{c}（合并数值），{d}（无）。
    • 饼图、仪表盘、漏洞图：{a}（系列名称），{b}（数据项名称），{c}（数值），{d}（百分比）

  • axisPointer：坐标轴指示器配置项，type是该参数的子参数，作用为设置指示器类型，取值可选line（直线指示器），shadow（阴影指示器），cross（十字准星指示器），none（无指示器）

  • show：是否显示提示框组件，取值为布尔型数据，默认为true。

tooltip:{
    
    
	trigger:'axis',
	axisPointer:{
    
    
		type:'shadow'
	}
}

完整代码:

<!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>ECharts图表</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center'
            },
            tooltip: {
      
      
                trigger: 'axis',
                axisPointer: {
      
      
                    type: 'shadow'
                }
            },
            // legend: {
      
      
            //     data: ['销量']
            // },
            xAxis: {
      
      
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
      
      },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述

3.2.3 工具栏

返回目录

在ECharts中，工具栏组件称为toolbox，通过设置工具栏，我们可以将可视化下载到本地，或者查看可视化的底层数据等。

  • show：是否显示工具栏组件，取值为布尔型数据，默认为：true。
  • featrue：各工具配置项，其中包含很多常用的子参数，例如saveAsImage、restore、dataView、magicType等。其中，saveAsImage是将可视化结果保存在本地，restore是将可视化还原到初始的设置，dataView可以看到可视化的底层数据视图，magicType则可以将一种可视化转为另一种可视化。
		toolbox: {
    
    
                show: true,
                feature: {
    
    
                    mark: {
    
    
                        show: true
                    },
                    dataView: {
    
    
                        show: true,
                        readOnly: false
                    },
                    magicType: {
    
    
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
    
    
                        show: true
                    },
                    saveAsImage: {
    
    
                        show: true
                    }

                }
            },

完整代码：

<!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>ECharts图表</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center'
            },
            tooltip: {
      
      
                trigger: 'axis',
                axisPointer: {
      
      
                    type: 'shadow'
                }
            },
            toolbox: {
      
      
                show: true,
                feature: {
      
      
                    mark: {
      
      
                        show: true
                    },
                    dataView: {
      
      
                        show: true,
                        readOnly: false
                    },
                    magicType: {
      
      
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
      
      
                        show: true
                    },
                    saveAsImage: {
      
      
                        show: true
                    }

                }
            },
            // legend: {
      
      
            //     data: ['销量']
            // },
            xAxis: {
      
      
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
      
      },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

运行结果:
在这里插入图片描述
演示一：转为数据视图
在这里插入图片描述
演示二：转为折线图
在这里插入图片描述
下载是以图片形式下载，大家可以试试

3.2.4 图例

返回目录

在ECharts中，图例组件称为legend，其作用是区分不同的数据展示。下面例举一些常用的参数

  • show：是否显示图例组件，取值为布尔类型的数据，默认为true。
  • left：与容器左侧的距离，其取值可以是具体像素值，例如：10；也可以是相对于容器的百分比值，例如：10%；还可以是更常用的left、center、right，可以理解为左对齐、居中、右对齐。
  • top：与容器顶部的距离，其取值可以是具体的像素值，例如10；也可以是相对于容器的百分比值，例如10%；还可以是更常用的top、middle、bottom，可以理解为处于顶部、处于中部、处于底部
  • orient：图例列表的布局朝向，默认是horizontal（水平的），也可以是vertical（竖直的）。
  • data：图例中的数据数组，通常与数据展示的系列一一对应，具体使用方法可参见下面的例子

这里用不同颜色的柱子分别表示销量和进货量，为了能区分且和名称对应上，需要使用图例
在这里插入图片描述

完整代码：

<!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>ECharts图表</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center'
            },
            tooltip: {
      
      
                trigger: 'axis',
                axisPointer: {
      
      
                    type: 'shadow'
                }
            },
            legend: {
      
      
                data: ['销量', '进货量'],
                left: 'right',
            },
            xAxis: {
      
      
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
      
      },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }, {
      
      
                name: '进货量',
                type: 'bar',
                data: [10, 50, 22, 15, 6, 15]

            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

结合前面学习知识，折线图也可以（或者其他图）
在这里插入图片描述
完整代码:

<!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>ECharts图表</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center'
            },
            tooltip: {
      
      
                trigger: 'axis',
                axisPointer: {
      
      
                    type: 'shadow'
                }
            },
            toolbox: {
      
      
                show: true,
                feature: {
      
      
                    magicType: {
      
      
                        show: true,
                        type: ['line', 'bar']
                    },
                },
                top: '20'
            },
            legend: {
      
      
                data: ['销量', '进货量'],
                left: 'right',
            },
            xAxis: {
      
      
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
      
      },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }, {
      
      
                name: '进货量',
                type: 'bar',
                data: [10, 50, 22, 15, 6, 15]

            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
3.2.5 时间轴

返回目录

在使用方法上，timeline和之前介绍的组件略有差距，使用时会存在多个option，可以将ECharts传统的option称为原子option，将使用timeline时用到的option称为包含多个原子option的复合option。使用timeline时的格式可以用下面的代码表示：
在如下代码中（图例后面）baseOption是一个“原子option”，options数组中每一项也是一个“原子option”。每个“原子option”中就是本文档描述的各种配置项
在这里插入图片描述
在这里插入图片描述
完整代码

<!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>ECharts图表</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var allOptions = {
      
      
            baseOption: {
      
      
                timeline: {
      
      
                    data: ['2020', '2021', '2022']
                },
                tooltip: {
      
      
                    trigger: 'axis',
                    axisPointer: {
      
      
                        type: 'shadow'
                    }
                },
                toolbox: {
      
      
                    show: true,
                    feature: {
      
      
                        magicType: {
      
      
                            show: true,
                            type: ['line', 'bar']
                        },
                    },
                    top: '20'
                },
                legend: {
      
      
                    data: ['销量', '进货量'],
                    left: 'right',
                },
                xAxis: [{
      
      
                    type: 'category',
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                }],
                yAxis: [{
      
      
                    type: 'value'
                }],
                series: [{
      
      
                    type: 'bar',
                }]
            },
            options: [{
      
       //这是'2020'对应的option
                title: {
      
      
                    text: '2020年销售情况'
                },
                series: [{
      
      
                    data: [300, 500, 450, 500, 320, 623]
                }]
            }, {
      
       //这是'2020'对应的option
                title: {
      
      
                    text: '2021年销售情况'
                },
                series: [{
      
      
                    data: [380, 300, 150, 700, 220, 266]
                }]
            }, {
      
       //这是'2020'对应的option
                title: {
      
      
                    text: '2022年销售情况'
                },
                series: [{
      
      
                    data: [450, 400, 350, 500, 320, 423]
                }]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(allOptions);
    </script>
</body>

</html>

比较常用的参数大多与播放设置相关，例如是否循环播放的loop参数，是否反向播放的rewind参数，播放速度playInterval参数，播放按钮的位置controlPosition参数等。

3.2.6 数据区域缩放

返回目录

在ECharts中，数据区域缩放组件称为dataZoom，它的作用是向用户提供区域缩放的功能，使用户可以通过区域缩放概览数据的整体情况，也能关注数据的细节
目前ECharts支持的区域缩放组件有如下几种：

  • 滑动条型数据区域缩放组件（dataZoomSlider）
  • 内置型数据区域缩放组件（dataZoomInside）
  • 框选型数据区域缩放组件（dataZoomSelect）

1.滑动条型数据区域缩放组件
滑动条型数据区域缩放组件比较常用的参数有以下几个。
1）xAxisIndex：指定控制的x轴。如果一个可视化中有多个图表，我们的区域缩放组件控制的是哪个轴呢？此时就需要指定这个参数的取值：如果取值是一个数字，则控制的是一个轴；如果取值是一个数组，那么控制的是多个轴。下面我们来看看示例代码;

option:{
    
    
	xAxis:[{
    
    
		{
    
    ...},//第一个xAxis
		{
    
    ...},//第二个xAxis
		{
    
    ...},//第三个xAxis
		{
    
    ...} //第四个xAxis
	}],
	dataZoom:[
		{
    
     //第一个dataZoom组件
			xAxisIndex:[0,3] //表示这个dataZoom组件控制第一个和第四个xAxis
		},
		{
    
    
			xAxisIndex: 2 //表示这个dataZoom组件控制第三个xAxis
		}
	]
}

此时第一个dataZoom组件控制的是第一个和第四个xAxis，而第二个dataZoom组件控制的是第三个xAxis
除了xAxisIndex，也有yAxisIndex，用法类似，这里不再赘述
2）filterMode：过滤模式，dataZoom数据窗口缩放的实质是数据过滤，即过滤掉窗口外的内容
过滤模式有多种，常用的可选值如下所示

  • fliter：过滤窗口外的数据。当可视化有多个轴时，会影响其他轴的数据范围，对于数据，只要有一个维度在窗口外，就会被过滤掉
  • weakFilter：过滤窗口外的数据。当可视化有多个轴时，会影响其他轴的数据范围，对于数据，只有当其所有维度都在窗口同侧外，才会被过滤掉
  • empty：不会影响其他轴的数据范围
  • none：不过滤数据，只会改变数轴范围

我们来看一个具体的例子，这里只设置了option
在这里插入图片描述

完整代码：

<!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>数据区域缩放</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            dataZoom: [{
      
      
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                filterMode: 'filter'
            }, {
      
      
                id: 'dataZoomY',
                type: 'slider',
                yAxisIndex: [0],
                filterMode: 'empty'
            }],
            xAxis: {
      
      
                type: 'value'
            },
            yAxis: {
      
      
                type: 'value'
            },
            series: {
      
      
                type: 'bar',
                data: [
                    //第一列对应x轴，第二列对应y轴
                    [10, 30],
                    [20, 50],
                    [5, 20],
                    [2, 10]
                ]
            }
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

从代码中可以看到，控制x轴的缩放模式为filter，控制y轴的缩放模式为empty，则x轴作为主轴，x的缩放会影响y轴的数据，y轴作为辅助轴，y轴的缩放不会影响x轴的数据。可以随意拖动x轴或者y轴滑动条的两端，或是拖动滑动条，实现窗口数据缩放

2.内置型数据区域缩放组件
所谓内置，是指该区域缩放的组件是内置在坐标系中的，其参数和上面提到的滑动条型数据区域缩放组件的参数基本一致，将上面的代码中的slider类型改为inside类型，代码如下所示：
在这里插入图片描述
完整代码：

<!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>数据区域缩放</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            dataZoom: [{
      
      
                id: 'dataZoomX',
                type: 'inside',
                xAxisIndex: [0],
                filterMode: 'inside'
            }, {
      
      
                id: 'dataZoomY',
                type: 'inside',
                yAxisIndex: [0],
                filterMode: 'empty'
            }],
            xAxis: {
      
      
                type: 'value'
            },
            yAxis: {
      
      
                type: 'value'
            },
            series: {
      
      
                type: 'bar',
                data: [
                    //第一列对应x轴，第二列对应y轴
                    [10, 30],
                    [20, 50],
                    [5, 20],
                    [2, 10]
                ]
            }
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

将鼠标悬停在可视化区域，滚动鼠标滚轮，可以发现可视化数据窗口在变化，所谓内置，其实就是将缩放内置在图中，不显示地出现在我们的视野中

3.框选型数据区域缩放组件

框选型，顾名思义，是通过选框来进行数据区域缩放，该组件在之前提到的toolbox中。下面我们来看个实例
在之前讲解toolbox时的代码中的toolbox.feature下加入dataZoom：{show：true}，为了看清楚toolbox，还要在toolbox下设置left：‘left’，得到以下的option代码：

<!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>数据区域缩放</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center', //居中显示
            },
            tooltip: {
      
      
                trigger: 'axis',
                axisPointer: {
      
      
                    type: 'shadow'
                }
            },
            toolbox: {
      
      
                show: true,
                left: 'left',
                feature: {
      
      
                    mark: {
      
      
                        show: true
                    },
                    dataView: {
      
      
                        show: true,
                        readOnly: false
                    },
                    magicType: {
      
      
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
      
      
                        show: true
                    },
                    saveAsImage: {
      
      
                        show: true
                    },
                    dataZoom: {
      
      
                        show: true
                    }
                }
            },
            legend: {
      
      
                data: ['各产品销售情况']
            },
            xAxis: {
      
      
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
      
      },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [200, 600, 205, 530, 352, 215]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述
在左上角的toolbox工具箱中，多了两个按钮，分别是"区域缩放"和"区域缩放还原"，点击"区域缩放按钮"，在可视化图中划出一个区域，即可对数据进行缩放，点击"区域缩放还原"，可以清除缩放并还原到最初的可视化状态

3.2.7 网格

返回目录

可以通过grid在可视化坐标系中控制可视化展示时的网格大小，常用的参数除了之前提到的位置参数，如left、top、right、bottom等，还有width（grid组件的宽度）、height（组件的高度），两者默认的参数都是auto，即自适应，当然也可以指定具体数值。
例图：
在这里插入图片描述
完整代码：

<!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>网格</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            //网格布局
            grid: [{
      
      
                x: '20%',
                y: '20%',
                width: '30%',
                height: '30%'
            }],
            title: {
      
      
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center', //居中显示
            },
            tooltip: {
      
      
                trigger: 'axis',
                axisPointer: {
      
      
                    type: 'shadow'
                }
            },
            toolbox: {
      
      
                show: true,
                left: 'left',
                feature: {
      
      
                    mark: {
      
      
                        show: true
                    },
                    dataView: {
      
      
                        show: true,
                        readOnly: false
                    },
                    magicType: {
      
      
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
      
      
                        show: true
                    },
                    saveAsImage: {
      
      
                        show: true
                    },
                    dataZoom: {
      
      
                        show: true
                    }
                }
            },
            legend: {
      
      
                data: ['各产品销售情况']
            },
            xAxis: {
      
      
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
      
      },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [200, 600, 205, 530, 352, 215]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

利用网格属性可以控制整个可视化视图的尺寸大小

3.2.8 坐标轴

返回目录

一般来说，我们最常用的坐标轴是直角坐标系，尤其是二维的直角坐标系，所以横轴(xAxis)和纵轴(yAxis)最常被使用。关于xAxis和yAxis的常用参数如下所示：

  • position：指定x轴的位置，可选参数有top（顶部）和bottom（底部）
  • type：指定坐标轴的类型。可选参数有四种：“value”，表示数值类型的轴，适用于连续型数据；“category”，表示类别类型的轴，适用于离散的类别型数据；”time“，表示时间类型的轴，适用于连续的时间序列数据；“log”，表示对数据；类型的轴，适用于对数数据
  • name：坐标轴的名称
  • nameLocation：坐标轴的名称显示位置。可选参数有三种：“start”，开始位置；“middle"或者"center”，中间位置；“end”，结束位置；

修改之前的代码，对option中的xAxis和yAxis添加部分参数，加入坐标轴的名称分别为横轴的"产品名称"和纵轴的"产品销量"，并将坐标轴名称都设置为居中显示（center）。加入文字显示时需偏移一定距离的原因是避免坐标轴名称文字与x轴、y轴的刻度上的文字重叠。具体代如下：

<!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>网格</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center', //居中显示
            },
            tooltip: {
      
      
                trigger: 'axis',
                axisPointer: {
      
      
                    type: 'shadow'
                }
            },
            toolbox: {
      
      
                show: true,
                left: 'left',
                feature: {
      
      
                    mark: {
      
      
                        show: true
                    },
                    dataView: {
      
      
                        show: true,
                        readOnly: false
                    },
                    magicType: {
      
      
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
      
      
                        show: true
                    },
                    saveAsImage: {
      
      
                        show: true
                    },
                    dataZoom: {
      
      
                        show: true
                    }
                }
            },
            legend: {
      
      
                data: ['各产品销售情况']
            },
            xAxis: {
      
      
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                name: '产品名称',
                nameLocation: 'center',
                nameGap: 35
            },
            yAxis: {
      
      
                name: '产品销量',
                nameLocation: 'center',
                nameGap: 40
            },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [200, 600, 205, 530, 352, 215]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述

3.2.9 数据系列

返回目录

一个图表可能包含多个系列，每一个系列可能包含多个数据，所以数据系列（series）主要作为数据的容器
对于每种可视化图标，series的形式并不完全相同。下面看一个饼图（pie）的series结构。
series是一个数组结构，使用中括号，中括号内的每个部分用大括号包含，每个大括号类似一个字典结构，包含键（key）和值（value）
例如代码中的name为键，"访问来源"为值；type指定了图为pie（饼图）；radius指定了饼图的半径大小，以图在图框中的占比表示大小；data中包含了饼图中每块饼的数据内容。除此之外，还有一些样式相关的设置，代码如下所示:
在这里插入图片描述
完整代码：

<!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>网格</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '饼图展示',
                left: 'center'
            },
            series: [{
      
      
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [{
      
      
                    value: 355,
                    name: '直接访问'
                }, {
      
      
                    value: 310,
                    name: '邮件营销'
                }, {
      
      
                    value: 274,
                    name: '联盟广告'
                }, {
      
      
                    value: 235,
                    name: '视频广告'
                }, {
      
      
                    value: 400,
                    name: '搜索引擎'
                }, ].sort(function(a, b) {
      
      
                    return a.value - b.value;
                }),
                roseType: 'radius',
                label: {
      
      
                    color: 'rgba(0,0,0,0.5)' //显示字体颜色
                },
                labelLine: {
      
      
                    lineStyle: {
      
      
                        color: 'rgba(0,0,0,0.6)' //连接字体线颜色
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },
                itemStyle: {
      
       //饼图颜色
                    // color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0,0,0,0.5)'
                },
                anumationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function(idx) {
      
      
                    return Math.random() * 200;
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>
3.2.10 全局字体样式

返回目录

在制作可视化时，常常会用到文字展示，此时选择一种合适的字体的样式与可视化搭配显得尤为重要。
在全局字体样式（textStyle）中，我们可以定义全局的字体样式显示，常用的参数及其说明如下所示。

  • color：文字的颜色，例如textStyle=“#fff”。
  • fontStyle：文字字体的风格，可选值有normal、italic、oblique。
  • fontWeigh：文字的字体系列，可选值有sans-serif、serif、monospace、Arial、Courier New、Microsoft Yahei等。
  • fontSize：文字的字体大小，取值为数值

比如以下代码，加入styleStyle，设置字体的颜色为蓝色（blue），字体加粗显示（bolder）、字体样式为微软雅黑（Microsoft Yahei），可视化结果如图：
在这里插入图片描述
完整代码：

<!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>ECharts图表</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
      
      
            title: {
      
      
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center'
            },
            tooltip: {
      
      
                trigger: 'axis',
                axisPointer: {
      
      
                    type: 'shadow'
                }
            },
            legend: {
      
      
                data: ['各产品销量情况']
            },
            xAxis: {
      
      
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
      
      },
            series: [{
      
      
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }],
            textStyle: {
      
      
                color: 'blue',
                fontWeight: 'bolder',
                fontFamily: 'Microsoft Yahei'
            }
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

小结

返回目录

学到这里ECharts基本入门了，会一些简单的使用了，接下来将讲解更高级的使用方法，更炫酷的数据展示，例如下面这样的
在这里插入图片描述
炫酷用法，请期待第二期文章

猜你喜欢

转载自blog.csdn.net/m0_57249797/article/details/124889908
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022