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 ...
随机推荐
- 谁考了第k名
题目描述: 在一次考试中,每个学生的成绩都不相同,现知道了每个学生的学号和成绩,求考第k名学生的学号和成绩. 输入: 第一行有两个整数,分别是学生的人数n(1≤n≤100),和求第k名学生的k(1≤k ...
- day13 十三、迭代器、生成器、枚举对象
def my_generator(): print(1111) yield '结果1' print(2222) yield '结果2' print(3333) yield '结果3' print(44 ...
- Spring之IOC注入
注入 spring依赖注入 set方法: <property name="属性名" values ="值">--ref="对象名" ...
- 20190422 SQL SERVER 服务
-- 数据库服务-- SQL Server(MSSQLSERVER)是必须要开启的,这个是数据库引擎服务,就像汽车的发动机一样-- SQL Server代理(MSSQLSERVER)是代理服务,比如你 ...
- python框架之Django(8)-CBV中添加装饰器
现有如下检查登录装饰器: from functools import wraps def check_login(func): @wraps(func) def inner(request, *arg ...
- HDU 2874 Connections between cities(LCA Tarjan)
Connections between cities [题目链接]Connections between cities [题目类型]LCA Tarjan &题意: 输入一个森林,总节点不超过N ...
- #WEB安全基础 : HTTP协议 | 0x1 TCP/IP通信
TCP/IP是如何通信的呢? 请看图 用TCP/IP协议族通信时,会通过分层顺序与对方进行通信.发送端从应用层往下走,接受层从链路层往上走. 客户端为了浏览界面在应用层发送请求,为了方便传输在传输层的 ...
- sql server 按年月日分组
sql server 按年月日分组 ----------------------------------------------- --author:yangjinwang --date:2017- ...
- 星型数据仓库olap工具kylin介绍和简单使用示例
本文转载自:https://www.cnblogs.com/hsydj/p/4515057.html 星型数据仓库olap工具kylin介绍 星型数据仓库olap工具kylin介绍 数据仓库是目前企业 ...
- java微信开发之地图定位
页面代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...