$(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. hadoop程序MapReduce之WordCount

    需求:统计一个文件中所有单词出现的个数. 样板:word.log文件中有hadoop hive hbase hadoop hive 输出:hadoop 2 hive 2 hbase 1 MapRedu ...

  2. VC++ 6.0创建MFC工程时的初级备要点(二)

        在看到一个MFC工程时,可能根据上一篇文章已经知道了哪些是重要的,那些是在创建工程的时候已经被初始化的!!下面介绍一下在看代码的过程的策略!!这里假设创建的基于多对话框的MFC工程名为test ...

  3. JS-运动基础——案例应用:淡入淡出效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. SenchaTouch学习博客

    魔狼在世: http://www.cnblogs.com/mlzs/

  5. jquery背景backgroundPosition插件

    在jquery官网里找到(http://plugins.jquery.com/kbw.backgroundpos/) 语法: obj.animate({'background-position': ' ...

  6. 使用Eclipse(以及intellij IDEA)配合JDWP对服务器上部署的代码进行调试

    今天遇到了一个问题:同样的代码,在服务器上跑的时候会报空指针异常,但是在本地是没有问题的,看服务器上打印的日志只能看到异常信息,不能准确地定位到出问题的代码,于是就搜索了一下远程调试.结果还真的可以在 ...

  7. WCF(二) 使用配置文件实现WCF应用程序

    服务三要素ABCA:Address 在哪里 (包含传输方式的信息)B:Binding 怎么实现(与地址的传输方式要匹配)C:Contract做什么(服务契约) namespace WCFService ...

  8. jfinal的controller默认访问的方法是什么

    index()方法: 如: @Controller("/test/exam")public class TestController 如下请求请求:http://localhost ...

  9. linux对文件某列求和

    对文件某列求和: -F,用,号分隔,求第3行的和 awk -F,  '{sum += $3};END {print sum}' test

  10. mysql登录密码特殊字符处理

    mysql -h 192.168.12.23 -u root  -pClz_b1qYPyl6$Zu1 登录报错 mysql -h 192.168.12.23 -u root  -pClz_b1qYPy ...