一、概述

使用ECharts绘制可视化图表，基本上需要包含如下几个环节：引入ECharts库、创建图表实例、配置图表的数据和样式、渲染图表到页面上。
下面我们以一个基本的折线图为例，具体展开说明。该折线图的效果如下图所示：

下面是视频版本，看文字感觉类的，可以观看视频。

二、引入ECharts库

我们以HTML页面为例，从GitHub下载JS库文件，并放置到前端工程目录中。在页面中使用<script>标签直接引入。

<script src="/lib/echarts-5.4.2/echarts.js"></script>

如下图所示：

关于如何引入Echarts库，我们在《01-Echarts数据可视化-环境准备》介绍了四种方式，任君选择。还不了解的，请移步前往观摩。

三、页面增加容器

接下来，需要在页面中增加一个用来展示图表的容器。通常情况下是一个由宽高的div，也可以是canvas。如下代码所示：

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

上面声明了一个div元素，并且设置宽度900px，高度600px。这个容器就是用来渲染图表的，其中图表的大小不会超过该容器的大小。

四、创建图表实例

第三步就是初始化Echarts实例对象。代码如下：

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

在初始化的时候，指定了图表渲染所用到的div容器对象，这样就在Echarts和div容器之间建立了关联。
另外，这里需要将初始化的实例对象赋予指定的变量，接下来需要通过该变量来给图表设置样式和数据。

五、配置图表的数据和样式

下面是一个基本的折线图的数据和样式的配置。

var option = {xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

暂时可以先不用纠结这些内容都代表着什么，后面我们用具体的图表进行展开说明，那样会更加的直观形象一些。
目前只需要知道可以通过类似于这样的方式对图表的数据和样式进行配置即可。

六、渲染图表到页面上

最后，通过图表实例的setOption()函数将图表的配置传递给图表实例，并渲染到指定的div容器中进行显示。

chart.setOption(option);

该函数一执行，图表就会立即展示到页面上。当然，前提条件是配置项中的内容都是正确的。-_-
渲染到界面上的折线图如下所示：

这就是创建Echarts图表的基本代码模式，无论多么复杂和酷炫好看的图表，大体都是如此。

七、完整代码

下面是整个完整的演示代码，可以自行尝试一下。如有问题，欢迎评论区留言。

<!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="/lib/echarts-5.4.2/echarts.js"></script>
</head><body><div id="main" style="width: 900px;height:300px;"></div>
</body><script>// 初始化echarts对象。var chart = echarts.init(document.getElementById('main'));// 配置数据和样式。var option = {xAxis: {type: 'category',data: ['星期1', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']},yAxis: {type: 'value'},series: [{data: [30, 230, 224, 218, 135, 147, 260],type: 'line'}]};// 设置图表配置OP。chart.setOption(option);
</script></html>

示例代码：demo5.html

02-Echarts数据可视化-创建可视化图表的基本代码相关推荐

echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
java——插件echarts数据可视化图表库
插件echarts数据可视化图表库一.使用idea创建javaWeb工程二.下载echarts导入js文件三.使用echarts. 特别鸣谢:感谢林老师传授嘿嘿嘿 -------- 创作不易, ...
数据分析可视化04 图表组件：Echarts数据可视化图表基础
本课时是课程的第二个模块,环境部署篇的第一个课时.在第一部分的基础理论篇,我向你介绍了数据可视化分析的概念定义.方法体系和关键技术.接下来,我会带你了解基于开源框架,如何部署数据可视化分析的开发环境, ...
Echarts数据可视化event图表事件的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化action图表行为的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html <script src="js/4.2.1/echarts.min.js"></script&g ...
如何用LightningChart创建Android图表数据可视化应用程序？（下）
LightningChart JS 是一款高性能的 JavaScript 图表工具,专注于性能密集型.实时可视化图表解决方案. LightningChart .JS | 下载试用(qun:740060 ...
大数据平台展示可视化效果，echarts图表实战项目(源码50套)
本文重点介绍HTML5图表框架echarts入门Demo及实战项目(含源码),以此来实现echarts大屏展示大数据平台可视化酷炫效果. 缘起:最近接了个任务需要用H5在前台两个大电视上做两页数据展示 ...
echart 多柱图只显示部分数据标签_2分钟上手、3小时学会无代码软件开发---Echarts数据可视化...
1.引入 ECharts.min.js 库文件引入方式一:用 script 标签在页面头问Matadata信息中引入JS库文件地址(可联网项目) 引入方式二:库文件放于项目文件夹(本地部署项目及联网 ...

02-Echarts数据可视化-创建可视化图表的基本代码