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 ...
随机推荐
- linux安装nagios客户端
( 安装到 被监控的机器上)新增用户和组 useradd nagiosgroupadd nagcmd usermod -a -G nagcmd nagios (如果安装中报没有c编译器,就 yum i ...
- 查看用户信息:w
w命令有两个用途: (1) 用于查看当前系统负载(2) 用于查看当前登录用户的行为和信息,执行这个命令可以得知当前登入系统的用户有哪些人,以及他们正在执行哪些程序 [root@localhost ~] ...
- iOS文件处理介绍(一)
一.在Documents.tmp和Library中存储文件 Documents:用于存储应用程序中经常需要读取或写入的常规文件. tmp:用于存储应用程序运行时生成的文件.(随着应用程序的关闭失去了利 ...
- ATL字符宏使用以及代码测试
// ATL_Convert.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #incl ...
- jdbc链接数据库,获取表名,字段名和数据
import java.sql.Connection; import java.sql.DatabaseMetaData; import java.sql.DriverManager; import ...
- LNMP redis 安装、PHPredis扩展配置、服务器自启动、redis认证密码
背景: LNMP 环境(centos7) 一. 安装redis 1.下载,解压,编译 $ cd /usr/local$ wget http://download.redis.io/releases/r ...
- Linux学习之批量修改文件名
1. 通过专业的改名命令rename实现 [root@oldboy oldboy]# ll total -rw-r--r-- root root Nov : stu_102999_1_finished ...
- img通过canvas转成base64编码
<script type="text/javascript"> function getBase64Image(img) { var canvas = document ...
- 根据Uri获取图片绝对路径,解决Android4.4以上版本Uri转换
转:http://blog.csdn.net/q445697127/article/details/40537945 /** * 根据Uri获取图片绝对路径,解决Android4.4以上版本Uri转换 ...
- java 中的String类型数据添加双引号
转义符 \ 加上引号 \" <?xml version="1.0"encoding="GBK"?> String temp = &qu ...