echart基本使用
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。
好了,咱们重点不是介绍哈,后面我会详细讲解这个报表系统的使用,这里就不做过多的描述了,下面开始进入正题:“5分钟上手写ECharts的第一个图表”。
【方法一:模块化单文件引入(推荐)】
1. 新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom:
<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head><body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="height:400px"></div>
</body>
2. 新建<script>标签引入模块化单文件echarts.js:
<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>
3. 新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js):
<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">// 路径配置require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});</script>
</body>
4. <script>标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成:
<!DOCTYPE html> <head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title> </head> <body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript">// 路径配置require.config({paths: {echarts: 'http://echarts.baidu.com/build/dist'}});// 使用require(['echarts','echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载],function (ec) {// 基于准备好的dom,初始化echarts图表var myChart = ec.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['销量']},xAxis : [{type : 'category',data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}],yAxis : [{type : 'value'}],series : [{"name":"销量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 为echarts对象加载数据 myChart.setOption(option); });</script> </body>
5. 浏览器中打开ecarts.html,就可以看到以下效果:
【方法二:标签式单文件引入】
1. 新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。
<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影Blog</title>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="height:400px"></div>
</body>
2. 新建<script>标签引入echart-all.js。
<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</body>
3. 新建<script>,使用全局变量echarts初始化图表并驱动图表的生成。
<!DOCTYPE html>
<head><meta charset="utf-8"><title>ECharts - 孤影'Blog</title>
</head>
<body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script><script type="text/javascript">// 基于准备好的dom,初始化echarts图表var myChart = echarts.init(document.getElementById('main')); var option = {tooltip: {show: true},legend: {data:['销量']},xAxis : [{type : 'category',data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]}],yAxis : [{type : 'value'}],series : [{"name":"销量","type":"bar","data":[5, 20, 40, 10, 10, 20]}]};// 为echarts对象加载数据 myChart.setOption(option); </script>
</body>
4. 浏览器中打开echarts.html,可以看到如下效果:
echart基本使用相关推荐
- echart 多柱图只显示部分数据标签_2分钟上手、3小时学会无代码软件开发---Echarts数据可视化...
1.引入 ECharts.min.js 库文件 引入方式一:用 script 标签在页面头问Matadata信息中引入JS库文件地址(可联网项目) 引入方式二:库文件放于项目文件夹(本地部署项目及联网 ...
- charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下 技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图 主要是配置 ...
- echart的关系图高亮_echart中饼状图的高亮显示。
1 2 3 4 5 6 7 8 9 10 #main{ 11 width:50vw;height:60vh;margin-left:2vw 12 } 13 14 15 16 17 18 19 20 / ...
- echart的关系图高亮_echarts鼠标覆盖高亮显示节点及关系名称详解
js代码,使用了jquery和echarts.js,用的是源代码那版,因为待会要进源代码里修改-- 其实js代码和echart官网demo的代码完全没区别-- 普通的力图设置,只要加上focusNod ...
- Echart图表X轴为时间轴的解释
2019独角兽企业重金招聘Python工程师标准>>> 绘制Echart图表,一般情况下x轴type: 'category',但有时候也用到type: 'time', 这两者的主要 ...
- echart折线图,柱状图,饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain ...
- Echart的angularjs封装
ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 下面正题 用原生js的话,引入echarts.js 无论是图表的样式设置,图表渲染,数据填充都是基于echa ...
- Echart遇到的问题:tooltip提示框大小异常
Echart遇到的问题:tooltip提示框大小异常 参考文章: (1)Echart遇到的问题:tooltip提示框大小异常 (2)https://www.cnblogs.com/wyhluckdog ...
- echart(2),模拟数据导入篇
先上图,就是介样子的: 所模拟的效果就是讲左下角的li里面的数据取出来,然后用环形图的展示出数据. 看代码截图: 1.总的框架图: 2.循环取数据的js代码: 3.echart提供额官方api的代码 ...
- echart封装,前端简单路由,图表设置自动化
https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...
最新文章
- 基于视角特征提取的3D检测方法汇总
- linux下常用命令之nc
- 求100之内的自然数中能被13整除的最大数
- HyperLedger Fabric 错误记录
- ESP32 flash容量配置
- java rmi 还有用吗_java rmi使用后的感想
- 收官礼 |《神策 2018 数据驱动大会回顾专刊》发布,你要的干货,已打包!
- 使用WPF动画编程的几点注意事项[转]
- 深入了解SpringCloud Hystrix
- 二级域名和二级目录的联系与区别
- python脚本性能分析
- MongoTemplate 关于 insert 和 save 函数的区别
- mac 环境 Android Studio升级后Gradle project Sync Failed解决方法
- hadoop 空间配置
- matlab 三角函数 和差化积,三角函数的和差化积公式
- 有道云笔记 迁移 语雀过程记录
- org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 前言中不允许有内容。
- 基于Android+Springboot+Mybatis+Mysql的个人生活APP设计 说明书+项目源码
- iOS开发-简单图片背景替换 实现抠图效果
- 如何检测分布式系统中的故障节点
热门文章
- 对电脑笑了二十分钟的帖子
- 段码LCD屏幕的驱动方法
- MongoDB-SQL语法
- 应用回归分析第五版电子书_《应用回归分析-(第5版)》【价格 目录 书评 正版】_中国图书网...
- Hbuilder插件下载失败,提示“插件下载失败,请检查网络是否正常”
- 2105-小泉的难题
- ansys 软件安装注意事项
- 计算机游戏 25攻略,长生劫游戏过关攻略 长生劫第1-25关通关攻略大全
- Springboot控制台自定义打印logo
- java项目开发实例基于SSM的公司员工管理系统含论文+开题报告