Apache Excharts快速入门

已于 2024-04-23 16:05:20 修改
阅读量221 收藏 2
点赞数 2
文章标签： echarts
于 2024-04-23 14:52:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75464190/article/details/138125002
版权
本文介绍了ApacheExcharts，一个基于JavaScript的开源图表库，涉及环境搭建（包括从菜鸟编程下载和VisualStudioCode插件推荐）、快速入门教程以及图形实例的下载方法。
摘要由CSDN通过智能技术生成

1. 简介

Apache Excharts 一个基于 JavaScript 的开源可视化图表库。

官网地址：Apache Excharts

2. 环境搭建

2.1 获取Excharts

这里我是通过菜鸟编程网站进行下载的，如图：

网址：菜鸟编程

点击链接后跳到此页面，CTRL+S保存就ok。

                        

2.2 Visual Studio Code插件推荐

Fitten Code: Faster and Better AI Assistant

我用了会儿，这插件的提示是真的牛，而且功能不止于此。


3. 快速上手

快速上手 - 使用手册 - Apache ECharts

4. 图形实例

老多图形了，而且有 js 和 ts 源码的。

4.1 如何下载到本地

（1）点击要生成的图形

（2）下载js

（3）最终效果图

文泽3567
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
数据可视化Echarts—— 案例：立可得-智能看板
weixin_52819925的博客
08-21 6837
案例：立可得-智能看板 项目介绍 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。 该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 … 使用技术 完成该项目需要具备以下知识： div + css 布局 flex 布局 css3动画 css3渐
echarts全解析及其用法详解
L1ke_one的博客
03-28 4万+
一、echarts简介 百度开发团队制作，开源交给apache基金管理 制作图表的JavaScript库 同类型产品highCharts D3 二、echarts步骤 初始化 var echart = echarts.init(dom节点,主题) 定义选项option var option = { title标题 legend图例 color调试版本 tooltip提示 xAxis轴线X yAxis轴线Y series系列数据 } 更新选项 echart.setOp...
一篇文章带你搞定所有Echarts可视化图表
最新发布
qq_41765777的博客
12-05 2185
可视化图表种类如此之多，什么场景下应该用什么图表展示，是一个让人头秃的难题。本篇文章带你从ECharts安装使用到配置各种样式的ECharts图表。ECharts官网Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
【Echarts】echarts饼图、圆环图配置代码详解
做笔记/记录遇到的前端bug
07-01 1万+
图文详解，带你快速了解Echarts饼图、圆环图、多层圆环图。并附上多种常见echarts饼图、圆环图示例及全量代码
echarts入门教程（超级详细带案例）
m0_55734030的博客
10-27 10万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
ECharts的讲解
weixin_62268437的博客
08-11 1万+
把数据以更直观的形式展现----图表可以清晰有效地传达与沟通信息可以帮助我们快速的获取隐藏在数据中的信息ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交换丰富，可高度个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html。...
echarts学习笔记
m0_59029708的博客
10-27 927
提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
Vue+Excharts画出重庆地图
qq_39691676的博客
12-08 1938
一、引入Excharts 全国地图选择器API http://datav.aliyun.com/tools/atlas/#&lat=30.199123662463407&lng=107.74161937967794&zoom=7.5 样例 <template> <div class="map_content"> <div ref="area_json" class="map_body" /> </div> <
ApacheCamel快速入门（下）
01-27
接上文动态循环路由的特点是开发人员可以通过条件表达式等方式，动态决定下一个路由位置。在下一路由位置处理完成后Exchange将被重新返回到路由判断点，并由动态循环路由再次做出新路径的判断。...
ApacheCamel快速入门（上）
01-27
在快速入门中，首先你需要了解Camel的基本概念，如Endpoint（端点）、Route（路由）和DSL（领域特定语言）等。Endpoint是Camel路由的起点和终点，可以是任何Camel支持的组件。Route则定义了数据如何从一个Endpoint...
ApacheCamel快速入门（中）
01-27
接上文EndpointDirect用于在两个编排好的路由间实现Exchange消息的连接，上一个路由中由最后一个元素处理完的Exchange对象，将被发送至由Direct连接的下一个路由起始位置（http://camel.apache.org/direct.html）。...
【Echarts】在折现图上显示数据
咔咔博客
01-12 1958
author：咔咔 wechat：fangkangfk 想在折现图的点上显示具体数据 加上这个即可 itemStyle : { normal: {label : {show: true}}}
ECharts学习路线图
漫步量化
11-19 2134
ECharts ECharts(Enterprise CHarts)，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生动，可交互，可...
[配置]Vue项目配置ECharts的两种方法
tom_wong666
11-20 7775
需求：Vue项目用到ECharts，需要配置,除了直接在index.html里面引入echarts文件外，还实践总结了如下两种npm配置方法，亲测有效，建议用方法二。 方法一，注册echarts到vue的原型对象中，指定某个div作为echarts的画布： 1，npm安装 npm install echarts --save 2，main.js增加设置 // 引入echarts im...
ECharts使用心得
热门推荐
xuemoyao的专栏
11-16 34万+
ECharts使用心得 前言 上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，然后就找到了这个ECharts报表呈现组件，挺不错的一个组件，而且地图数据都是离线的，真心很赞。但是，使用起来却颇费了一番工夫。所以就把使用中的一些心得体会跟大家分享一下。 1.    插件的下载
echarts的用法
waterTina的博客
04-14 1247
一.字符云的使用 1.需要引入2.0的echarts，3.0的显示不出来 2.引入echarts-wordcloud.min.js 下载地址：https://github.com/ecomfe/echarts-wordcloud dist文件夹下的echarts-wordcloud.min.js 3、页面上创建容器： <div id="zifuyun" style="width:98%;he...
echarts 柱状图坐标轴颜色
TionSu的博客
10-09 5554
原图： 修改后： 代码：
excharts报表默认显示列、块数据的tip部分
TionSu的博客
02-19 341
1、效果：   2、代码：myChart.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: 0});
Apache Storm 快速入门指南
"Apache Storm 快速起步" Apache Storm 是一个开源的分布式实时计算系统，由 Twitter 公司开发，后捐赠给 Apache 软件基金会。Storm 提供了一个实时的数据处理平台，能够处理大规模数据流，并且提供了高性能、低...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值