版权声明：更多信息请关注 wwws.shinians.com 官网 https://blog.csdn.net/zzhuan_1/article/details/83964136
1.柱形图设计
option= {
color: ['#00AEFF','#00699A','#fed61c'],
backgroundColor: '#2A456B',//背景色
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title: {
text: '验船师人员缺口统计图',
x : '20px' ,
y:'-1px',
textStyle: {
fontSize: 20,
fontWeight: 'bolder',
color: '#FFF' // 主标题文字颜色
},
}
,
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis :
{
type : 'category',
boundaryGap : true,
data : ["船体","机电","其它"],
axisLine:{
lineStyle:{
color:'#00C6FF',
width:1,//这里是为了突出显示加上的
}
}
}
,
yAxis :
{
name:'人',
type : 'value',
axisLine:{
lineStyle:{
color:'#00C6FF',
width:1,//这里是为了突出显示加上的
}
}
}
,
series : [
{
type:'bar',
barWidth:40,
stack: '验船师学历',
data:[23,34,45]
}
]
}2.echart - 饼图
app.title = '嵌套环形图';
option = {
color: ['#ED3F49','#00AEFF','#00699A','#FED61c','rgba(64, 82, 114, 0.6)','#405272'],
backgroundColor: '#2A456B',//背景色
tooltip: {
trigger: 'none',
// trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
title: {
text: '验船师类别',
x : '20px' ,
y:'-1px',
textStyle: {
fontSize: 20,
fontWeight: 'bolder',
color: '#FFF' // 主标题文字颜色
},
},
legend: {
orient: 'vertical',
left: 'left',
textStyle: {
color: '#00C6FF' // 图例文字颜色
},
y: 'bottom',
data: ['验船员','助理验船师','中级验船师','高级验船师']
},
series: [
{
name:'访问来源',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position: 'outer'
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{value:2646, name:'验船员',selected:true},
{value:3036, name:'助理验船师'},
{value:895, name:'中级验船师'},
{value:251, name:'高级验船师'}
]
,
itemStyle: {
normal: {
// color: '各异',
borderColor: '#405272',
borderWidth: 1,
label: {
show: true,
position: 'outer',
formatter: '{b} \n {c} ({d}%)'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
,textStyle:{
fontSize:16
}
},
labelLine: {
show: true,
length: 50,
lineStyle: {
// color: '各异',
width: 2,
type: 'solid'
}
}
},
emphasis: {
// color: 各异,
borderColor: '#405272',
borderWidth: 2,//鼠标移动上去的宽度
label: {
show: true,
position: 'outer'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
labelLine: {
show: true,
length: 1,
lineStyle: {
// color: 各异,
width: 1, ////鼠标移动上线的宽度
type: 'solid'
}
}
}
}
}
,
//外侧圆圈设置
{
name:'外侧圆圈设置',
type:'pie',
radius: ['34%', '43%'],
data:[
{value:788, name:''}
],
labelLine: {
normal: {
show: false
}
},
tooltip: {
trigger: 'none',
},
itemStyle: {
normal: {
//设置透明色
borderColor: 'rgba(97, 117, 137, 0.1)',//#405272
borderWidth: 7,
},
emphasis: {
}
}
}
]
};3.折线图-多条echart
option = {
color: ['#00FCD1','#02B4F7','#0083A3'],
backgroundColor: '#2A456B',//背景色
title: {
text: '堆叠区域图',
x : '20px' ,
y:'-5px',
textStyle: {
fontSize: 20,
fontWeight: 'bolder',
color: '#FFF' // 主标题文字颜色
},
},
tooltip : {
/* trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},*/
////////////
trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration : 0.4, // 动画变换时间，单位s
// 提示内边距，单位px，默认各方向内边距为5，
// formatter: '{a} : <span style="color:#FAFB02">{c}</span> ' , // 接受数组分别设定上右下左边距，同css
formatter:function(a) {
var relVal = '';
for(var i in a){
var domain=a[i] ;
relVal +=domain.seriesName+ ' : <span style="color:#FAFB02">'+domain.value+'</span><br/>';
}
//relVal =a[0].seriesName+ ' : <span style="color:#FAFB02">'+a[0].value+'</span><br/>';
// relVal += a[1]+'°C';
return relVal;
} ,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle : { // 直线指示器样式设置
color: '#FAFB02',
width: 1,
type: 'dashed'
},
shadowStyle : { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
},
textStyle: {
color: '#fff'
}
},
//图例设置
legend: {
data:['邮件营销','联盟广告'],
textStyle: {
color: '#00C6FF' // 图例文字颜色
},
x: 'center',
y: '20px',
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis :
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日'] ,
axisLabel:{
interval:0,//横轴信息全部显示
// rotate:-30,//-30度角倾斜显示
},
axisLine:{
lineStyle:{
color:'#00C6FF',
width:1,//这里是为了突出显示加上的
}
}
}
,
yAxis :
{
type : 'value',
axisLine:{
lineStyle:{
color:'#00C6FF',
width:1,//这里是为了突出显示加上的
}
}
}
,
series : [
{
name:'邮件营销',
type:'line',
//stack: '总量',
symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
symbolSize: 8,//圈的大小
areaStyle: {normal: {
areaStyle: {
// todo:区域图，纵向渐变填充
/* color: function(params) {
// for bar
var zrColor =require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 2000, 0, 400,
[[0, '#00FCD1'], [0.5, 'red']]
)
}*/
}
}},
/* markPoint : {
data : [
{type : 'max', name: '最大值'}
]
},*/
//线的样式
itemStyle: {
/* normal: {
color: 'red',
lineStyle: { // 系列级个性化折线样式
width: 1,
type: 'dashed'
}
},*/
emphasis: {
color: '#ffff00',//黄色
symbolSize: 28,
borderColor: '#f9f900',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#333'
}
},
/* label: {
normal: {
show: false
},
emphasis: {
show: false
}
},*/
data:[120,132, 101, 134, 90, 230, 210],
/*{value:132,symbolSize:20}*/
},
{
name:'联盟广告',
type:'line',
areaStyle: {normal: {}},
data:[220, 182, 191, 234, 290, 330, 310],
symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
symbolSize: 8,//圈的大小
areaStyle: {normal: {
areaStyle: {
}
}}, itemStyle: {
emphasis: {
color: '#ffff00',//黄色
symbolSize: 28,
borderColor: '#f9f900',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#333'
}
},
}
]
};
4.折线图-检验机构-近5年检验工作完成率
option = {
color: ['#02B4F7','#0083A3','#00FCD1'],
backgroundColor: '#2A456B',//背景色
title: {
text: '近5年检验工作完成率',
x : '20px' ,
y:'-1px',
textStyle: {
fontSize: 20,
fontWeight: 'bolder',
color: '#FFF' // 主标题文字颜色
}
},
tooltip : {
trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration : 0.4, // 动画变换时间，单位s
formatter:function(a) {
var relVal = '';
for(var i in a){
console.log(i)
if(i<2){
var domain=a[i] ;
relVal +=domain.seriesName+ ' : <span style="color:#FAFB02">'+domain.value+'</span><br/>';
}
}
//relVal =a[0].seriesName+ ' : <span style="color:#FAFB02">'+a[0].value+'</span><br/>';
// relVal += a[1]+'°C';
return relVal;
} ,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle : { // 直线指示器样式设置
color: '#FAFB02',
width: 1,
type: 'dashed'
},
shadowStyle : { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
},
textStyle: {
color: '#fff'
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : {
type : 'category',
boundaryGap : false,
data :['2012','2013','2014','2015','2016'] ,
axisLabel:{
interval:0//横轴信息全部显示
},
axisLine:{
lineStyle:{
color:'#00C6FF',
width:1
}
}
}
,
yAxis :
{
name:"（%）",
color:'#ffff00',
type : 'value',
axisLine:{
lineStyle:{
color:'#00C6FF',
width:1//这里是为了突出显示加上的
}
}
}
,
series : [
{
name:'工作完成率',
type:'line',
//stack: '总量',
symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
symbolSize: 8,//圈的大小
areaStyle: {normal: {
areaStyle: {
}
}},
//线的样式
itemStyle: {
emphasis: {
color: '#ffff00',//黄色
symbolSize: 28,
borderColor: '#f9f900',
borderWidth: 4,
shadowBlur: 10,
shadowColor: '#333'
}
},
data:[43,54,56,78,88]
}]
};