echarts常用说明
import { Injectable } from '@angular/core';
//模板option通用
let fff7 = '#fff'; //字体统一颜色rgba(255,255,255,0.7)
let fs = 14; //图表统一字体大小
let COLOR = ['#FBA3BC', '#0C8AEB', '#2EEA07', '#D74D0A', '#BE8EDE', '#66cccc', '#ff6666', '#cc3399', '#499FD9']; //主体颜色
//let COLOR = ['#8cc546', '#b3d3f0', '#f39e7a', '#f34d2f', '#42a3f5'];
let toolboxColor = ['#fff', '#fff', '#fff']; //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
let titlestyle = {
fontSize: 14,
fontWeight:400,
color: fff7
}; //标题样式
let AxisColor = '#0F495C'; //#204f81 轴的统一颜色值
let axisTick = { // 坐标轴小标记
show: true, // 属性show控制显示与否，默认不显示
interval: 'auto',
inside: false, // 控制小标记是否在grid里
length: 6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: AxisColor,
width: 2
}
};
let dataViewIshow = true; //是否显示数据视图
let ItemStyle = {
normal: {
label: {
show: true,
position: 'top' ////insideTop(柱状内部靠顶部)，insideBottom(柱状内部靠下方)，insideRight(柱状内部靠右边)，insideLeft(柱状内部靠左边) inside(自适应，柱状内部中央),top（柱状外的正上方）,bottom(柱状外的正下方)，left(柱状外的左边)，right(柱状外的右边)
}
}
}; //formatter: '{c}%', //柱形图或者线形图上方展示数值
let yAxisSplitLine = {
show: true,
lineStyle: {
color: [AxisColor],
width: 1,
type: 'solid'
}
}; //设置公共网格线
let BackGroundColor = '#0d1c3d'; //图表的背景颜色
let placeHoledStyle = {
normal:{
barBorderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)'
},
emphasis:{
barBorderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)'
}
};
let dataStyle = {
normal: {
label : {
show: true,
position: 'insideRight',
formatter: '{c}'
}
}
};
@Injectable({
providedIn: 'root'
})
export class EchartsService {
public placeHoledStyle = placeHoledStyle;
public dataStyle = dataStyle;
public itemStyle2:any;//多维条形图文字显示
public color2 = ['#FFFF00','#9426E6','#00B050','#FF9900','#FFCCFF','#FF0000','#00FFFF'];
public LineColumnOption1: any; //折线柱状图公共模板1 横向
public LineColumnOption2: any; //折线柱状图公共模板2 纵向
public multidimensionalBar: any; //多维条形图
public doubleDefeatOption: any; //双层圆图表合体
public doubleDefeatOption2: any; //双层圆图表分开
public lasagnaOption: any; //千层饼圆
public normaCirclelOption: any; //正常圆
public ringOption: any; //空心圆
constructor() {
//折线柱状图公共模板1 横向
this.LineColumnOption1 = {
backgroundColor: BackGroundColor,
title: {
top: '10',
left: 'center',
textStyle: titlestyle
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
color: COLOR,
legend: {
orient: 'horizontal', //vertical
show:true,
x: 'center',
y: '30px',
itemWidth: 20,
itemHeight: 14,
textStyle: { //图例文字的样式
color: fff7,
fontSize: fs //统一设置颜色
},
data: []
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: dataViewIshow,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
/*'stack', 'tiled'*/
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
grid: {
x: "60px",
y: "18%",
x2: "40px",
y2: "14%",
borderWidth: 0 /*去除图表边框线*/
},
calculable: true,
timeLine: [],
xAxis: [{
type: 'category',
boundaryGap: true,
axisLabel: {
rotate: 45,
textStyle: {
color: fff7
}
},
axisTick: axisTick,
axisLine: {
type: 'solid', //设置轴线样式
lineStyle: {
color: AxisColor
} //设置轴线颜色
},
splitLine: {
show: false
}, //去除网格线
data: []
}],
yAxis: [{
type: 'value',
name: '',
nameLocation: 'end', //middle中间 start end
nameTextStyle: {
color: '#fff'
}, //改变坐标轴单位name的颜色
scale: true,
splitLine: yAxisSplitLine, //设置网格线
axisTick: axisTick,
axisLabel: {
textStyle: {
color: fff7
},
},
axisLine: {
type: 'solid', //设置轴线样式
lineStyle: {
color: AxisColor
} //设置轴线颜色
}
}],
series: []
};
//折线柱状图公共模板2 纵向
this.LineColumnOption2 = {
backgroundColor: BackGroundColor,
title: {
top: '10',
left: 'center',
textStyle: titlestyle
},
color: COLOR,
tooltip: {
trigger: 'axis'
},
grid: {
x: "16%",
y: "18%",
x2: "5%",
y2: "14%",
borderWidth: 0 /*去除图表边框线*/
},
legend: {
orient: 'horizontal', //vertical
x: 'center',
y: '30px',
itemWidth: 20,
itemHeight: 14,
textStyle: { //图例文字的样式
color: fff7,
fontSize: fs //统一设置颜色
},
data: []
},
toolbox: {
show: true,
orient: 'vertical', //vertical horizontal
y: 'center',
color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
feature: {
mark: {
show: true
},
dataView: {
show: dataViewIshow,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'value',
position: 'top',
boundaryGap: [0, 0.01],
axisLabel: {
textStyle: {
color: fff7
}
},
axisTick: axisTick,
axisLine: {
type: 'solid', //设置轴线样式
lineStyle: {
color: AxisColor
} //设置轴线颜色
},
splitLine: {
show: false
}, //去除网格线
}],
yAxis: [{
type: 'category',
boundaryGap: true,
axisLabel: {
textStyle: {
color: fff7
}
},
axisTick: axisTick,
axisLine: {
type: 'solid', //设置轴线样式
lineStyle: {
color: AxisColor
} //设置轴线颜色
},
splitLine: {
show: false
}, //去除网格线
data: []
}],
series: []
};//多维条形图
this.multidimensionalBar = {
backgroundColor: BackGroundColor,
title: {
top: '10',
left: 'center',
textStyle: titlestyle
},
color: COLOR,
tooltip: {
trigger: 'axis',
formatter : function(param){
let strings = '';
strings = strings + param[0]['name'];
for (let i = 0; i < param.length; i++) {
if(i%2==0){
strings = strings + '<br/>' + param[i]['seriesName'] + ':' + param[i]['value']
}
}
return strings;
}
},
grid: {
x: "8%",
y: "30%",
x2: "5%",
y2: "4%",
containLabel: true,
borderWidth: 0 /*去除图表边框线*/
},
legend: {
orient: 'horizontal', //vertical
x: 'center',
y: '60px',
itemWidth: 20,
itemHeight: 14,
textStyle: { //图例文字的样式
color: fff7,
fontSize: fs //统一设置颜色
},
data: []
},
toolbox: {
show: true,
orient: 'vertical', //vertical horizontal
y: 'center',
color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [{
type: 'value',
position: 'top',
boundaryGap : true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
axisLabel: {
show: false,
textStyle: {
color: fff7
}
},
axisTick: {show: false},
axisLine: {
type: 'solid', //设置轴线样式
lineStyle: {
color: AxisColor
} //设置轴线颜色
},
splitLine: {
show: false
}, //去除网格线
data: []
}],
yAxis : [{
type: 'category',
boundaryGap: true,
axisLabel: {
textStyle: {
color: fff7
}
},
axisTick: {show: false},
axisLine: {
type: 'solid', //设置轴线样式
lineStyle: {
color: AxisColor
} //设置轴线颜色
},
splitLine: {
show: false
}, //去除网格线
data: []
}],
series : []
};
//双层圆图表合体
this.doubleDefeatOption = {
backgroundColor: BackGroundColor,
title: {
text: '',
x: 'center',
textStyle: titlestyle
},
color: COLOR,
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: '10%',
y: '20%',
itemWidth: 50,
itemHeight: 14,
textStyle: { //图例文字的样式
color: fff7,
fontSize: 14 //统一设置颜色
},
data: []
},
toolbox: {
show: true,
color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: dataViewIshow,
readOnly: false
},
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: false,
series: [{
name: '所占比例',
type: 'pie',
selectedMode: 'single',
startAngle: 0,
radius: [0, 50],
x: '20%',
width: '40%',
funnelAlign: 'right',
max: 1548,
itemStyle: {
normal: {
label: {
formatter: function(params) {
return params.name + ':' + (params.percent - 0).toFixed(2) + '%'
}
},
labelLine: {
show: true,
length: 30
}
}
},
data: []
},
{
name: '所占比例',
type: 'pie',
startAngle: 90,
radius: [70, 90],
x: '60%',
width: '35%',
funnelAlign: 'left',
max: 1048,
itemStyle: {
normal: {
label: {
formatter: function(params) {
return params.name + ':' + (params.percent - 0).toFixed(2) + '%'
}
},
labelLine: {
show: true,
length: 15
}
}
},
data: []
}
]
};
//双层圆图表分开
this.doubleDefeatOption2 = {
backgroundColor: BackGroundColor,
title: {
text: '',
subtext: '',
x: 'center',
textStyle: titlestyle
},
color: COLOR,
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'horizontal', //horizontal vertical
x: 'center',
y: 'bottom',
textStyle: { //图例文字的样式
color: fff7,
fontSize: 14 //统一设置颜色
},
data: []
},
toolbox: {
show: true,
color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
feature: {
mark: {
show: true
},
dataView: {
show: dataViewIshow,
readOnly: false
},
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [{
name: '半径模式',
type: 'pie',
radius: [20, 60],
center: ['24%', 140],
roseType: 'radius',
width: '40%', // for funnel
max: 40,
itemStyle: {
normal: {
label: {
formatter: function(params) {
return params.name + ':' + (params.percent - 0).toFixed(2) + '%'
}
},
labelLine: {
show: true,
length: 10
}
}
},
data: []
},
{
name: '半径模式',
type: 'pie',
radius: [30, 70],
center: ['76%', 140],
roseType: 'radius',
width: '40%', // for funnel
max: 40,
itemStyle: {
normal: {
label: {
formatter: function(params) {
return params.name + ':' + (params.percent - 0).toFixed(2) + '%'
}
},
labelLine: {
show: true,
length: 10
}
}
},
data: []
}
// {
// name:'面积模式',
// type:'pie',
// radius : [30,70],
// center : ['76%', 140],
// roseType : 'area',
// x: '50%', // for funnel
// max: 40, // for funnel
// sort : 'ascending', // for funnel
// itemStyle : {
// normal : {
// label : {
// formatter : function (params) {
// return params.name+':'+(params.percent - 0).toFixed(2) + '%'
// }
// },
// labelLine : {
// show : true,
// length:10
// }
// }
//
// },
// data:[]
// }
]
};
//千层饼圆
this.lasagnaOption = {
backgroundColor: BackGroundColor,
title: {
text: '',
subtext: '',
x: 'center',
textStyle: titlestyle,
y: 'top'
},
color: COLOR,
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
y: 'center',
textStyle: { //图例文字的样式
color: fff7,
fontSize: 14 //统一设置颜色
},
data: []
},
toolbox: {
show: true,
color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
feature: {
mark: {
show: true
},
dataView: {
show: dataViewIshow,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: false,
series: []
};
//正常圆
this.normaCirclelOption = {
backgroundColor: BackGroundColor,
title: {
text: '',
x: '20',
textStyle: titlestyle
},
color: COLOR,
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
y: '30',
itemWidth: 50,
itemHeight: 14,
textStyle: { //图例文字的样式
color: fff7,
fontSize: 14 //统一设置颜色
},
data: []
},
toolbox: {
show: true,
color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
feature: {
mark: {
show: true
},
dataView: {
show: dataViewIshow,
readOnly: false
},
magicType: {
show: true,
type: ['pie'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [{
name: '',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
startAngle: 30,
itemStyle: {
normal: {
label: {
//position : 'inner',
formatter: function(params) {
return params.name + ':' + (params.percent - 0).toFixed(0) + '%'
}
},
labelLine: {
show: true,
length: 20
}
}
},
data: []
}]
};
//空心圆
this.ringOption = {
backgroundColor: BackGroundColor,
title: {
text: '',
x: 'left',
y: 'top',
itemGap: 20,
textStyle: titlestyle
},
color: COLOR,
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
y: 'center',
textStyle: { //图例文字的样式
color: fff7,
fontSize: 14 //统一设置颜色
},
data: []
},
toolbox: {
show: true,
color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置
feature: {
mark: {
show: true
},
dataView: {
show: dataViewIshow,
readOnly: false
},
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [{
name: '信息化空间',
type: 'pie',
radius: ['50%', '70%'],
itemStyle: {
normal: {
label: {
//position : 'inner',
formatter: function(params) {
return params.name + ':' + (params.percent - 0).toFixed(0) + '%'
}
},
labelLine: {
show: true,
length: 20
}
},
emphasis: {
label: {
show: false,
textStyle: {
fontSize: fs
}
}
}
},
data: []
}]
}
}
//多维条形图文字显示 在每个条形图上要显示两个数字
getitemStyle2(arr){
return {
normal: {label :
{
show: true,
position: 'insideRight',//insideRight表示內部靠右
formatter:function(param){
//console.log(param)
let a = arr.filter((item)=>{ return item['name'] === param['seriesName']});
return param['value']+'/'+a[0]['arrays'][param['dataIndex']];
}
}
}
}
}
}
import { Injectable } from '@angular/core';//模板option通用let fff7 = '#fff'; //字体统一颜色rgba(255,255,255,0.7)let fs = 14; //图表统一字体大小let COLOR = ['#FBA3BC', '#0C8AEB', '#2EEA07', '#D74D0A', '#BE8EDE', '#66cccc', '#ff6666', '#cc3399', '#499FD9']; //主体颜色//let COLOR = ['#8cc546', '#b3d3f0', '#f39e7a', '#f34d2f', '#42a3f5'];let toolboxColor = ['#fff', '#fff', '#fff']; //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置let titlestyle = {fontSize: 14,fontWeight:400,color: fff7}; //标题样式let AxisColor = '#0F495C'; //#204f81 轴的统一颜色值let axisTick = { // 坐标轴小标记show: true, // 属性show控制显示与否，默认不显示interval: 'auto',inside: false, // 控制小标记是否在grid里length: 6, // 属性length控制线长lineStyle: { // 属性lineStyle控制线条样式color: AxisColor,width: 2}};let dataViewIshow = true; //是否显示数据视图let ItemStyle = {normal: {label: {show: true,position: 'top'}}}; //formatter: '{c}%', //柱形图或者线形图上方展示数值let yAxisSplitLine = {show: true,lineStyle: {color: [AxisColor],width: 1,type: 'solid'}}; //设置公共网格线
let BackGroundColor = '#0d1c3d'; //图表的背景颜色let placeHoledStyle = { normal:{ barBorderColor:'rgba(0,0,0,0)', color:'rgba(0,0,0,0)' }, emphasis:{ barBorderColor:'rgba(0,0,0,0)', color:'rgba(0,0,0,0)' }};let dataStyle = { normal: { label : { show: true, position: 'insideRight', formatter: '{c}' } }};
@Injectable({providedIn: 'root'})export class EchartsService {public placeHoledStyle = placeHoledStyle;public dataStyle = dataStyle;public itemStyle2:any;//多维条形图文字显示public color2 = ['#FFFF00','#9426E6','#00B050','#FF9900','#FFCCFF','#FF0000','#00FFFF'];public LineColumnOption1: any; //折线柱状图公共模板1 横向public LineColumnOption2: any; //折线柱状图公共模板2 纵向public LineColumnOption3: any; //多维条形图纵向public multidimensionalBar: any; //多维条形图public doubleDefeatOption: any; //双层圆图表合体public doubleDefeatOption2: any; //双层圆图表分开public lasagnaOption: any; //千层饼圆public normaCirclelOption: any; //正常圆public ringOption: any; //空心圆constructor() {//折线柱状图公共模板1 横向this.LineColumnOption1 = {backgroundColor: BackGroundColor,title: {top: '10',left: 'center',textStyle: titlestyle},tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},color: COLOR,legend: {orient: 'horizontal', //verticalshow:true,x: 'center',y: '30px',itemWidth: 20,itemHeight: 14,textStyle: { //图例文字的样式color: fff7,fontSize: fs //统一设置颜色},data: []},toolbox: {show: true,orient: 'vertical',x: 'right',y: 'center',feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: ['line', 'bar', 'stack', 'tiled']},/*'stack', 'tiled'*/restore: {show: true},saveAsImage: {show: true}}},grid: {x: "60px",y: "18%",x2: "40px",y2: "14%",borderWidth: 0 /*去除图表边框线*/},calculable: true,timeLine: [],xAxis: [{type: 'category',boundaryGap: true,axisLabel: {rotate: 45,textStyle: {color: fff7}},axisTick: axisTick,axisLine: {type: 'solid', //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线data: []}],yAxis: [{type: 'value',name: '',nameLocation: 'end', //middle中间 start endnameTextStyle: {color: '#fff'}, //改变坐标轴单位name的颜色scale: true,splitLine: yAxisSplitLine, //设置网格线axisTick: axisTick,axisLabel: {textStyle: {color: fff7},},axisLine: {type: 'solid', //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色}}],series: []};
//折线柱状图公共模板2 纵向this.LineColumnOption2 = {backgroundColor: BackGroundColor,title: {top: '10',left: 'center',textStyle: titlestyle},color: COLOR,tooltip: {trigger: 'axis'},grid: {x: "16%",y: "18%",x2: "5%",y2: "14%",borderWidth: 0 /*去除图表边框线*/},legend: {orient: 'horizontal', //verticalx: 'center',y: '30px',itemWidth: 20,itemHeight: 14,textStyle: { //图例文字的样式color: fff7,fontSize: fs //统一设置颜色},data: []},toolbox: {show: true,orient: 'vertical', //vertical horizontaly: 'center',color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: ['line', 'bar']},restore: {show: true},saveAsImage: {show: true}}},calculable: true,xAxis: [{type: 'value',position: 'top',boundaryGap: [0, 0.01],axisLabel: {textStyle: {color: fff7}},axisTick: axisTick,axisLine: {type: 'solid', //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线}],yAxis: [{type: 'category',boundaryGap: true,axisLabel: {textStyle: {color: fff7}},axisTick: axisTick,axisLine: {type: 'solid', //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线data: []}],series: []};//多维条形图纵向this.LineColumnOption3 = {title: {top: '10',left: 'center',textStyle: titlestyle},tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},color: COLOR,legend: {orient: 'horizontal', //verticalx: 'center',y: '30px',itemWidth: 20,itemHeight: 14,show: false,textStyle: { //图例文字的样式color: fff7,fontSize: fs //统一设置颜色},data: []},toolbox: {show: true,feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},restore: {show: true},saveAsImage: {show: true}}},grid: {y: 80,y2: 30},xAxis: [{type: 'value',position: 'top',boundaryGap: [0, 0.01],axisLabel: {textStyle: {color: fff7}},axisTick: axisTick,axisLine: {type: 'solid', //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线}],yAxis: [{type: 'category',boundaryGap: true,axisLabel: {textStyle: {color: fff7}},axisTick: axisTick,axisLine: {type: 'solid', //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线data: []}],series: [{name: '學習任務',type: 'bar',stack: '总量',//itemStyle : dataStyle,data: [38, 50, 33, 72]},{name: '學習任務',type: 'bar',stack: '总量',itemStyle: placeHoledStyle,data: [62, 50, 67, 28]},{name: '自主學習',type: 'bar',stack: '总量',//itemStyle : dataStyle,data: [61, 41, 42, 30]},{name: '自主學習',type: 'bar',stack: '总量',itemStyle: placeHoledStyle,data: [39, 59, 58, 70]},{name: '學情分析',type: 'bar',stack: '总量',//itemStyle : dataStyle,data: [37, 35, 44, 60]},{name: '學情分析',type: 'bar',stack: '总量',itemStyle: placeHoledStyle,data: [63, 65, 56, 40]},{name: '教材',type: 'bar',stack: '总量',//itemStyle : dataStyle,data: [71, 50, 31, 39]},{name: '教材',type: 'bar',stack: '总量',itemStyle: placeHoledStyle,data: [29, 50, 69, 61]}]};//多维条形图this.multidimensionalBar = {backgroundColor: BackGroundColor, title: {top: '10',left: 'center',textStyle: titlestyle},color: COLOR,tooltip: {trigger: 'axis',formatter : function(param){let strings = '';strings = strings + param[0]['name'];for (let i = 0; i < param.length; i++) {if(i%2==0){strings = strings + '<br/>' + param[i]['seriesName'] + ':' + param[i]['value']}}return strings;}},grid: {x: "8%",y: "30%",x2: "5%",y2: "4%",containLabel: true,borderWidth: 0 /*去除图表边框线*/},legend: {orient: 'horizontal', //verticalx: 'center',y: '60px',itemWidth: 20,itemHeight: 14,textStyle: { //图例文字的样式color: fff7,fontSize: fs //统一设置颜色},data: []}, toolbox: { show: true,orient: 'vertical', //vertical horizontaly: 'center',color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置 feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [{type: 'value',position: 'top',boundaryGap : true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。axisLabel: {show: false,textStyle: {color: fff7}},axisTick: {show: false},axisLine: {type: 'solid', //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线data: []}], yAxis : [{type: 'category',boundaryGap: true,axisLabel: {textStyle: {color: fff7}},axisTick: {show: false},axisLine: {type: 'solid', //设置轴线样式lineStyle: {color: AxisColor} //设置轴线颜色},splitLine: {show: false}, //去除网格线data: []}], series : []};//双层圆图表合体this.doubleDefeatOption = {backgroundColor: BackGroundColor,title: {text: '',x: 'center',textStyle: titlestyle},color: COLOR,tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',x: '10%',y: '20%',itemWidth: 50,itemHeight: 14,textStyle: { //图例文字的样式color: fff7,fontSize: 14 //统一设置颜色},data: []},toolbox: {show: true,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置orient: 'vertical',x: 'right',y: 'center',feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: ['pie', 'funnel']},restore: {show: true},saveAsImage: {show: true}}},calculable: false,series: [{name: '所占比例',type: 'pie',selectedMode: 'single',startAngle: 0,radius: [0, 50],x: '20%',width: '40%',funnelAlign: 'right',max: 1548,itemStyle: {normal: {label: {formatter: function(params) {return params.name + ':' + (params.percent - 0).toFixed(2) + '%'}},labelLine: {show: true,length: 30}}
},data: []},{name: '所占比例',type: 'pie',startAngle: 90,radius: [70, 90],x: '60%',width: '35%',funnelAlign: 'left',max: 1048,itemStyle: {normal: {label: {formatter: function(params) {return params.name + ':' + (params.percent - 0).toFixed(2) + '%'}},labelLine: {show: true,length: 15}}
},data: []}]};
//双层圆图表分开this.doubleDefeatOption2 = {backgroundColor: BackGroundColor,title: {text: '',subtext: '',x: 'center',textStyle: titlestyle},color: COLOR,tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'horizontal', //horizontal verticalx: 'center',y: 'bottom',textStyle: { //图例文字的样式color: fff7,fontSize: 14 //统一设置颜色},data: []},toolbox: {show: true,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: ['pie', 'funnel']},restore: {show: true},saveAsImage: {show: true}}},calculable: true,series: [{name: '半径模式',type: 'pie',radius: [20, 60],center: ['24%', 140],roseType: 'radius',width: '40%', // for funnelmax: 40,itemStyle: {normal: {label: {formatter: function(params) {return params.name + ':' + (params.percent - 0).toFixed(2) + '%'}},labelLine: {show: true,length: 10}}
},data: []},{name: '半径模式',type: 'pie',radius: [30, 70],center: ['76%', 140],roseType: 'radius',width: '40%', // for funnelmax: 40,itemStyle: {normal: {label: {formatter: function(params) {return params.name + ':' + (params.percent - 0).toFixed(2) + '%'}},labelLine: {show: true,length: 10}}
},data: []}// {// name:'面积模式',// type:'pie',// radius : [30,70],// center : ['76%', 140],// roseType : 'area',// x: '50%', // for funnel// max: 40, // for funnel// sort : 'ascending', // for funnel// itemStyle : {// normal : {// label : {// formatter : function (params) {// return params.name+':'+(params.percent - 0).toFixed(2) + '%'// }// },// labelLine : {// show : true,// length:10// }// }//// },// data:[]// }]};
//千层饼圆this.lasagnaOption = {backgroundColor: BackGroundColor,title: {text: '',subtext: '',x: 'center',textStyle: titlestyle,y: 'top'},color: COLOR,tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',y: 'center',textStyle: { //图例文字的样式color: fff7,fontSize: 14 //统一设置颜色},data: []},toolbox: {show: true,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},restore: {show: true},saveAsImage: {show: true}}},calculable: false,series: []};
//正常圆this.normaCirclelOption = {backgroundColor: BackGroundColor,title: {text: '',x: '20',textStyle: titlestyle},color: COLOR,tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',y: '30',itemWidth: 50,itemHeight: 14,textStyle: { //图例文字的样式color: fff7,fontSize: 14 //统一设置颜色},data: []},toolbox: {show: true,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: ['pie'],option: {funnel: {x: '25%',width: '50%',funnelAlign: 'left',max: 1548}}},restore: {show: true},saveAsImage: {show: true}}},calculable: true,series: [{name: '',type: 'pie',radius: '55%',center: ['50%', '50%'],startAngle: 30,itemStyle: {normal: {label: {//position : 'inner',formatter: function(params) {return params.name + ':' + (params.percent - 0).toFixed(0) + '%'}},labelLine: {show: true,length: 20}}
},data: []}]};
//空心圆this.ringOption = {backgroundColor: BackGroundColor,title: {text: '',x: 'left',y: 'top',itemGap: 20,textStyle: titlestyle},color: COLOR,tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',y: 'center',textStyle: { //图例文字的样式color: fff7,fontSize: 14 //统一设置颜色},data: []},toolbox: {show: true,color: toolboxColor, //设置工具栏的每个图标和文字的颜色，设置的颜色会循环设置feature: {mark: {show: true},dataView: {show: dataViewIshow,readOnly: false},magicType: {show: true,type: ['pie', 'funnel'],option: {funnel: {x: '25%',width: '50%',funnelAlign: 'center',max: 1548}}},restore: {show: true},saveAsImage: {show: true}}},calculable: true,series: [{name: '信息化空间',type: 'pie',radius: ['50%', '70%'],itemStyle: {normal: {label: {//position : 'inner',formatter: function(params) {return params.name + ':' + (params.percent - 0).toFixed(0) + '%'}},labelLine: {show: true,length: 20}},emphasis: {label: {show: false,textStyle: {fontSize: fs}}}},data: []}]}}//多维条形图文字显示 在每个条形图上要显示两个数字getitemStyle2(arr){return { normal: {label : { show: true, position: 'insideRight',//insideRight表示內部靠右 formatter:function(param){ //console.log(param) let a = arr.filter((item)=>{ return item['name'] === param['seriesName']}); return param['value']+'/'+a[0]['arrays'][param['dataIndex']]; } }}}}}
echarts常用说明的更多相关文章
- Echarts常用API（echarts和echartsInstance）
一.echarts上的方法 一般在项目中引入echarts之后,可以获得一个全局的echarts对象. 1.下面是几个比较常用的echarts方法 echarts.init() 创建一个echarts ...
- ECharts常用设置记录
一.配置文档 http://echarts.baidu.com/option.html#title 二.属性配置 1.图表与边框容器距离. grid: { top: '10%', left: '70' ...
- echarts常用实例
1.柱状图: 1.需要动态加载的参数是x轴以及柱状图的数值,legendData和seriesData.demo使用是可以直接写死参数,在执行this.initChart()方法即可.具体代码可以参数 ...
- 使用echarts常用问题总结
1,echarts配合element ui的抽屉插件出现报错,上次解决方法是使用element ui 抽屉的open事件,让在打开事件重新加载,我们项目的需求是点击某个数据,要传递这条数据包含的其他值 ...
- Echarts 常用API之action行为
一.Echarts中的action echarts中支持的图表行为,通过dispatchAction触发. 1.highlight 高亮指定的数据图形 dispatchAction({ type: ' ...
- echarts常用的配置项
最近使用echarts可视化的业务,但是有一些配置项需要修改,把这段时间的学习总结一下 1. 修改默认配置 a. 去掉分割线和网格线,在xAxis或者yAxis中设置 splitLine: { sho ...
- echarts常用功能封装|抽象为mixin
目前已解锁以下功能: [x] 初始化echarts(initChart) [x] 获取echarts参数配置(getOption) [x] 生成echarts图表(setOption) [x] 监听r ...
- Echarts使用小结
还是先来简单的了解一下Echart是什么吧? ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前 ...
- 快速上手 Echarts
最近使用到了 百度的 Echarts 数据可视化工具,这里简单介绍如何快速上手. 一.下载 这里选择目前最新版本,4.2.1 地址:https://github.com/apache/incubato ...
随机推荐
- Xshel和Xftp免费版
打开:https://www.netsarang.com/zh/free-for-home-school/ 然后填写自己的姓名与真实的邮箱即可.提交成功后,会将下载链接发送至刚才填写的邮箱里,发送的下 ...
- 一文理解Java IO/NIO/AIO
目录 概述 一.IO流(同步.阻塞) 二.NIO(同步.非阻塞) 三.NIO2(异步.非阻塞) 正文 概述 在我们学习Java的IO流之前,我们都要了解几个关键词 同步与异步(synchronou ...
- AssemblyBuilder以及Activator双剑合璧
AssemblyBuilder和Activator两个类是DispatchProxy类实现动态代理以及AOP的根本,示例demo可参考 DispatchProxy实现动态代理及AOP .Assembl ...
- SSH框架之Spring第三篇
1.1 AOP概述 1.1.1 什么是AOP? AOP : 全称是Aspect Oriented Progamming既 : 面向切面编程.通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技 ...
- JS---DOM---点击操作---part2---14个案例
案例1:点击按钮禁用文本框 <input type="button" value="禁用文本框" id="btn" /> < ...
- 荧屏弹幕_新增h5requestAnimationFrame实现
所有的页面逻辑也是比较简单,用原生js实现,封装也是比较简单!要让页面效果更为炫酷,则可去引入相应的css,背景图片自己去img/下下载引入喔! HTML页面 <!doctype html> ...
- IT兄弟连 HTML5教程 HTML5表单 多样的输入类型2
4 range range类型用于包含一定范围内数字值的输入域,跟number一样,我们还可以对数值设置限定,range类型显示为滑动条用法如下: 上述代码使用了range类型输入框,为该类型设置了 ...
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML框架结构
使用HTML框架结构可以把一个浏览器窗口划分为若干个小窗口,每个窗口可以显示不同的URL网页,每个框架里的网页相互独立.这样不仅可以非常方便地在浏览器中同时浏览不同的页面效果,而且可以非常方便地完成导 ...
- oracle相邻表记录交换（单双两两交换）
在博客园的博问中看到了一个这样的提问:一个表中有id和name两个字段,id是连续非空不重复的,想要交换相邻表记录的name值(单双两两交换). 另外,如果最后的单独行没有对应的下一行匹配记录的话,就 ...
- Netty实战：设计一个IM框架
来源:逅弈逐码 bitchat 是一个基于 Netty 的 IM 即时通讯框架 项目地址:https://github.com/all4you/bitchat 快速开始 bitchat-example ...