Echarts(一)
echarts3.6
1.<!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="barMain" style="height:400px"></div> function loadEcharts(){ //初始化 var myChart = echarts.init(document.getElementById('barMain')); //指定图表的配置项和数据 var option = {
title：{},//标题
tooltip:{},//提示框
legend:{},
grid:{},
xAxis : [],//x轴
yAxis : [],//y轴
series : []//数据、echarts类型(曲、柱、饼)
};
myChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并 } }
2.例子
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title> </head>
<body>
<div id="barMain" style="height:400px"></div>
<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/bar',
'echarts/chart/line'
],
drawEcharts
);
function drawEcharts(ec){
loadEachatrs(ec);
//drawLine(ec);
}
function loadEachatrs(ec){
var myChart = ec.init(document.getElementById('barMain'));
var option = {
title : {//标题
text: '产品库存关系图',
subtext: '数据来自瞎编',
x: 'center',
align: 'right'
}, tooltip:{//鼠标悬浮在柱状图/曲线图上是否加载提示框
show: true
},
legend:{
data:["种类","物品"],
x: 'left',
y:30,
padding:[5,35,5,5]
},
grid:{//控制图形区域与图表容器之间的间隔，就是绘图区与id为barMain的div的占比http://www.mamicode.com/info-detail-1556089.html
"borderWidth":0,
top:100,
containLabel:true
},
xAxis : [
{
type : 'category',
name:"数据",
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
axisLabel:{//加这个x轴显示字体是倾斜状的
interval:0,
rotate:-30
} }
],
yAxis : [
{
name: '个数',
type: 'value',
max: 50
}
],
series : [
{
"name":"种类",
"type":"line",//曲线图
"data":[5, 20, 40, 10, 10, 20], },{
"name":"物品",
"type":"bar",//柱状图
"data":[25, 20, 20, 20, 10, 20],
itemStyle:{normal:{label:{show:true,position:'top'}}}
}
]
};
myChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并 }
</script>
</body>
///////////////////////////////////////////////////////////////////////////////////////////////////注释////////////////////////////////////////////////////////////////////////////////////
series 里面name的值要和legend里面data值一样，不然在实现点击legend时，图形不会出现点击消失点击显示的功能
例子三:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="barMain" style="height:400px"></div>
<div id="lineMain" style="height:400px"></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/bar',
'echarts/chart/line'
],
drawEcharts
); function drawEcharts(ec){
drawBar(ec);
drawLine(ec);
}
function drawBar(ec){
var myBarChart = ec.init(document.getElementById('barMain'));
var option = {
tooltip: {//提示功能
show: true },
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
} function drawLine(ec){
var myLineChart = ec.init(document.getElementById('lineMain'));//创建一个容器
var option2 = {
title : {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip : {//提示框--->注释后鼠标放置曲线上时无弹窗
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} °C'
}
}
],
series : [//数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {//标记提示
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {//标识线
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
myLineChart.setOption(option2,true);
}
</script>
</body>
例子四
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="myChart" style="height:500px"></div>
<div id="lineMain" style="height:400px"></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/bar',
'echarts/chart/line'
],
drawEcharts
); function drawEcharts(ec){
InitBarChart(ec);
}
//柱状图
function InitBarChart(ec) {
var mychart = ec.init(document.getElementById("myChart"));
var option = null;
dataList = [
{ "总数":0,
"监测方法":"GPS监测"
},
{ "总数":100,
"监测方法":"地表裂缝监测"
},
{ "总数":100,
"监测方法":"全站仪地表位移监测"
},
{ "总数":100,
"监测方法":"地面沉降监测"
},
{ "总数":100,
"监测方法":"钻孔倾斜仪监测"
},
{ "总数":100,
"监测方法":"全自动倾斜仪监测"
},
{ "总数":100,
"监测方法":"气温"
},
{ "总数":100,
"监测方法":"天气"
},
{ "总数":100,
"监测方法":"雨量监测"
},
{ "总数":100,
"监测方法":"江河水位监测"
},
{ "总数":100,
"监测方法":"地下水位监测"
},
{ "总数":100,
"监测方法":"孔隙水压力监测"
},
{ "总数":100,
"监测方法":"岩土日含水量"
},
{ "总数":100,
"监测方法":"渗透力监测"
},
{ "总数":100,
"监测方法":"渗流量监测"
},
{ "总数":100,
"监测方法":"推力监测"
},
{ "总数":100,
"监测方法":"锚索测力计监测"
},
{ "总数":100,
"监测方法":"井水"
},
{ "总数":100,
"监测方法":"泉水"
},
{ "总数":100,
"监测方法":"墙裂"
},
{ "总数":100,
"监测方法":"地鼓"
},
{ "总数":100,
"监测方法":"次声"
},
{ "总数":100,
"监测方法":"泥位"
} ]; var names = [];
var values = [];
var total = 0;
var barW = 30;
var botM = 60;
var test ="http://echarts.baidu.com/option.html#title.link";
for (var i = 0;i < dataList.length;i++)
{
names.push(dataList[i]["监测方法"]);
values.push(dataList[i]["总数"]);
}
option = {
title: {
// show:false,//不显示标题,如果不想显示可以整个titl不写
text: "我是主标题",//主标题
subtext: "我是副标题",//副标题
link:test,//给主标题加超链接
x: "left",//主副标题在x轴左侧显示
sublink:test,//给副标题加超链接
//target:'self', //主标题超链接当前窗口打开
//target:'blank', //主标题超链接新窗口打开
//subtarget:'self', //副标题超链接当前窗口打开
//subtarget:'blank', //副标题超链接当前窗口打开
textStyle: {//主标题文字样式设置
color: '#1690cf',
fontSize: 14
},
subtextStyle: {//副标题文字样式设置
color: '#1690cf',
fontSize: 12
},
itemGap:10,//主副标题之间间距
padding: [20, 0, 0, 20],//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
top:50
},
legend: {//图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
//data:['个数'],//series里面的name，如果有多条曲线可以把不同曲线的name写进去data:['name1','name2']
data: [{
name: '个数',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
},
}],
bottom: 10,
left: 'center'
},
tooltip: {//提示框组件
//trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
}, xAxis: [
{
type: 'category',
data: names,
splitLine: false,
axisLabel: {
//rotate: 45,//旋转角度
interval: 0,//强制显示所有标签
textStyle: {
fontSize: 12,
color: '#333',
fontFamily: "微软雅黑"
},
formatter: function (val) {
return val.split("").join("\n");
}
},
axisLine: {
//show:false
},
axisTick: {
//show:false
}
}
],
yAxis: [
{
type: 'value',
splitLine: true,
show: false
}
],
series: [
{
name: "个数",
type: "bar",
data: values,
barWidth: 20,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#000'
}
},
color:"#7977da"//更改柱子颜色
/*color: function (params) {//给每个柱子设置不同的颜色
var colorList = ['#0bd1da', '#47c588', '#45ade2', '#e87c24', '#0f6fc6', '#7977da', '#fdce0f'];
return colorList[params.dataIndex];
}*/
}
}
}
],
//noDataLoadingOption: {
// text: "暂无数据",
// effect: "bubble",
// effectOption: {
// effect: {
// n:0
// }
// }
//},
grid: {
borderWidth: '0px',
left: 10,
right: 10,
top: 80,
bottom: 80
//x: 0,
//y: 0,
//x2: 0,
//y2:0
//y2:0
//left: '0%',
//right: '10%',
//containLabel:true
},//去掉外围边框
//axis: {
// axisLabel: {
// formatter: function (val) {
// return val.split("").join("\n");
// }
// }
//}
}; mychart.setOption(option);
}
</script>
</body>
ECharts名词解析
Echarts(一)的更多相关文章
- 一起来玩echarts系列（一）------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
- 数据图表插件Echarts（一）
一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
- ECharts数据图表系统？ 5分钟上手！
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...
- ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）
一.背景: 我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/ 我们知 ...
- Ionic2系列——在Ionic2中使用ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...
- ECharts的简单使用过程
网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...
随机推荐
- JAVA Map 和 List 排序方法
private Map<String,String> mapDate; //正序 mapDate=new TreeMap<String, String>(new Compara ...
- java之基本数据类型
11,java里面有没有long double类型或者比double更精度的? =========== 11,java里面有没有long double类型或者比double更精度的? java的基本数 ...
- VMware上centos系统忘记账号和密码解决
转载: https://blog.csdn.net/wyx_wyl/article/details/78246907 我们有时会忘记虚拟机上的登陆密码,今天来说一下怎样修改我们的密码.应该对大多数的l ...
- [UE4]传值与传引用
值传递是圆形图标 设置引用需要使用Set by ref函数 对象在蓝图中都是以引用传递 对象,不需要额外设置参数类型是传值还是传引用. 结构体在蓝图中默认是按值传递 也可以手动设置结构体参数为按引用类 ...
- 结合源码分析 bubble 使用注意事项
使用dubbo时候要尽量了解源码,不然会很容易入坑. 一.服务消费端ReferenceConfig需要自行缓存 ReferenceConfig实例是个很重的实例,每个ReferenceConfig实例 ...
- [CVE-2014-8959] phpmyadmin任意文件包含漏洞分析
0x01 漏洞描述 phpmyadmin是一款应用非常广泛的mysql数据库管理软件,基于PHP开发. 最新的CVE-2014-8959公告中,提到该程序多个版本存在任意文件包含漏洞,影响版本如下: ...
- ZooKeeper系列(9)：ZooKeeper实现分布式Barrier和Queue
1. 快速开始 1.1概述: Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统,可提供的服务主要有:配置服务.名字服务.分布式同步.组服务等. 1.2 使用常见 1.2.1 统 ...
- (转)SQL知识_Sql日期时间格式转换
原文地址:http://www.cnblogs.com/Gavinzhao/archive/2009/11/10/1599690.html sql server2000中使用convert来取得dat ...
- django模板(template)
模板层(template) 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. 1 2 3 4 def current_datetime ...
- tips：可变参数列表
tips:可变参数列表! 先来看看以往我们要传递许多参数时是怎么做的: java: public static void main(String []args){} c: int main(int a ...