ECharts注释
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px;margin-top: 100px;"></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/line', // 使用柱状图就加载bar模块,按需加载
'echarts/chart/bar'
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main')); var option = {
title : {
text: '关注人数',
subtext: '纯属虚构'
},
tooltip : {
axisPointer:{type:'none'},
trigger: 'axis' //提示信息
},
legend: {
data:['关注人数'] //图例
},
toolbox: {
show : true, //工具箱显示
feature : {
mark : {show:true}, //辅助线开关
dataView : {show: true, readOnly: false},//刷新数据
magicType : {show: true, type: ['line', 'bar']},//切换图
restore : {show: true}, //还原
saveAsImage : {show: true} //保存图片
}
},
calculable : true,//拖拽重新计算特性
xAxis : [
{
type : 'category', //类目型
boundaryGap : false, //两端空白取消
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 人'
}
}
],
series : [
{
name:'关注人数',
type:'line',
data:[18, 28, 15, 13, 12, 13, 21],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
ECharts注释的更多相关文章
- Echarts数据可视化series-scatter散点图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-pie饼图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-map地图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-line线图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-heatmap热力图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-graph关系图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-effectscatter特效散点图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化radar雷达坐标系,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
随机推荐
- ios学习--iphone 实现下拉菜单
原文地址:ios学习--iphone 实现下拉菜单作者:sdglyuan00 #import @interface DropDown1 : UIView <</span>UITabl ...
- 25个常用PowerShell命令总结
尽管Windows PowerShell已经出现一段时间了,习惯命令行的管理员可能对了解PowerShell功能的基础很感兴趣. 下面我们看看能由Windows PowerShell完成的最常见的25 ...
- 复习C++:VS2008中的宏干嘛用的
VS2008中有宏,可也进行编辑和设置. 好处: 1.快速生成代码,帮助开发. 2.个人定制化功能,IDE更合适自己用. 3.提升编程效率. 缺点: 使用VB开发,一开始用起来费事.不过有官方参考 ...
- php-memcache基本用法
//create a memcache object $mem = new Memcache(); //create connection $mem->connect ...
- JAVA基础——集合——HashMap
HashMap集合: 常用方法(JDK1.8): 从此映射中移除所有映射关系(元素): public void clear() 返回此 HashMap 实例的浅表副本:并不复制键和值本身: p ...
- linux----------linux的scp命令介绍
1.scp是有Security的文件copy,基于ssh登录. 命令基本格式: scp [OPTIONS] file_source file_target OPTIONS: -v 和大多数 linux ...
- linux 下tftpf搭建
什么是TFTP服务 TFTP(Trivial File Transfer Protocol,简单文件传输协议) 是TCP/IP协议族中的一个用来在客户机与服务器之间进行 简单文件传输的协 ...
- OpenStack-Neutron-安全组
neutron中目前安全组的实现是使用iptables来实现的 创建安全组 创建安全组的时候默认有两条“出”规则(ipv4和ipv6) “default”安全组不仅有“出”规则,还有“入”规则.默认有 ...
- JavaScript 原型链学习(四)原型链的基本概念、原型链实现继承
简单回顾一下构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,假如我们让原型对象等于另一个类型的实例,结果会 ...
- 数据挖掘算法——Close算法
说明奥:菜鸟的自我学习,可能有错. Close算法原理: 一个频繁闭合项目集的所有闭合子集一定是频繁的,一个非频繁闭合项目集的所有闭合超集一定是非频繁的. close算法是对Apriori算法的改进 ...