web前端-Echarts-5.3安装配置和案例

原创 已于 2023-08-06 15:57:29 修改 · 604 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #javascript #前端

于 2023-03-30 10:26:29 首次发布

N.1 安装配置

1）安装版本介绍

（1）完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。(里面包括很多图形，建议使用该类库)

（2）常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。(里面包括常见图形,但有的没有,)

（3）精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。

2）独立版本安装

（1）下载地址 Tags · apache/echarts · GitHub

（2）文件解压后的结构

其中theme是主题 是可选的

3）非独立版安装

其实就是独立版本的 echarts.xxx.js 文件拷贝出来

N.2 案例演示

<script> </script>标签可以放在<html> </html>表情外面

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>第一个 ECharts 实例</title>

<!-- 引入 echarts.js -->

<script src="D:\software\echarts-5.3.3\dist\echarts.common.js"></script>

<script src="D:\software\echarts-5.3.3\theme\vintage.js"></script>

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="id1" style="width: 600px;height:400px;"></div>

</body>

</html>

<script type="text/javascript">

// 基于准备好的dom，初始化echarts实例，vintage背景参数是可选的

var myChart = echarts.init(document.getElementById('id1'),'vintage');

// 指定图表的配置项和数据

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>

创建一个test.html的文件夹

 可以使用功能DW工具开发

N.3 官方模板

面板案例下载 Examples - Apache ECharts

如何在前端使用 Echarts 打造交互式数据图表
小白菜的博客
04-22 1991
在当今数字化时代，数据的重要性不言而喻。如何将大量的数据以直观、易懂的方式呈现给用户，成为了前端开发中的一个关键问题。Echarts 作为一款强大的开源数据可视化库，为前端开发者提供了丰富的图表类型和交互功能，能够帮助我们轻松打造出交互式的数据图表。本文的目的就是深入探讨如何在前端使用 Echarts 来实现这一目标，涵盖了从基础概念到实际应用的各个方面，包括 Echarts 的安装配置、图表的创建和定制、交互功能的实现等内容。
前端ECharts：高效构建数据图表
AI架构全栈开发实战笔记
04-29 943
在当今数字化时代，数据的可视化变得至关重要。前端开发中，如何高效地将数据以直观的图表形式展示给用户是一个关键问题。ECharts是一个强大的开源可视化库，由百度开发，它提供了丰富多样的图表类型，如折线图、柱状图、饼图等，并且支持交互功能。本文的目的在于深入介绍ECharts的使用方法，帮助开发者掌握如何利用ECharts在前端高效构建数据图表。范围涵盖了ECharts的基本概念、核心算法、数学模型、项目实战以及实际应用场景等方面。本文将按照以下结构进行组织：首先介绍背景信息，包括目的、预期读者和文档结构等。
Echarts-配置项手册.zip
10-24
百度echart4.x版本配置手册离线版本。用于数据可视化，便于数据分析分析展示。PDF格式。
echarts安装使用 常用配置
weixin_48295815的博客
09-27 677
安装及配置 echarts官网 https://echarts.apache.org/zh/index.html 安装echarts 全局配置，在main.js中引入echarts模块并注册 使用 创建一个具有宽高的dom容器 初始化echarts实例 指定图表的配置项和数据 具体的option配置见官方文档 https://echarts.apache.org/zh/option.html#title 显示图表 常用图表类型：line（折线图）、bar（柱状图
ECharts的配置(一)
qq_59076775的博客
09-06 523
ECharts八大配置
Echarts 配置项
tanqin的博客
06-19 381
Echarts 配置项代码效果图 echarts.min.js 文件需要另外下载 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content=
Echarts-4.0.4官方文档-配置项手册
04-07
最新版的Echarts-4.0.4配置项手册，PDF格式，官网不提供下载。
前端ECharts实现3D数据可视化
小白菜的博客
04-02 1288
在当今数字化时代，数据量呈爆炸式增长，如何高效地展示和理解这些数据成为了关键问题。3D数据可视化能够以更加直观、生动的方式呈现数据，帮助用户发现数据中的规律和趋势。ECharts是一个强大的前端数据可视化库，它提供了丰富的图表类型和交互功能，其中3D图表功能可以满足用户对复杂数据进行3D可视化展示的需求。本文的范围主要涵盖使用ECharts在前端实现3D数据可视化的各个方面，包括核心概念、算法原理、数学模型、项目实战、应用场景等，旨在帮助开发者全面了解和掌握使用ECharts进行3D数据可视化的技术。
前端ECharts：打造简洁美观的数据图表
小白菜的博客
04-25 1163
ECharts（Enterprise Charts）是百度开源的一个基于JavaScript的数据可视化图表库，它提供了丰富的图表类型和强大的交互功能。系统介绍ECharts的核心功能和技术架构详细讲解各种图表类型的配置方法分享数据可视化设计的最佳实践提供实际项目中的性能优化方案探讨ECharts在复杂业务场景中的应用本文涵盖ECharts 5.x版本的主要特性，适用于从基础到进阶的学习路径。首先介绍ECharts的核心概念和架构然后深入讲解各种图表类型的实现方法。
前端必备！ECharts实现炫酷数据图表
小白菜的博客
05-18 555
本文旨在为前端开发者提供一份全面的ECharts使用指南，涵盖从入门到进阶的所有知识点。我们将探讨ECharts的核心功能、配置选项、性能优化以及实际应用场景，帮助读者掌握创建各种复杂数据可视化图表的能力。本文首先介绍ECharts的基本概念和核心原理，然后深入讲解各种图表类型的实现方法，接着通过实战案例展示ECharts的高级应用，最后讨论性能优化和未来发展趋势。ECharts：百度开源的一个使用JavaScript实现的开源可视化库Option：ECharts中的配置对象，用于定义图表的各个方面。
apache-echarts-5.3.3下载资源
09-23
2022年8月最新版，apache-echarts-5.3.3-src、echarts.min最新、echarts-4.5.0
ECharts3 配置项手册part3
03-02
根据百度ECharts3官方文档整理而成，便于离线使用和查阅，由于上传大小的限制，该手册被分成了5部分。
ECharts 安装
12-14
ECharts 安装 1、独立版本 我们可以在直接下载 echarts.min.js 并用 标签引入。 百度 cdnjs 3、NPM 方法 由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。 npm 版本需要大于 3.0，如果低于此版本需要升级它： # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g 通过 cnpm 获取 echarts： # 最新稳定版 $ cnpm install echa
Echarts3配置项手册离线网页版
02-06
完整拷贝官网配置项页面,彻底离线查询各个配置项.........
echarts版本4.9
09-04
echarts版本4.9，官方示例用的版本是4.9，亲测可用，打开后找dist文件夹引用echarts.js使用即可
echarts按需引入
huxianc的博客
11-30 5477
echarts 的完整包太大了，但是在项目中，其实很多都是用不上的，所以按需引入是很有必要的 我的解决方案是定义一个文件，里面引入项目中使用到的所有包，然后使用到的组件中进行 echarts可选引入包参考链接 import echarts from "echarts/lib/echarts"; import "echarts/lib/chart/bar"; import "echarts/lib/chart/line"; import "echarts/lib/chart/pie"; import "
ECharts-如果可以请按需引入
东东爱编码博客
10-05 1535
文章目录一、ECharts-按需和全量引入1. 项目中安装2. 项目中引入 一、ECharts-按需和全量引入 1. 项目中安装 参考：https://echarts.apache.org/handbook/zh/basics/import npm/yarn安装：npm/yarn install/add echarts --save 2. 项目中引入 引入方式： 按需引入、全量引入 全量引入： 引入所有 ECharts 中所有的图表和组件 import * as echarts from 'echart
【免费下载】 新版ECharts 5.3.2离线文档下载
gitblog_09775的博客
10-15 672
新版ECharts 5.3.2离线文档下载 【下载地址】新版ECharts5.3.2离线文档下载 本仓库提供了一个名为“新版ECharts 5.3.2离线文档”的资源文件下载。该文档是从ECharts官方网站爬取的，目前包含配置项、API以及GL配置等内容。为了方便使用，建议使用Nginx进行启动 ...
安装echarts
使用轻刷本卡
06-26 1283
安装echarts记录
spring-webmvc-5.3.41下载
最新发布
06-14
首先，我们提供Maven依赖配置：在Maven项目的pom.xml文件中，可以添加如下依赖：```xml<dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.3.41</version></...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

研发咨询顾问

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值