ECharts入门_echarts cdn-CSDN博客

本文链接：https://blog.csdn.net/weixin_43816711/article/details/133101028

ECharts

1.引入 ECharts

官网：https://echarts.apache.org/zh/index.html

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

下面是 Echarts 引入的代码：

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

cdn引入：https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>

2.绘制一个简单的图表

2.1 准备容器

使用 Echarts 绘制图表前需要先有一个有宽高的 DOM 容器，代码如下：

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

2.2 使用 Echarts 绘制一个简单的图表

接着通过使用 echarts.init 方法来初始化一个 echarts 实例和使用 setOption 方法生成一个简单的柱状图，完整的代码如下：

<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>

在这里插入图片描述

3.ECharts基本组件用法

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.1 title——标题组件

包含主标题和副标题。

属性	用法及含义
text	主标题文本，支持使用 `\n` 换行。
link	主标题文本超链接。
target	指定窗口打开主标题超链接。‘self’ 当前窗口打开，'blank’新窗口打开
subtext	副标题文本，支持使用 `\n` 换行。
textAlign	整体（包括 text 和 subtext）的水平对齐。可选值：`'auto'`、`'left'`、`'right'`、`'center'`
textVertialAlign	垂直对齐。可选值：`'auto'`、`'top'`、`'bottom'`、`'middle'`。
textStyle	主标题字体样式。包括color、fontStyle、fontWeight、fontFamily、fontSize、lineHeight等

option = {
  title: {
    text: "这是一个主标题",
    subtext: "这是一个副标题",
    left: "center",
    top: "center",
    textStyle: {
      fontSize: 30
    },
    subtextStyle: {
      fontSize: 20
    }
  }
}

在这里插入图片描述

3.2 legend——图例组件

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

属性	用法及含义
orient	图例列表的布局朝向。水平`horizontal`，垂直`vertical`
type	图例的类型。'`plain`’普通图例，`'scroll'`：可滚动翻页的图例
selected	图例选中状态表。
selector	图例组件中的选择器按钮，目前包括全选和反选两种功能。默认不显示，用户可手动开启，也可以手动配置每个按钮的标题。`selector: ['all', 'inverse']`或`selector: true`
data	图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 `name`（如果是饼图，也可以是饼图单个数据的 `name`）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 `''`（空字符串）或者 `'\n'`（换行字符串）用于图例的换行。如果 `data` 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name或者 series.encode 的 `seriesName` 所指定的维度。如饼图和漏斗图等会取自 series.data 中的 name。
icon	图例项的 icon。ECharts 提供的标记类型包括’circle’，‘rect’，‘roundRect’，‘triangle’，‘diamond’，‘pin’，‘arrow’，‘none’
textStyle	图例的公用文本样式。
selectedMode	图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 `false` 关闭。除此之外也可以设成 `'single'` 或者 `'multiple'` 使用单选或者多选模式。
itemStyle	图例的图形样式。包括color、borderColor、borderWidth、borderType等属性。
itemGap	图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
itemWidth	图例标记的图形宽度。
itemHeight	图例标记的图形高度。

legend: {
            type: 'scroll',
            orient: 'horizontal',
            // orient: 'vertical',
            right: 0,
            top: 30,
            bottom: 20,
            data: ['安徽省xxxx厂',...]
        },

在这里插入图片描述

3.3 xAxis——x轴

直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

属性	含义及用法
position	x 轴的位置：‘top’，‘bottom’。
type	`'value'` 数值轴，适用于连续数据。`'category'` 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。`'time'` 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化。
data	类目数据，在类目轴（type: `'category'`）中有效。如果没有设置 type，但是设置了 `axis.data`，则认为 `type` 是 `'category'`。如果设置了 type 是 `'category'`，但没有设置 `axis.data`，则 `axis.data` 的内容会自动从 series.data 中获取，这会比较方便。
name	坐标轴名称。
nameLocation	坐标轴名称显示位置。‘`start`’，‘`middle`’，‘`center`’，‘`end`’
nameTextStyle	坐标轴名称的文字样式。包括color、fontStyle、fontWeight、fontFamily、fontSize、align等属性。
nameGap	坐标轴名称与轴线之间的距离。
nameRotate	坐标轴名字旋转，角度值。
min/max	坐标轴刻度最小值/最大值。支持number、string、function类型数据。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数（如类目轴 `data: ['类A', '类B', '类C']` 中，序数 `2` 表示 `'类C'`。也可以设置为负数，如 `-3`）。
splitNumber	坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在类目轴中无效。
axisTick	坐标轴刻度相关设置。
axisLabel	坐标轴刻度标签的相关设置。

axisLabel
1. inside：刻度标签是否朝内，默认朝内。（boolean）
2. rotate：刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。(number)
3. margin：刻度标签与轴线之间的距离。(number)
4. formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
```
// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    return value + 'kg';
}
```
5. overflow：文字超出宽度是否截断或者换行。配置width时有效
  - 'truncate' 截断，并在末尾显示ellipsis配置的文本，默认为...
  - 'break' 换行
  - 'breakAll' 换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
6. ellipsis：在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。

3.4 yAxis——y轴（用法同xAxis）

3.5 dataset——数据集

数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。

3.6 series——系列列表

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

line：折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。
bar：柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
pie：饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。
scatter：散点（气泡）图。
map：地图主要用于地理区域数据的可视化。

3.7 tooltip——提示框组件

提示框组件。可以设置在多种地方：

可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中，即 series.tooltip
可以设置在系列的每个数据项中，即 series.data.tooltip

属性	用法及含义
trigger	触发类型。‘item’：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。‘axis’：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。‘none’：不触发。
axisPointer	坐标轴指示器配置项。
position	提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。
formatter	提示框浮层内容格式器，支持字符串模板和回调函数两种形式。formatter: ‘{b0}: {c0} {b1}: {c1}’
backgroundColor	提示框浮层的背景颜色。
triggerOn	提示框触发的条件，可选：‘mousemove’，‘click’，‘mousemove\|click’或’none’
enterable	鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 `true`。
renderMode	浮层的渲染模式，默认以 `'html` 即额外的 DOM 节点展示 tooltip；此外还可以设置为 `'richText'` 表示以富文本的形式渲染，
textStyle	提示框浮层的文本样式。包括color、fontStyle、fontWeight、fontFamily、fontSize、align等属性。

3.8 toolbox——工具栏

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

属性	用法及含义
orient	工具栏 icon 的布局朝向。可选： ‘horizontal’ 和 ‘vertical’
itemSize	工具栏icon大小
itemGap	工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
showTitle	是否在鼠标 hover 的时候显示每个工具 icon 的标题。
feature	各工具配置项。除了各个内置的工具按钮外，还可以自定义工具按钮。注意，自定义的工具名字，只能以 `my` 开头，例如下例中的 `myTool1`，`myTool2`：
tooltip	工具箱的 tooltip 配置。默认不显示，可以在需要特殊定制文字样式（尤其是想用自定义 CSS 控制文字样式）的时候开启 tooltip

3.9 timeline组件

timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。timeline 和其他场景有些不同，它需要操作『多个option』。我们把传入 setOption 第一个参数的东西，称为 ECOption，然后称传统的 ECharts 单个 option 为 ECUnitOption。

属性	用法及含义
axisType	轴的类型。可选值为： `'value'` 数值轴，适用于连续数据。 `'category'` 类目轴，适用于离散的类目数据。 `'time'` 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
currentIndex	表示当前选中项是哪项。比如，`currentIndex` 为 `0` 时，表示当前选中项为 `timeline.data[0]`（即使用 `options[0]`）。
autoPlay	表示是否自动播放。
loop	表示是否循环播放。
playInterval	表示播放的速度（跳动的间隔），单位毫秒（ms）。
controlPosition	表示『播放』按钮的位置。可选值：`'left'`、`'right'`。
orient	摆放方式，可选值有：＇vertical＇垂直放置，＇horizontal＇水平放置

在这里插入图片描述

4.ECharts实现异步数据加载和更新

4.1 Echarts 实现异步数据加载

在初始化图表后的任何时间通过使用 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项即可，操作如下：

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

$.ax("/recordStatistic/basicInfo","",true,"GET","json","",function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

还有一种方法是先设置好别的样式，显示出一个空的直角坐标轴，然后获取并填入数据，操作如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>异步加载数据</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    function fetchData(cb) {
      // 通过 setTimeout 模拟异步加载
      setTimeout(function () {
        cb({
          categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          data: [5, 20, 36, 10, 10, 20]
        });
      }, 3000);
    }
    // 初始 option
    option = {
      title: {
        text: '异步数据加载示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: []
      }]
    };
    myChart.setOption(option);
    fetchData(function (data) {
      myChart.hideLoading();
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          // 根据名字对应到相应的系列
          name: '销量',
          data: data.data
        }]
      });
    });
  </script>
</body>
</html>

ECharts 中通过 name 属性在更新数据的时候对应到相应的系列。

上面示例中如果 name 不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的 name 数据。

4.2 Echarts 设置 loading 动画

利用 Echarts 提供的加载动画，通过调用 showLoading 方法显示加载动画，当数据加载完成后再调用 hideLoading 方法将加载动画隐藏。

具体操作如下：

    myChart.showLoading();//加载动画
    myChart.setOption(option);
    fetchData(function (data) {
      myChart.hideLoading();//隐藏动画
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          // 根据名字对应到相应的系列
          name: '销量',
          data: data.data
        }]
      });
    });

设置完效果如下：

在这里插入图片描述

5.ECharts中的事件和行为

用户在操作 Echarts 的图表时会触发相应的事件，这些事件由开发者监听，然后回调函数做出相应的处理，可以弹出一个对话框、跳转到一个地址等等。

如下是一个绑定点击操作的示例：

myChart.on('click', function (params) {//on()绑定事件处理函数。
    // 控制台打印数据的名称
    console.log(params.name);
});

在 ECharts 中有两种事件类型：

一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件；
还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 legendselectchanged 事件（这里需要注意切换图例开关是不会触发legendselected事件的），数据区域缩放时触发的datazoom 事件等等。

5.1 Echarts 鼠标事件的处理

ECharts 支持常规的鼠标事件类型，包括 click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout 事件。

下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例：

// 基于准备好的dom，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，格式如下：

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

怎么区分鼠标点击到了哪里：

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge（边）上。
            }
            else {
                // 点击到了 graph 的 node（节点）上。
            }
        }
    }

});

在回调函数中可以获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码：

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通过饼图表现单个柱子中的数据分布
                data: [detail.data]
            }]
        });
    });
});

5.2 Echarts 组件交互的行为事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件。常用的事件和事件对应参数在events文档中有列出。

下面是监听一个图例开关的示例：

// 图例开关的行为只会触发 legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 获取点击图例的选中状态
    var isSelected = params.selected[params.name];
    // 在控制台中打印
    console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
    // 打印所有图例的状态
    console.log(params.selected);
});