前端数据可视化之Echarts初体验

今天在面试的时候面试官问到了有没有Echarts的开发经验,后来了解到面试官所在的部门主要就是负责数据可视化平台的搭建,以Echart和HighCharts为基础。

虽然Echarts诞生的时间已经挺久了,但是随着最近数据分析等岗位越来越热门,很多公司将数据可视化平台的搭建提上日程。

今天我们就随着Echart的文档先跑个Demo,顺便避一下坑。

引入Echarts

首先Echarts的官方文档是https://echarts.apache.org/zh/index.html。

Echarts作为第三方库,我们首先要先获取这个库的资源文件,官方提供了很多的办法。

构建项目

这里我使用的是第三种,通过npm获取。

在终端输入指令:
npm init -y
npm install echarts --save

然后新建一个index.html,一个index.js

做好准备工作后,我们就着手写一个最简单的折线图的Demo。

进行编码

index.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>Document</title>
</head>
<body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="module" src="./index.js"></script>
</body>
</html>

index.js代码如下:

import * as echarts from 'echarts';

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

var option;

option = {
    
    
    xAxis: {
    
    
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    
    
        type: 'value'
    },
    series: [{
    
    
        data: [150,230,224,218,135,147,260],
        type: 'line'
    }]
}

option && myChart.setOption(option);

代码解析

稍微解析一下代码。

html部分,我们就单纯的声明了一个div在承载一会儿生成的Echarts图表。

因为引入的script文件中有使用ESModule的语法,所以scripttype属性一定要设置成module

js部分的话,官方的文档都有给示例,简单解析一下就是,先通过import引入echarts的模块,然后拿到我们要搭载Echarts图片的那个DOM节点,通过提供的init方法进行初始化,然后就是对数据的声明,option是一个包含要渲染图表中数据的对象,目前是跑Demo,所以暂时写成为静态的数据即可。然后根据提供的setOption方法对其进行挂载。

我们似乎也没有做太多的工作,只是基于Echarts提供的轮子并按照其规则来进行编码即可。

Echarts为我们提供了大量的Demo,使用的方法都大同小异,基于官方给的示例代码进行修改即可,这几乎就可以满足我们日常开发中的所有工作了。

运行程序 + 踩坑提示

说了这么多,我们先跑一下页面吧,看看会不会有意想不到的坑存在。

果然
在这里插入图片描述
页面上没有任何显示,而且通过控制台可以发现报错了。通过报错信息的提示和百度查询可知,它跨域了!因为我只是在本地跑的一个Demo,没有搭载任何服务支持。

解决问题 + 运行程序

那我们就创建一个服务,应用一下现在最流行的vite来构建,因为我们之前已经通过npm init -y进行过初始化,所以我们现在只需要yarn add vite -d即可。

然后我们需要改一下package.json中的scripts属性
在这里插入图片描述
这样我们就可以通过npm run dev来运行我们的服务了。

在这里插入图片描述
ok,我们通过访问http://localhost:3000,成功跑起来这个Demo

QQ:505417246
微信:18331092918
微信公众号:Code程序人生
个人博客:http://rayblog.ltd

在这里插入图片描述

Guess you like

Origin blog.csdn.net/m0_46171043/article/details/118737289