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 ...
随机推荐
- MFC （如何通过点击botton打开一个文件夹/文件）
1.建一个MFC的工程,类型为基于对话框.在工具箱里拖进去一个button按键,如下图. 2.双击button1按键就可以进入到点击button1后要执行操作的代码,编写如下代码实现网页/文件夹或者文 ...
- Jmeter（十）检查点
检查点又名断言,我们在手工测试过程中肉眼以及自己的逻辑思维对实际结果进行判断是否与预期结果一致,但是工具是死的,没有眼睛,没有思维,并不知道需要判断的信息在哪块,或者是来判断什么东西,我们需要让工具更 ...
- [UE4]在当前角色正前方2米处生成一个Actor
- JVM内存调优
JVM性能调优有很多设置,这个参考JVM参数即可. 主要调优的目的: 控制GC的行为.GC是一个后台处理,但是它也是会消耗系统性能的,因此经常会根据系统运行的程序的特性来更改GC行为 控制JVM堆栈大 ...
- unhandledException
处理未捕获的异常是每个应用程序起码有的功能,C#在AppDomain提供了UnhandledException 事件来接收未捕获到的异常的通知.常见的应用如下: static void Main(st ...
- MySql存储过程与函数详解
存储过程和函数是在数据库中定义一些SQL语句的集合,然后直接调用这些存储过程和函数来执行已经定义好的SQL语句.存储过程和函数可以避免开发人员重复的编写相同的SQL语句.而且,存储过程和函数是在MyS ...
- Linux下Mysql的odbc配置
在安装配置之前,需要先大概了解一下MyODBC的架构. MyODBC体系结构建立在5个组件上,如下图所示: Driver Manager: 负责管理应用程序和驱动程序间的通信,主要功能包括:解析DSN ...
- Java - 16 Java 方法
在前面几个章节中我们经常使用到System.out.println(),那么它是什么呢? println()是一个方法(Method),而System是系统类(Class),out是标准输出对象(Ob ...
- solr7.4 安装与使用
1.solr7环境要求 solr7需要java8环境,且需要在环境变量中添加 JAVA_HOME变量. 2.solr 安装 下载地址 https://lucene.apache.org/solr/mi ...
- Java中对List集合的常用操作(转)
list中添加,获取,删除元素: list中是否包含某个元素: list中根据索引将元素数值改变(替换): list中查看(判断)元素的索引: 根据元素索引位置进行的判断: 利用list中索引位置重新 ...