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" ...
随机推荐
- Python爬虫框架Scrapy实例(一)
目标任务:爬取腾讯社招信息,需要爬取的内容为:职位名称,职位的详情链接,职位类别,招聘人数,工作地点,发布时间. 一.创建Scrapy项目 scrapy startproject Tencent 命令 ...
- Day04 dom详解及js事件
day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证 上次课内容回顾: JS中ECMAScript用法: JS定义变 ...
- Jetty:配置概览-怎么配置Jetty
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/liuy_98_1001/article/details/27544671 Jetty POJO配置 ...
- GlobeMapper生成Google瓦片
GlobeMapper真牛,生成自己的瓦片叠在GoogleMap的地图上,效果如下:
- makefile中ifeq与ifneq dev/null和dev/zero简介 dd命令
ifeq语法是ifeq "<arg1>;" "<arg2>;" ,功能是比较参数“arg1”和“arg2”的值是否相同,相同时为1 i ...
- .NET 海量数据处理,并处理事务问题
1.下面是一个C#的控制台以代码来说明处理 using System.Data.SqlClient; class Program { static void Main() { string conne ...
- [环境配置] 如何为Apache绑定多IP多域名
在Apache服务器上绑定方法比较简单,主要因为Apache是个开源独立的服务器软件,而且支持跨平台安装和配置,支持丰富的API扩展,所以很多人对Apache的好感要甚于IIS,Apache的优点就不 ...
- [转]Birdfont 2.10 发布,字体编辑器
最近在忙大数据.黑天鹅算法实盘测试 许久没有更新字库方面的资料,汗一个... 今天转一个 :Birdfont 2.10 发布,字体编辑器 字体编辑器,向来很少,除了fontlab的几个昂贵的商业版,就 ...
- hdu5106 数位dp
这题说的是给了一个二进制数R , 计算出 在[0,R) 区间内的数, 二进制中有n个1 个和 n<=1000; R<2^1000, 这样 用dp[len][lee] 表示在第len位的时候 ...
- jmeter -xml日志格式中网络时间与服务器时间的区分
在 LR 中是有一个“网页细分图”的,通过这个图,你可以比较容易的区分哪些请求的响应时间最长,如果响应时间过程,是消耗在server处理的时候,还是消耗在网络传输过程中——也就是所谓的 Server ...