Echart ---超详细介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--为ECharts准备一个具备大小(宽高)的Dom-->
<div id="main" style="height:400px;"></div>
<!--ECharts单文件引入-->
<script src="echarts-all.js"></script>
<script type="text/javascript">
//基于准备好的dom,初始化echarts图表
var myChart=echarts.init(document.getElementById('main')); //图表使用
var option = {
tooltip : {//提示框,鼠标悬浮交互时的信息提示
trigger: 'item',//触发类型,默认数据触发,可选为:'axis'
formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框的提示内容格式
},
legend: {//图例,每个图表最多仅有一个图例
orient : 'vertical',//布局方式,默认为水平布局,可选为:'horizontal'|'vertical'
x : 'left',//水平安放位置,默认为全图居中,可选为:'center'|'left'|'right'|{number}(x坐标,单位px)
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']//图例内容数组,数组项通常为{string},每一项代表一个系列的name，默认布局到达边缘会自动分行(列),传入空字符串''可实现手动分行(列)
},
toolbox: {//工具箱,每个图表最多仅有一个工具箱
show : true,//显示策略,默认只是false.可选为:true显示|false隐藏
feature : {//启用功能,目前支持feature，工具箱自定义功能回调处理.
mark : {show: true},//辅助线标志,此处启用.
dataView : {//打开数据视图，可设置更多属性
show: true,
readOnly: false//readOnly默认数据视图为只读,可指定readOnly为false打开编辑功能
},
magicType : {//动态类型切换,支持直角系下的折线图,柱状图,堆积,平铺转换
show: true,
type: ['pie', 'funnel'],//饼图,漏斗图
option: {//图表选项,包含图表实例任何可配置选项:公共选项,组件选项,数据选项
funnel: {//漏斗图配置
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
restore : {show: true},//还原,复位原始图表
saveAsImage : {show: true}//保存图片IE8-不支持,上图icon最右,可设置更多属性.
}
},
calculable : true,//是否启用拖拽重计算特性,默认关闭
series : [//驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据
{
name:'访问来源',//系列名称
type:'pie',//图表类型,折线图line,散点图scatter,柱状图bar,饼图pie,雷达图radar
radius : ['50%', '70%'],//半径,支持绝对值px和百分比,百分比计算比,min(width, height)/2*75%,传数组实现环形图,[内半径,外半径]
itemStyle : {//图形样式,可设置图表内图形的默认样式和强调样式（悬浮时样式）
normal : {//默认样式
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {//强调样式
label : {
show : true,
position : 'center',//标签显示位置,地图标签不可指定位置
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
}; //为echats对象加载数据
myChart.setOption(option);
</script>
</body>
</html>
Echart ---超详细介绍的更多相关文章
- Python 并行分布式框架：Celery 超详细介绍
本博客摘自:http://blog.csdn.net/liuxiaochen123/article/details/47981111 先来一张图,这是在网上最多的一张Celery的图了,确实描述的非常 ...
- 【转】HBase 超详细介绍
---恢复内容开始--- http://blog.csdn.net/frankiewang008/article/details/41965543 1-HBase的安装 HBase是什么? HBase ...
- HBase 超详细介绍
1-HBase的安装 HBase是什么? HBase是Apache Hadoop中的一个子项目,Hbase依托于Hadoop的HDFS作为最基本存储基础单元,通过使用hadoop的DFS工具就可以看到 ...
- mac自带功能超详细介绍
mac自带的超实用的功能分享给大家,包含自带的Spotlight(聚焦) 计算器功能,预览的 PDF 压缩功能,切换同一应用的不同窗口等,让您的工作更加轻松. 1.Spotlight(聚焦) 计算器功 ...
- linux服务器安装svn超详细介绍
#!/bin/sh REPOS="$1" REV="$2" export LANG=en_US.UTF-8 LOG_PATH=/tmp/svn.log echo ...
- 超详细，多图文介绍redis集群方式并搭建redis伪集群
超详细,多图文介绍redis集群方式并搭建redis伪集群 超多图文,对新手友好度极好.敲命令的过程中,难免会敲错,但为了截好一张合适的图,一旦出现一点问题,为了好的演示效果,就要从头开始敲.且看且珍 ...
- 超详细，多图文使用galera cluster搭建mysql集群并介绍wsrep相关参数
超详细,多图文使用galera cluster搭建mysql集群并介绍wsrep相关参数 介绍galera cluster原理的文章已经有一大堆了,百度几篇看一看就能有相关了解,这里就不赘述了.本文主 ...
- 原来你是这样的BERT，i了i了！ —— 超详细BERT介绍（一）BERT主模型的结构及其组件
原来你是这样的BERT,i了i了! -- 超详细BERT介绍(一)BERT主模型的结构及其组件 BERT(Bidirectional Encoder Representations from Tran ...
- iOS-申请邓白氏编码的超详细流程介绍
导读 11.22号要申请苹果公司开发者账号,所以当天下午申请了邓白氏编码,昨天邓白氏编码下来了,这里就做一下记录,分享给大家. 概览 11.22提交的邓白氏编码申请,11.28(礼拜一)华夏邓白氏发来 ...
随机推荐
- WPF 绘制对齐像素的清晰显示的线条
此前有小伙伴询问我为何他 1 像素的线条显示发虚,然后我告诉他是“像素对齐”的问题,然而他设置了各种对齐像素的属性依旧没有作用.于是我对此进行了一系列试验,对 WPF 像素对齐的各种方法进行了一次总结 ...
- LeetCode 773. Sliding Puzzle
原题链接在这里:https://leetcode.com/problems/sliding-puzzle/description/ 题目: On a 2x3 board, there are 5 ti ...
- LG1155 双栈排序
题意 Tom最近在研究一个有趣的排序问题.如图所示,通过2个栈\(S_1\)和\(S_2\),Tom希望借助以下4种操作实现将输入序列升序排序. 操作a 如果输入序列不为空,将第一个元素压入栈\(S_ ...
- GPS数据包格式解析
四种定位系统:1.美国的全球定位系统(Global Positioning System,GPS)2.俄罗斯的格罗拉斯(Global Nabigation Satellite System,GLONA ...
- 【备忘】windows环境下20行php代码搞定音频裁剪
先上图,由于最近的需求需要对语音文件进行处理,所以抽空研究了下php处理音/视频文件的处理,简单的demo处理,截取一个音频文件的前20秒,并保存新的媒体文件. 操作步骤: ①在此站点下载所需的辅助程 ...
- qt下用启动图
void showSplash(void) { QSplashScreen*splash=newQSplashScreen; splash->setPixmap(QPixmap(":/ ...
- java代码--------实现随机输出100个随机数，10行，0--到9的数字
总结:妹纸不是那么会表述,如有不妥之处,请提出来 package com.sads; //杰伦的世界 //实现在0-100个数中,随机输出数每行10个数,也就是10行10列,这些数在0---到9之间 ...
- [转] Jsp 重点
讲师:传智播客 方立勋 4个域对象: pageContext | page 域 request | request 域 session | session 域 servletContext | app ...
- webView放弃capture()截图的替代方法
float scale = webView.getScale(); height = (int) (webView.getContentHeight() * scale + 0.5); bitmap ...
- PHP中实现函数重载
转载自:http://cnn237111.blog.51cto.com/2359144/1284085 由于PHP是弱类型语言,因此函数的输入参数类型无法确定(可以使用类型暗示,但是类型暗示无法用在诸 ...