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" ...
随机推荐
- drop user ora-604 ora-54
SQL> drop user EFMIS_87_LK cascade;drop user EFMIS_87_LK cascade*ERROR at line 1:ORA-00604: error ...
- redhat 6安装详解
备注:redhat 6 系列OS安装步骤一致. 此处安装redhat 6.5 64位版本,即rhel-server-6.5-x86_64-dvd.iso 一.安装RHEL 6.5 用光盘成功引导系统, ...
- nginx repos
vim /etc/yum.repos.d/nginx.repo 然后将下面的内容复制进去: [nginx] name=nginx repo baseurl=http://nginx.org/packa ...
- supervisord部署
https://blog.csdn.net/vbaspdelphi/article/details/54091095https://blog.csdn.net/shudaqi2010/article/ ...
- java 入门基础学习
问题一:java编写的源代码为什么能在windows/linux/macOS操作系统运行?运行原理是什么?为什么说它是跨平台的? 从jdk/jvm/jre说起 1.JDK简介 https://blog ...
- mysql 约束条件 primary key 主键
primary key字段的值不为空且唯一 约束:not null unique 存储引擎:innodb 对于innodb来说,一张表内必须有一个主键 单列做主键多列做主键(复合主键) 通常都是id字 ...
- mybatis 中jdbctype和javatype的对应关系
1:mybatis 中jdbctype和javatype的对应关系 JDBC Type Java Type CHAR String VARCHAR String LONGVARCHAR String ...
- PAT 1082 Read Number in Chinese[难]
1082 Read Number in Chinese (25 分) Given an integer with no more than 9 digits, you are supposed to ...
- flume通过avro对接(汇总数据)
使用场景: 把多台服务器(flume generator)上面的日志汇总到一台或者几台服务器上面(flume collector),然后对接到kafka或者HDFS上 Flume Collector服 ...
- C#反射——简单反射操作类的封装
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Re ...