ECharts的基本使用

黑马程序员官方

企业官方账号

2022-12-16 17:39:48

1.ECharts的基本使用

1.1.ECharts的介绍

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

开源免费

它是开源免费的，也就是我们可以免费的使用 ECharts ，不需要缴纳任何的费用

功能丰富

它的功能非常的丰富，提供了各种各样的图表，支持各种各样的定制, 满足各种需求，比如折线图、柱状图、饼图、K线图等. 在他的官方示例中, 提供了上百种图表, 可以用只有你想不到, 没有她做不到这句话来形容

社区活跃

ECharts 的社区非常活跃，意味着你可以和很多开发者讨论，遇到了 ECharts 中不会的问题，也很容易找到解决办法

多种数据的支持

可视化的含义就是将数据通过更加直观的图表的方式来呈现。图表只是一种呈现方式。最核心的其实是数据。 ECharts 对数据格式的支持也是非常友好的。 ECharts 能够支持常见的 key-value 数据格式，还能支持二维表，或者 TypedArray 格式的数据

流数据的支持

对于超大的数据量而言，数据本身的体量可能就非常消耗资源, 而 ECharts 可以支持对流数据的动态渲染，加载多少数据就渲染多少数据，省去了漫长的数据加载的等待时间, 他还提供了增量渲染的技术, 只渲染变化的数据, 提高系统的资源利用.

移动端的优化

跨平台

酷炫的特效

数据的三维可视化

......

ECharts 能够做出各种各样漂亮的图表，它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便,功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址：

https://echarts.apache.org/zh/index.html

1.2.ECharts的快速上手

ECharts 的入门使用特别简单, 5分钟就能够上手. 他大体分为这几个步骤

步骤1：引入 echarts.js 文件

echarts是一个 js 的库，当然得先引入这个库文件

<script src="js/echarts.min.js"></script>

步骤2：准备一个呈现图表的盒子

这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里

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

步骤3：初始化 echarts 实例对象

在这个步骤中, 需要指明图表最终显示在哪里的DOM元素

var myChart = echarts.init(document.getElementById('main'))

步骤4：准备配置项

这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

步骤5：将配置项设置给 echarts 实例对象

ECharts 能够做出各种各样漂亮的图表，它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便, 功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址：

myChart.setOption(option)

通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要,

一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,其他的代码都是固定不变的.

1.3.相关配置讲解

xAxis

直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现

yAxis

直角坐标系中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去series 下找数据进行图表的绘制

series

系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于配置项的学习, 大家可以不用死记硬背, 需要的时候查一查官方文档即可.

网址: https://echarts.apache.org/zh/option.html , 常用的配置项多用几次, 你自然而然就记下了

大家可以查文档试一下: title中的各种配置

2.ECharts常用图表

2.1.图表1 柱状图

2.1.1.柱状图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>

<html lang="en">

<head>

        <script src="js/echarts.min.js"></script>

</head>

<body>

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

        <script>

                var mCharts = echarts.init(document.querySelector("div"))

                var option = {}mCharts.setOption(option)

        </script>

</body>

</html>

此时 option 是一个空空如也的对象

步骤2 准备x轴的数据

var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']

步骤3 准备 y 轴的数据

var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]

步骤4 准备 option , 将 series 中的 type 的值设置为: bar

var option = {

        xAxis: {

                type: 'category',

                data: xDataArr

        },

        yAxis: {

                type: 'value'

        },

        series: [

                {

                        type: 'bar',

                        data: yDataArr

                }

        ]

}

注意: 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type

属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,

那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制

最终的效果如下图:

2.1.2.柱状图的常见效果

标记:

最大值\最小值 markPoint

平均值 markLine

显示

数值显示 label

柱宽度 barWidth

横向柱状图

所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为 value , yAxis 的 type 设置为 category , 并且设置 data 即可

2.1.3. 柱状图特点

柱状图描述的是分类数据，呈现的是每一个分类中『有多少？』, 图表所表达出来的含义在于不同类别数据的排名\对比情况

2.1.4.通用配置

使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置.

标题: title

提示框: tooltip

tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框

触发类型: trigger

可选值有item\axis

触发时机: triggerOn

可选值有 mouseOver\click

格式化显示: formatter

字符串模板

var option = {

        tooltip: {

                trigger: 'item',

                triggerOn: 'click',

                formatter: '{b}:{c}'

        }

}

这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述

回调函数

var option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'click',
        formatter: function (arg) {
            return arg.name + ':' + arg.data
        }
    }
}

工具按钮: toolbox

toolbox 是 ECharts 提供的工具栏, 内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切

换五个工具

工具栏的按钮是配置在 feature 的节点之下

图例: legend

legend 是图例,用于筛选类别,需要和 series 配合使用

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

var option = {

        legend: {

                data: ['语文', '数学']

        },

        xAxis: {

                type: 'category',

                data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']

},

yAxis: {

        type: 'value'

},

series: [

        {

                name: '语文',

                type: 'bar',

                data: [88, 92, 63, 77, 94, 80, 72, 86]

            }, {
                name: '数学',

                type: 'bar',

                data: [93, 60, 61, 82, 95, 70, 71, 86]

                }

        ]

}