$(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. /var/log/spooler

    /var/log/spooler 用来记录 Linux 新闻群组方面的日志,内容一般是空的,没什么用,了解即可

  2. 将Eclipse项目导入到Android studio 中 很多点9图出现问题解决方法

    在build.gradle里添加以下两句: aaptOptions.cruncherEnabled = false aaptOptions.useNewCruncher = false

  3. Android 程序员必须知道的 53 个知识点

    1. android 单实例运行方法 我们都知道 Android 平台没有任务管理器,而内部 App 维护者一个 Activity history stack 来实现窗口显示和销毁,对于常规从快捷方式 ...

  4. mySQL数据库一:数据类型

    integer(整型)varchar(字符串类型,必须要跟最大字符串)text(大文本)float(单精度,即七到八位有效数字)double(双精度,即15到16位有效数字)date(只有年月日)ti ...

  5. ajax返回值传给js全局变量

    1. $.ajaxSetup({ async : false //设置ajax为同步方式,异步方式的话在赋值时数据还未提取出来 });var t = ""; var enginee ...

  6. Chrome浏览器下CSS字体大小设置小于12px无效问题

    当字体大小被设置小于12px时,IE.firefox可以起作用.但chrome中仍然显示为12px大小. 解决方法为: html, body {     -webkit-text-size-adjus ...

  7. Linux命令学习之xargs命令

    xargs命令是给其他命令传递参数的一个过滤器,也是组合多个命令的一个工具.它擅长将标准输入数据转换成命令行参数,xargs能够处理管道或者stdin并将其转换成特定命令的命令参数.xargs也可以将 ...

  8. Sublime Text 3配置Minify压缩,格式化css,js,html,json,svg

    1.通过 Package Control 安装Minify 按 ctrl + shift + p   输入  Install Package 然后   输入Minify  按回车就可以安装啦 2.安装 ...

  9. 常用的jq插件

    1.时间版翻转 FlipClock-master 2.整屏切换  fullpage 3.轮播图 swiper 4.滚动条样式 mCustomScrollbar 5.过滤和排序布局插件 Isotope. ...

  10. java的bean和map互转的工具类

    import java.beans.BeanInfo;import java.beans.IntrospectionException;import java.beans.Introspector;i ...