echarts 饼状图 改变折线长度
$(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 饼状图 改变折线长度的更多相关文章
- php 生成饼状图,折线图,条形图 通用类
生成饼状图,折线图,条形图通用的php类,这里使用的是百度 Echart. Echart 官方网站 http://echarts.baidu.com/ <?php class Echarts ...
- WPF、Silverlight项目中使用柱状图、饼状图、折线图
在开发的过程中,可能会遇到柱状图.饼状图.折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考.本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例.----本文代码使用WPF,Si ...
- 前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...
- php 生成饼状图,折线图,条形图 通用类 2
生成饼状图,折线图,条形图通用的php类,这里使用的是国外的 HighCharts,前台页面别忘了调用HighCahrt js HighCharts中文网站 http://www.hcharts. ...
- canvas图表详解系列(3):动态饼状图(原生Js仿echarts饼状图)
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- BIP_开发案例08_BI Publisher图表示例 饼状图/直方图/折线图(案例)
2014-12-25 Created By BaoXinjian
- Echarts 饼状图自定义颜色
今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...
- jquery echarts 饼状图
var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...
- echarts 饼状图调节 label和labelLine的位置
原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...
随机推荐
- ZooKeeper(七)-- ZK原生API实现分布式锁
一.使用场景 在分布式应用,往往存在多个进程提供同一服务.这些进程有可能在相同的机器上,也有可能分布在不同的机器上. 如果这些进程共享了一些资源,可能就需要分布式锁来锁定对这些资源的访问. 二.实现分 ...
- VR室内定位系统小结
一.写在开始之前 不管是HTC 的Vive还是OC的CV1,都说明VR 定位设备和手柄都会成为未来VR的发展趋势. VR目前关键就是体验,全身心的投入,身临其境的感觉. 不能总玩着玩着,出戏了.这肯定 ...
- CCNP
CCNP全称是:Cisco Certified Network Professional——思科认证网络高级工程师.CCNP专业人员表示通过认证的人员具有丰富的网络知识.获得CCNP认证的专业人员可以 ...
- shell爬虫简易脚本(线程数可控)
1.介绍 以机电之家网站为例 经过初步分析,机电之家的数据量较大,并且数据组织规则较为统一,适合以代码方式进行全量爬取. 企业列表URL统一为http://www.jdzj.com/yp_vlist_ ...
- jQuery --- 收集表单
第一种:常用获取对应表单的value值进行收集: 第二种:用jQuery的 serializeArray() 方法收集: <form id="change"> < ...
- chr(9) chr(10) chr(13) chr(32)
chr(9) tab空格 chr(10) 换行 chr(13) 回车 Chr(13)&chr(10) 回车换行 chr(32) 空格符 ...
- 循环赛日常表算法(N可为奇数和偶数)
一. 实验题目 设有n位选手参加网球循环赛,循环赛共进行n-1天,每位选手要与其他n-1位选手比赛一场,且每位选手每天必须比赛一场,不能轮空.试按此要求为比赛安排日程. 二.实验目的 1.深刻理解并掌 ...
- 修改js confirm alert 提示框文字
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Code Forces 18D Seller Bob(简单DP)
D. Seller Bob time limit per test 2 seconds memory limit per test 128 megabytes input standard input ...
- 对TControl和TWinControl相同与不同之处的深刻理解(每一个WinControl就相当于扮演了整个Windows的窗口管理角色,主要是窗口显示和窗口大小)——TWinControl就两个作用(管理子控件的功能和调用句柄API的功能)
TControl是图形控件,它本身没有句柄,所以不能直接使用WINAPI显示,调整位置,发消息等等,只能想办法间接取得想要的效果,但是可以直接使用一些不需要句柄的API,比如InvalidateRec ...