原生JS如何使用ECharts

最新推荐文章于 2024-03-19 11:41:22 发布
最新推荐文章于 2024-03-19 11:41:22 发布
阅读量5.1k 收藏 9
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leave_the_poor/article/details/107397131
版权

前两天自己做了一个时间记录器，然后想到可以将事件所使用的时间生成图表，使用SVG或canvas来做感觉麻烦的不行，网上一查发现国内有现成的框架ECharts----有好轮子就要用。
在使用的过程中，我直接使用npm命令进行了安装
npm install echarts
然后根据教程走，遇到了require is undefine blabala的问题，发现是因为自己用的原生JavaScript，并且不是使用的Webpack.

解决问题很简单
在<head>标签内引入构建的echarts.js文件即可

1. 下载ECharts.js
  • 推荐在线自定义构建
    EChart在线定制;
    因为全部下载先来后在进行项目打包时会发现引入的包体积很大，所以在官网上直接根据项目需要进行定制可以有效的减小体积。
  • 挑选好之后就可以下载定制的EChart.js文件了
2.使用ECharts
  • 将下载好的ECharts.js放到项目文件夹中
  • 在头标签中引入ECharts.js
<html>
<head>
	...
	<script src="echarts.js"></script>
</head>
</html>
  • 切记一定要在head中，因为我习惯放在</body>屁股上引入.js文件，导致刚开始怎么都不得行，放在<head>里就好了。
3.创建EChart
  • 创建一个放EChart的<div>。
  • 进入项目的js文件里或新建一个chart.js
  • 创建chart
//创建chart 相当于new一个对象
var chart =echarts.init(document.querySelector("div"));
//图表内容，样式
var option={};
//配置图表的样式
chart.setOption(option);

EChart很好用，好像是百度牵头搞的，很全面，很推荐。

王王王宇宙
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js 使用echarts图表
PrimaryColor
04-30 1368
下载echarts.js，通过静态引入的方式，可以避免其他服务器出现故障时，无法使用引入目标js。 <scriptsrc="./echarts.js"></script> 下载链接：https://download.csdn.net/download/qq_42740797/18266829 渲染一个折线图，代码： <!DOCTYPE html> <html lang="en"> <head> <meta charse.
js中使用echarts
董小礼的博客
09-23 9101
1.下载echart.js 注意：这里介绍的是纯原生js使用echarts，如果使用的是vue环境，请移步我的另一篇文章：vue-cli中使用echarts 这是官方的下载地址 https://echarts.apache.org/zh/download.html 2.在html引用 <script type="text/javascript" src="Echarts.js">&lt...
关于vue 结合原生js 解决echarts resize问题
10-15
主要介绍了关于vue 结合原生js 解决echarts resize问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端学习之JavaScript echarts库的使用
qq_45839045的博客
02-23 1482
边框图片 组合写法： border-image: url("images/border.jpg") 167/20px round; 拆分写法： border-image-source: url("images/border.jpg"); border-image-slice: 167 167 167 167; border-image-width: 20px; border-image-repeat: round; 解释： 边框图片资源地址 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百。 边框
html页面引入echarts的两种方式
最新发布
weixin_45304375的博客
03-19 984
指定echarts容器，注意要给容器设置宽高，由于小编这里使用类创建的，不过多解释，正常创建直接去echarts官网查看。使用在线js文件，项目中一般不建议使用在线的地址，直接如方式一下载js文件更好.从echarts官网下载js文件，下载后放入到项目目录下。在需要echarts的html页面引入js文件。引入在线js文件即可。
《原生js开发仿ECharts的canvas柱图实例教程》源码
03-29
本文件属于文章《原生js开发仿ECharts的canvas柱图实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明，如果有不明白的地方，建议你可以输出数值。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。
原生Android如何使用百度echarts
坚持学习
12-11 1989
1.什么是echarts 是由百度维护并开源的JavaScript 实现的开源可视化库，提供直观，交互丰富，可高度个性化定制的数据可视化图表。例如我们常用的条形图，折线图，饼形图，雷达图等等。 官方定义如下 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 官网地址
超简单！js使用echarts
HeZ的博客
05-05 3710
echarts Echarts的官网https://echarts.baidu.com/,Echarts官网有很多demo可以供我们使用，这一点可以说是很良心了，不说废话了直接进入主题。 第一步 首先在确定安装好node.js的前提下，在项目目录cmd命令行下输入 npm install echarts 安装echarts依赖。 第二步 把图中所示的echart.js文件复制到和你的项目文件同级...
js如何使用Echarts详解
wangxuanyang_zer的博客
10-22 807
首先，在您的HTML文件中，确保已经包含了ECharts库的JavaScript文件。您可以从ECharts官方网站下载并引入它。在HTML中，创建一个元素来容纳图表。给该元素指定一个唯一的ID，以便在JavaScript中引用它。同时，通过CSS设置容器的宽度和高度，以定义图表的尺寸。使用JavaScript来创建和配置图表。
js中ECharts基础
weixin_46048542的博客
11-11 7548
ECharts是一个使用JavaScript 实现的开源可视化库，可以流畅的运行在PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome,t Firefox，Safari等) ，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
JavaScript使用百度ECharts插件绘制饼图操作示例
12-14
本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考，具体如下： 百度ECharts是一款由百度前端团队开发与维护的，基于HTML5的开源JavaScript图表库。E是Enterprise的简称，意思是商业...
echarts-gl.min.js
01-21
echarts-gl.js下载
echarts3D地图数据(含全国和省js以及全国、省、地市级json).zip
03-30
echarts3D地图数据(含全国和省js以及全国、省、地市级json).zip
引入echarts.js操作步骤
m0_71814235的博客
09-14 3966
引入echarts.js操作步骤
Echarts在js中引用是无需下载文件，直接网络引用。src地址记录
Harry博客
05-26 6093
在一个帖子里找到了一个链接，帖子的网址是：点击打开链接； 这个链接是 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> 引入这个连接就可以使用echarts了。 页面给一个div的位置 <div id="main" style="width: 600px;height:400px;"&...
JavaScript之ECharts 入门级教程
zhong_333的博客
10-16 2281
<title>第一个 ECharts 实例</title>-- 引入 echarts.js -->
在原生微信小程序中使用 echarts
qq_53461589的博客
05-13 1371
以上就是 echarts 在小程序中基本的使用方法，如果需要自己定义图表的样式可以参考文档进行个性化的定制：https://echarts.apache.org/zh/option.html就可以展示出图表，如果需要更换其他图表更换 option 的配置项即可[外链图片转存中...(img-2TXBNgcO-1683960179758)]## 五、结语。
echarts 简单使用操作总结
Scd666666的博客
12-13 303
echarts使用
echarts柱图原生js复现
08-20
要使用原生JavaScript复现ECharts柱图，你需要先引入ECharts库，并创建一个DOM元素作为图表的容器。然后，使用JavaScript代码配置图表的数据和样式，最后将图表渲染到容器中。 以下是一个简单的示例代码，演示如何使用原生JavaScript复现ECharts柱图： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts柱图原生JavaScript复现</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 创建图表容器 var chartContainer = document.getElementById('chart'); // 初始化图表实例 var chart = echarts.init(chartContainer); // 配置图表的数据和样式 var option = { title: { text: '柱图示例' }, xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }] }; // 将配置应用于图表 chart.setOption(option); // 渲染图表 chart.resize(); </script> </body> </html> ``` 在上述示例中，我们首先引入了ECharts库的JavaScript文件，然后创建了一个id为"chart"的div作为图表容器。接下来，使用`echarts.init`方法初始化了一个图表实例，并通过`setOption`方法配置了图表的数据和样式。最后，调用`resize`方法将图表渲染到容器中。 你可以根据自己的需求修改示例代码中的数据和样式，来实现你想要的柱图效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值