百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

ECharts实现数据可视化入门教程(超详细)

xsobi 2024-11-23 10:46 22 浏览

ECharts介绍

ECharts入门教程

第一步：下载并引入scharts.js文件

第二步：编写代码

  • 目录结构
  • 编写index.html代码
  • 效果展示

ECharts的基础配置

  • 主要配置（常用的）
  • 案例讲解

补充

  • 示例链接
  • 立即执行函数
  • 让图表跟随屏幕自适应

ECharts介绍

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅地运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

通俗的理解：

是一个JS插件

性能好可流畅运行PC与移动设备

兼容主流浏览器

提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】，且可定制（支持自定义）

ECharts入门教程

第一步：下载并引入scharts.js文件

1、点击Dist跳转到Github。

2、点击点进去

3、右键单击Raw，选择链接另存为

4、这样我们就得到了需要的文件

简单粗暴的方式：
当上面的第一步后第二步直接点击code然后下载压缩包，简单直接，再在里面找到我们需要的文件即可。

打开压缩包，找到需要的文件引入到我们项目的js文件夹即可

第二步：编写代码

目录结构

编写index.html代码

根据上面的步骤2至步骤5编写代码。

index.html：

效果展示

ECharts的基础配置

在官网给出了我们许多示例：链接

我们都可以直接拿来用，但是里面的一些配置我们可以根据自己的需求来修改，所以我们需要了解ECharts的基础配置。

主要配置（常用的）

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series

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

– 通俗的理解：图表数据，指定什么类型的图标，可以多个图表重叠。

xAxis：直角坐标系 grid 中的 x 轴

– boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

yAxis：直角坐标系 grid 中的 y 轴

grid：直角坐标系内绘图网格。

title：标题组件

tooltip：提示框组件

legend：图例组件

color：调色盘颜色列表

stack：数据堆叠，同个类目轴上系列配置相同的stack之后 后一个系列的值会在前一个系列的值上相加。

关于更多的配置项参考官方文档，十分具体。

案例讲解

接下来，通过修改官方示例中的例子折线图堆叠，来熟悉配置项。

修改前的样式：

修改后的代码：

修改后的样式：

补充

示例链接

立即执行函数

为了防止变量污染，减少命名冲突，我们可以采用立即执行函数的写法，因为立即执行函数里的变量都是局部变量。

我们需要var很多option ，我们采用立即执行函数包起来就不会产生命名冲突了。

格式如下：

让图表跟随屏幕自适应

以上就是ECharts实现数据可视化入门教程（超详细）的全部内容。

看完如果对你有帮助，感谢点赞支持！
如果你是电脑端的话，看到右下角的 “一键三连” 了吗，没错就是它[哈哈]

相关推荐

推荐几款 Webshell 查杀工具 PHP、Python、JSP、ASP、JS、HTML、Apk

Webshell会严重威胁到网站的安全性，webshell木马可以任意修改网站文件内容，查看系统环境、执行脚本、提权等等，甚至可以严重威胁数据库的安全。作为一名站长，定期检查网站文件安全是必不可少的...

Visual Studio Code安装C#开发工具包并编写ASP.NET Core Web应用

前言前段时间微软发布了适用于VSCode的C#开发工具包（注意目前该包还属于预发布状态但是可以正常使用），因为之前看过网上的一些使用VSCode搭建.NETCore环境的教程看着还挺复杂的就一...

DevExpress Demo示例展示:ASP.NET MVC报表无与伦比的设计时体验

DevExpressASP.NETMVCReporting原生集成DevExpressASP.NETMVC扩展以及无与伦比的设计时生产力。下面几个典型示例展示了它强大的设计时功能，Web报...

在ubuntu下新建asp.net core项目（ubuntu创建swap）

本文一步步讲述在ubuntu下用visualstudiocode创建asp.netcore项目的过程。step1：环境操作系统：virtualbox下安装的lubuntu。请不要开启“硬件...

Asp.net常用方法及request和response-a

asp.net教程asp.net常用方法:1、Request.UrlReferrer请求的来源，可以根据这个判断从百度搜的哪个关键词、防下载盗链、防图片盗链，可以伪造(比如迅雷)。(使用全局一般处理...

「B/S端开发」DevExtreme初级入门教程 - ASP.NET MVC 5控件简介

欢迎阅读了解DevExtremeASP.NETMVC5控件有关的文档！DevExtremeCompleteSubscription官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下...

微软跨平台开源.Net Core与ASP.Net已可用于生产环境

周三在举行Connect2015的同时，微软升级了.NetCore和ASP.Net，开发者可以开始在生产环境使用微软开源的.NetCore跨平台框架和ASP.NetWeb平台。微软发布了.Net...

用ASP生成Excel数据三种方法（asp生成word）

可能是将一个html表格变成MicrosoftExcel格式的最快方法。ContentType属性通知浏览器数据要被格式化为何种格式，在这里我们要的格式是MicrosoftExcel。当浏...

个人web开发我选Asp.net core，你选谁?PHP?还是JSP?

现在很多公司都会选用PHP，JSP来开发，但是现在Asp.netcore已经今非昔比了。今天微软金牌合作伙伴51aspx来分享一些关于.Net的那点事。.Net以前是不开源的，需要收费，有着各种版权...

创建第一个ASP.NET Core WebService程序

要创建第一个ASP.NETCoreWebService程序，可以按照以下步骤进行：1、安装.NETCoreSDK：首先，确保已在计算机上安装了最新版本的.NETCoreSDK。可以从Mic...

网站收录，网站收录方法技巧，网站收录入口(图文教程)

网站收录，是网站参与排名的前提，搜索引擎会先收录网站到自己的索引库里，然后根据算法计算出排名结果。也就是说，搜索引擎不收录的网站没有任何获得排名的机会。所以，我们需要关注自身网站收录情况。网站收录指的...

黑客通过Kali Linux设置一个钓鱼网站原来这么简单

一、背景介绍钓鱼网站是指欺骗用户的虚假网站。“钓鱼网站”的页面与真实网站界面基本一致，欺骗消费者或者窃取访问者提交的账号和密码信息。钓鱼网站一般只有一个或几个页面，和真实网站差别细微。钓鱼网站是互联网...

快速将网站从HTTP升级到HTTPS教程

在当今社会，每个人都离不开互联网，网络的安全性变得越来越重要，将网站从HTTP协议升级到HTTPS协议已成为保护用户数据安全和提高网站信任度的必要步骤，HTTPS不仅加密了用户与服务器之间的数据传输，...

从学习硬件知识到选电脑配置再到电脑组装教程及系统安装-导航篇

对于准备想要装机的小白来说，可能会在网上找各种关于硬件知识文章，或者直接找适合自己的组装电脑配置清单，电脑组装教程以及系统安装教程等，但其实装机之家网站上有着大量关于这类文章，就是由于文章过多，导致了...

10个顶级的office学习网站，5天让你菜鸟变大神，月薪过万不用愁

现在有很多小伙伴在工作的时候，都需要用到各种office办公软件。但是对于很多职场小白来说，想要很好的掌握office真的不是一件简单的事情。别担心，今天小编将推荐10个优质的office学习网站给大...

一周热门
最近发表
标签列表