$(function (){
//ups部分
var myChart = echarts.init(document.getElementById('result'))
var option = {
title : {
text: '实验结果评测',
x:'center',
y:'top',
top:'7%',
textAlign:'left',
textStyle:{
fontWeight:'normal',
color:'#000',
fontSize:'15'
}
},
grid: {
top: '20%',
left: '50%',
right: '50%',
bottom: '1%',
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable : true,
series : [

{
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
name:'访问来源',
type:'pie',
radius : ['25%','35%'],
center: ['47%', '50%'],
label:{show:true},
labelLine:{show:true,length:100},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
],

labelLine: {
normal: {
smooth: 0.2,        //此处是改变折线的长度
length: 5,
length2: 4
}
},
itemStyle:{
normal:{
color:function(params){
var colorList=['#5eaee3','#9abd5f','#fa8564'];
return colorList[params.dataIndex];
}
},

},
data:[
{value:335, name:'不合格:30台'},
{value:310, name:'正常:35台'},
{value:234, name:'异常:35台'}
]
}
]
};
myChart.setOption(option);
//点击事件
myChart.on('click', function (param){
/* var name=param.name;
if(name=="不合格:30台"){
window.location.href="http://www.wellinte.com/";
}else if(name=="正常:35台"){
window.location.href="http://www.wellinte.com/";
}else if(name=="异常:35台"){
window.location.href="http://www.wellinte.com/";
}else{
window.location.href="http://www.baidu.com/";
} */
});
myChart.on('click');

//寿命评估
var life=document.getElementById('reasonLife');
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var lifeHeight = function () {
life.style.width =(window.clientWidth-100)+'px';
life.style.height =(window.clientHeight-100)+'px';
};
//设置容器高宽
lifeHeight();
var reasonLife = echarts.init(life);
var option = {
title : {
text: '寿命评估',
x:'center',
y:'top',
textAlign:'left',
top:'5%'
},
tooltip : {
trigger: 'axis',
axisPointer:{
type:'none',
},
},
/*legend: {
data:['蒸发量']
},*/
grid: {
top: '20%',
left: '8%',
right: '3%',
bottom: '1%',
containLabel: true
},
toolbox: {
right:'3%',
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',
data : ['前期','中期','末期','损耗期']
}
],
yAxis :{
axisLine:{show:false},
nameLocation:'middle',
nameGap:35,
name:'个数(个)',
type : 'value'
},
series : [
{
name:'寿命评估',
type:'bar',
barWidth : 50,
data:[150,100,40,60],
itemStyle:{
normal:{
color:function(params){
var colorList=['#ffc100','#9abd5f','#56bdde','#fa8564'];
return colorList[params.dataIndex];
}
}
}
},

],
};
reasonLife.setOption(option,true);
//点击事件
reasonLife.on('click', function (param){
/* var name=param.name;
if(name=="前期"){
window.location.href="http://www.wellinte.com/";
}else if(name=="中期"){
window.location.href="http://www.wellinte.com/";
}else if(name=="末期"){
window.location.href="http://www.wellinte.com/";
}else if(name=="损耗期"){
window.location.href="http://www.wellinte.com/";
}else{
window.location.href="http://www.baidu.com/";
} */
});
reasonLife.on('click');
//以上为ups部分

//以下为仪表部分
var ochart=document.getElementById('reason');
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var place = function () {
ochart.style.width = (window.clientWidth-100)+'px';
ochart.style.height =(window.clientHeight-100)+'px';
};
//设置容器高宽
place();
var reason = echarts.init(ochart);
var option = {

title : {
text: '寿命预警分类',

x:'center',
y:'top',
textAlign:'left',
top:'5%'
},
tooltip : {
trigger: 'axis',
axisPointer:{
type:'none',
},
},
/* legend: {
data:['蒸发量']
},*/
grid: {
top: '20%',
left: '8%',
right: '3%',
bottom: '1%',
containLabel: true
},
toolbox: {

right:'3%',
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',
data : ['A级','B级','C级']
}
],
yAxis :{
axisLine:{show:false},
nameLocation:'middle',
nameGap:35,
name:'个数(个)',
type : 'value'
},
series : [
{
name:'个数',
type:'bar',
barWidth : 50,
data:[160,80,40],
itemStyle:{
normal:{
color:function(params){
var colorList=['#ffc100','#9abd5f','#56bdde','#fa8564'];
return colorList[params.dataIndex];
}
}
}
},

]
};
reason.setOption(option);
//点击事件
reason.on('click', function (param){
/* var name=param.name;
if(name=="A级"){
window.location.href="http://www.wellinte.com/";
}else if(name=="B级"){
window.location.href="http://www.wellinte.com/";
}else if(name=="C级"){
window.location.href="http://www.wellinte.com/";
}else{
window.location.href="http://www.baidu.com/";
} */
});
reason.on('click');
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
reason.resize()|| reasonLife.resize();;
place() || lifeHeight();;
};

});

echarts 饼状图 改变折线长度的更多相关文章

  1. php 生成饼状图,折线图,条形图 通用类

    生成饼状图,折线图,条形图通用的php类,这里使用的是百度 Echart. Echart 官方网站  http://echarts.baidu.com/ <?php class Echarts ...

  2. WPF、Silverlight项目中使用柱状图、饼状图、折线图

    在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...

  3. 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...

  4. php 生成饼状图,折线图,条形图 通用类 2

    生成饼状图,折线图,条形图通用的php类,这里使用的是国外的 HighCharts,前台页面别忘了调用HighCahrt  js HighCharts中文网站  http://www.hcharts. ...

  5. canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  6. BIP_开发案例08_BI Publisher图表示例 饼状图/直方图/折线图(案例)

    2014-12-25 Created By BaoXinjian

  7. Echarts 饼状图自定义颜色

    今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...

  8. jquery echarts 饼状图

    var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...

  9. echarts 饼状图调节 label和labelLine的位置

    原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...

随机推荐

  1. Ehcache整合spring

    下面介绍一下简单使用的配置过程:ehcache.jar及spring相关jar就不说了,加到项目中就是了. 简单的使用真的很简单.但只能做为入门级了. 1.ehcache.xml,可放classpat ...

  2. Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile)

    使用maven打包的时候出现如下错误: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compil ...

  3. Python 处理输入输出

    sys.stdin.read() 用于接收标准输入,也就是让用户通过键盘进行输入sys.stdout.write() 用于打印标准输出,也就是把输入的数据输出到屏幕sys.stderr.write() ...

  4. Array遍历的小技巧

     如果在遍历中删除或增加了部分元素,就会导致遍历失败,因为对象数组的长度发生了变化,索引随之而变,遍历的结果不完整或者引发运行时错误.其实不需要任何复杂的判断,最简单的方法是:倒过来遍历,像这样: f ...

  5. CentOS6.4环境下布署LVS+keepalived笔记

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://400053.blog.51cto.com/390053/713566 环境: 1 ...

  6. SuperSlide——再次接触

    原来自己很早之前就接触过SuperSlider这个神奇的插件,原谅自己又得了“健忘症”,因此昨天就把自己“坑”了一把: 前言: 交易一期的项目即将上线,在解决测试同事们提出的bug的时候,无意间看到页 ...

  7. 基于Cocos2d-x学习OpenGL ES 2.0系列——初识MVP(3)

    在上一篇文章中,我在介绍vertex shader的时候挖了一个坑:CC_MVPMatrix.它其实是一个uniform,每一个Cocos2d-x预定义的shader都包含有这个uniform,但是如 ...

  8. jQuery中如何解决多库冲突问题

    方法一:使用noConflict():舍弃$,$用jQuery代替jQuery.noConflict(); 方法二:自定义变量:舍弃$,新定义一个$y变量来代替$var $y = jQuery.noC ...

  9. iOS - UITableView判断reloadData加载数据已经结束

    问题: stackoverflow上有人提问这样的问题 http://stackoverflow.com/questions/16071503/how-to-tell-when-uitableview ...

  10. MyBatis中typealiases的使用

    转自:http://blog.csdn.net/lelewenzibin/article/details/42713585 问题描述 Mybatis有个代码生成工具,生成的代码里面有mapper.xm ...