作图,用ECharts就够了
认识 ECharts
ECharts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的 Canvas 库 ZRender,ECharts 提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
ECharts 有哪些特点
- ECharts 属于开源软件,并且我们提供了非常炫酷的图形界面,特色是地图,另外还提供了柱状图、折线图、饼图、气泡图及四象限图等;
- ECharts 使用简单,在官网中为我们封装了 JS,只要会引用就会得到完美的展示效果;
- ECharts 种类多,ECharts 实现简单,各类图形都有;相应的模板,还有丰富的 API 及文档说明,非常详细;
- ECharts 兼容性好,基于HTML5,有着良好的动画渲染效果。
从哪里获取 ECharts ?
获取 ECharts 的路径有以下几种,请根据您的情况进行选择:
- 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本;开发环境建议下载源代码版本,包含了常见的错误提示和警告。
- 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
- 或者通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts”
- 由 cdn 引入,你可以在 cdnjs,npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。
如何引入 ECharts?
ECharts 的引入方式变简单了,因为从 ECharts 3 开始就不用使用 AMD 的方式引入,代码也不再内置 AMD 加载器,所以 ECharts 的引入方式就可以像 JavaScript 库一样用 script 标签引入即可。
下面是 Echarts 引入的代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</head>
</html>
准备容器
使用 Echarts 绘制图表前需要先有一个有宽高的 DOM 容器,代码如下:
<body><!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>
使用 Echarts 绘制一个简单的图表
接着通过使用 echarts.init 方法来初始化一个 echarts 实例和使用 setOption 方法生成一个简单的柱状图,完整的代码如下:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>第一个ECharts实例</title><!-- 引入 echarts.js --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow" ></script>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据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>
</body>
</html>
作图,用ECharts就够了相关推荐
- 《信条》过去不可挽回, 未来已成史书(无剧透版)
昨天去电影院观看诺兰新作<信条>, 脑洞超大, 配合奇妙的剪辑手法, 让观众一脸懵比的同时, 又大呼过瘾~ 本文不涉及人物情节剧透,请放心阅读~ 时间倒带, 万物熵减 在我们生活的世界,如 ...
- 计算机内存作图多大合适3d,【2人回答】你好,我想问问电脑256G内存对于学生画图设计够吗?-3D溜溜网...
回答: 固态硬盘值得购买,256G的容量只是对一般来说说刚刚好 传输速度更快,更轻固态硬盘已经越来越普及,无论是笔记本用户更换硬盘,还是diyer们装机时都会把固态硬盘作为清单中的必点菜.对题主这个问 ...
- Echarts作图之柏拉图
Echarts版本:2.2.7 <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
- echarts配置及专业k线作图工具
一般看官网配置比较多,教大家如何copy完线性图代码,快速更改配置. echerts线图常用配置: grid: [{left: '0%',right: '5%',top: '5%',height: ' ...
- 使用Echarts绘制中国地图看这篇就够了(认真脸!)
世界那么大 我画张地图看看! 一.效果 图 1 二.代码 具体编码参考官方Demo:echarts.baidu.com/echarts2/doc/example/map5.html 三.地图的扩展(值 ...
- echarts x轴像直尺一样设置刻度_MATLAB作图实例:6:指定轴刻度值和标签
沿轴自定义刻度值和标签可以帮助突出显示数据的特定方面.本文示例显示了一些常见的自定义设置,例如,修改刻度值的位置,更改刻度标签的文本和格式以及旋转刻度标签. 更改刻度值位置和标签 将x创建为介于-10 ...
- 几种作图软件使用感言
几种作图软件使用感言 这几天因为论文中需要涉及到几个稍难画的示意图,感觉用Word绘图不太完美,所以发了个帖子寻求帮助,并与大家讨论了几种常用的绘图软件. (帖子:http://emuch.net/b ...
- 在 echarts关系图动态线上添加文字_多折线堆叠图如何制作?
润乾报表有丰富的图形展现效果,不仅自带了多种统计图形,还内置了第三方统计图形 D3 还有 echarts 统计图.最近好多客户提出想要实现多折线堆叠的统计图,我用自带的图形和 echarts 两种方式 ...
- 关于Echarts的填坑之旅
正如标题所说,这是Echarts的一遍填坑,如果你是一些echart的配置的话可以阅读 http://echarts.baidu.com/opti...的官网配置信息.今天我想给大家分享的是一些我前段 ...
最新文章
- PyTorch 笔记(03)— Tensor 数据类型分类(默认数据类型、CPU tensor、GPU tensor、CPU 和 GPU 之间的转换、数据类型之间转换)
- SAP MM 维护公司间STO报错-No delivery type defined for supplying plant NMI1 and document type NB-
- python详细安装教程环境配置-如何安装Python(环境设置)?详细安装步骤图解
- 查看安卓APK源码破解
- 一款响应式的(电子报)Newsletter 模板 – Antwort
- 使用mybatis生成UUID
- HTML网页设计制作大作业(div+css)
- 来了!Python 官方发布整套中文PDF文档(共27本)
- 工业相机基本参数以及选型参考
- 杭电 2022 海选女主角
- B365装服务器系统,七彩虹b365主板安装win7系统及BIOS设置教程(支持8代cpu)
- Android创建前台运行的Service
- 基于weixin-java-tools集成微信小程序支付功能
- 电脑提示Word无法创建工作文件请检查临时环境变量怎么解决
- php语言程序设计总结,高校邦PHP语言程序设计答案
- 大数据角度给大家解释一下为什么大数据AI分析足彩是扯淡
- 在米思齐上实现数码管图形化编程
- 树莓派3B--控制继电器
- 【已解决】java.net.ConnectException: Connection timed out: no further information
- 坦克世界服务器系统不更新失败怎么办,win7系统下坦克世界自动更新失败如何解决...
热门文章
- 浪漫主义和革命英雄主义的回忆
- 保留三位有效数字,四舍六入五成双
- no matching provisioning profile found
- 前端性能优化学习 03 Web 性能测试
- 使用muscle进行多序列比对
- JavaScrpit 犀牛书第七版笔记
- Codeforces 1247D. Power Products (logn质因数分解)
- mw310r无线路由器怎么设置虚拟服务器,水星MW310R,V5路由器如何设置无线桥接|水星路由器桥接设置...
- H5+微信公众号扫二维码页面跳转功能 vue实现
- SQL中可以用来算时间差的函数