echarts入门1【柱状图/饼图】
这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录吧~
什么是echarts?
Echarts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
echarts的初次使用
初次使用echarts,要引入echarts.js文件
<script src="echarts.js"></script>
初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
echarts的示例
指定图表的配置项和数据,即设置option
var option = { title: { //
text: '某站点用户访问来源'
},
tooltip: {},
legend: {
//orient: 'vertical',
//left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
xAxis: {
data: [ { value: '直接访问' },
{ value: '邮件营销' },
{ value: '联盟广告' },
{ value: '视频广告' },
{ value: '搜索引擎' }
]},
yAxis: {},
series: [
{
name: '访问来源',
type: 'bar',
data:[5,20,36,30,10]
}
]
};
echarts参数
echarts入门1【柱状图/饼图】的更多相关文章
- Echarts数据可视化series-pie饼图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- Echarts入门教程精简实用系列
引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单 1.从官方网站中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行 ...
- echarts —— 绘制横向柱状图(圆角、无坐标轴)
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
- 如何基于 echarts 实现区间柱状图(包括横向)?
目录 需求 借鉴 echarts 的 demo 最终实现思路 实现效果 遇到的问题: 代码映射 源码 最后 始终如一 需求 需要利用 echarts 实现区间柱状图,效果如下: 效果来源于:g2-柱状 ...
- 百度推出的echarts,制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
- echarts入门
一直好奇,今晚就学习了一番,算是入门的级别,学习总是一个渐进的过程. 一路记录,一路足迹. 一:学习资料 1.主要参考的代码 https://github.com/shengxinjing/imooc ...
- 【前端统计图】echarts实现简单柱状图
图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- echarts入门基础,画柱型图
注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
随机推荐
- 2.5 – Garbage Collection 自动垃圾回收 Stop-the-world vs. incremental vs. concurrent 垃圾回收策略
2.5 – Garbage Collection 自动垃圾回收 Lua 5.3 Reference Manual http://www.lua.org/manual/5.3/manual.html# ...
- spring boot tomcat 线程数 修改初始线程数 统计性能 每百次请求耗时
[root@f java]# tail -30 nohup.outsearchES-TimeMillisSpent:448P->1602@fT->http-nio-8080-exec-3t ...
- ubuntu ibus ,chinese input-method
第一:安装IBus框架, sudo apt-get install ibus ibus-clutter ibus-gtk ibus-gtk3 ibus-qt4 启动IBus框架,在终端输入: im-s ...
- 爬虫基础 - Robots协议
Robots协议 指定一个robots.txt文件,告诉爬虫引擎怎么爬取 https://www.taobao.com/robots.txt User-agent: Baiduspider Allow ...
- mysql 约束条件 auto_increment 自动增长起始值 布长 起始偏移量
我们指定一个字段为自动增长,他默认从1开始自动增长,默认值为1,每次增长为1,步长为1 模糊查询 like % 代表任意个数字符 任意字符长度 查看mysql正在使用变量 show variables ...
- java-基础-【三】try/catch/finally
原文地址: https://my.oschina.net/bieber/blog/703251 一.单层的try/catch public int test(int a,int b){ try{ re ...
- ppt 文字按笔画进入。
1:在word里面写一个字(艺术字或非艺术字都可),字体格式设置为 楷体_gb23212, 没有则下载安装,http://www.cnblogs.com/liyafei/p/8747992.html ...
- http-从域名到页面
目录 1. 网络基础 TCP/IP HTTP DNS URI, URL, and URN URI的格式 2. HTTP简单概括 通过实例看HTTP HTTP报文组成 3. 使用Firefox修改请求首 ...
- 编程当道,学点Python技术好傍身
为了填满AI时代的人才缺口,编程语言教育都从娃娃抓起了!如果你还不懂Python是什么将来怎么给孩子辅导作业呢? Python新手入门教程 近期,浙江省信息技术课程改革方案出台,Python言语现已断 ...
- liunx ubuntu java 环境的配置
手动安装jdk 一,下载jdk安装文件: jdk网站地 址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads ...