02-Echarts数据可视化-创建可视化图表的基本代码
本文详细介绍了使用ECharts绘制可视化图表的基本代码模式，包含了引入ECharts库、创建图表实例、配置图表的数据和样式、渲染图表到页面上等几个环节。并且以一个简单的折线图进行了演示说明。
一、概述
使用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
长江两岸老火锅，共聚山城开发者！We Want You！
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)