var selfechart = require('echarts');
var chartsUtils = {
//领队绩效
LeaderPerformance: function(id, xDatas, yDatas, DaydataZoom, callBack) {
var myChart = selfechart.init(document.getElementById(id));
myChart.on('click', function(param) {
if (callBack != undefined) {
callBack(param.dataIndex);
}
});
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
splitLine: {
show: false,
},
},
yAxis: {
type: 'category',
data: yDatas
},
dataZoom: DaydataZoom,
series: [{
type: 'bar',
itemStyle: {
normal: {
//圆角效果（顺时针左上，右上，右下，左下）
barBorderRadius: [0, 50, 50, 0],
//设置Bar的颜色
color: new selfechart.graphic.LinearGradient(
0, 0, 1, 0, [
{ offset: 0, color: 'rgba(42,174,242,1)' },
{ offset: 0.3, color: 'rgba(42,174,242,0.8)' },
{ offset: 1, color: 'rgba(42,174,242,0.3)' }
])
}
},
emphasis: {
color: new selfechart.graphic.LinearGradient(
0, 0, 0, 1, [
{ offset: 0, color: '#2AAEF2' },
{ offset: 0.3, color: '#2AAEF2' },
{ offset: 1, color: '#2AAEF2' }
]
)
},
barWidth: 15,
data: xDatas
},
]
};
myChart.clear();
myChart.setOption(option);
},
//领队当月走势图
LeaderCurrentPerformance: function(id, xDatas, yDatas) {
var myChart2 = selfechart.init(document.getElementById(id));
var option2 = {
tooltip: {
trigger: "axis"
},
toolbox: {
show: true,
feature: {
dataView: { show: false, readOnly: false },
restore: { show: false },
saveAsImage: { show: false }
}
},
calculable: true,
xAxis: [{
type: "category",
data: xDatas
}],
yAxis: [{
type: "value",
splitLine: {
show: false,
},
}],
series: [{
type: "line",
smooth: true,
symbol: "circle",
data: yDatas,
itemStyle: {
normal: {
color: "#2AAEF2",
lineStyle: {
color: "#2AAEF2"
}
}
}
}, ]
};
myChart2.setOption(option2);
},
//销售 任务管理 部门执行力
saleTaskDepartment: function(id, myTitle, myValue, insideColor, outsideColor) {
var obj=document.getElementById(id);
if(obj!=null)
{
var myChart3 = selfechart.init(obj);
myChart3.setOption({
series: [{
name: '业务指标',
type: 'gauge',
detail: {
show: true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
offsetCenter: [0, '10%'],
formatter: '{value}%',
textStyle: {
color: insideColor, //百分比
fontSize: 15
}
},
radius: '90%',
startAngle: 200,
endAngle: -25,
data: [{ value: myValue, name: myTitle }],
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: [
[1, 'transparent']
],
width: 2
}
}, //缩在里面的标线
axisTick: {
min: 0,
max: 100,
splitNumber: 3, //缩在里面的标线的宽度
length: 2, // //缩在里面的标线的长度
lineStyle: { // 属性lineStyle控制线条样式
color: insideColor //刻度
}
},
axisLabel: {
formatter: function(v) {
return "";
}
},
//指针的宽度
pointer: {
width: 0
},
title: {
show: true,
offsetCenter: [0, '40%'],
textStyle: {
color: '#9E9E9E',
fontSize: 14
}
}
},
{ //空仪表,最外层边框
name: '',
type: 'gauge',
startAngle: 200,
endAngle: -25,
radius: "100%",
//symbol: 'circle', //设定为实心点
//symbolSize: 20, //设定实心点的大小
detail: { formatter: '{value}%' },
axisLine: { //仪表圈
show: true,
lineStyle: {
color: [
[myValue / 100, insideColor], //完成度
[1, outsideColor]
],
shadowColor: [
[myValue / 100, 'black'],
[1, outsideColor]
],
width: 2
}
},
splitLine: { //分割线
show: false
},
axisTick: { //刻度线
show: false
},
axisLabel: { //刻度标签
show: false
},
pointer: { //指针
show: true,
width: 5,
shadowColor: 'black', //默认透明
shadowBlur: 5
},
detail: {
show: false
},
data: []
}
]
})
}
},
saleIndex: function(id, data) {
var myChart4 = selfechart.init(document.getElementById(id));
let option = {
title: {
text: null
},
tooltip: {
trigger: 'axis'
},
radar: {
name: {
rich: {
e: {
color: '#333333',
fontSize: '14'
},
a: {
color: '#00B26F',
fontSize: 24,
fontWeight: 'bold'
},
b: {
color: '#EB4847',
fontSize: 24,
fontWeight: 'bold'
},
c: {
color: '#999999',
fontSize: 24,
fontWeight: 'bold'
}
},
formatter: function(value, indicator) {
if (indicator.color === 'S') {
return '{e|' + value + '\n}' + '{a|' + indicator.color + '}'
} else if (indicator.color === 'A') {
return '{e|' + value + '\n}' + '{a|' + indicator.color + '}'
} else if (indicator.color === 'B') {
return '{e|' + value + '\n}' + '{b|' + indicator.color + '}'
} else if (indicator.color === 'C') {
return '{e|' + value + '\n}' + '{b|' + indicator.color + '}'
} else if (indicator.color === 'D') {
return '{e|' + value + '\n}' + '{c|' + indicator.color + '}'
}
},
},
indicator: [
{ text: data[0].Name, max: 100, color: data[0].color },
{ text: data[1].Name, max: 100, color: data[1].color },
{ text: data[2].Name, max: 100, color: data[2].color },
{ text: data[3].Name, max: 100, color: data[3].color },
{ text: data[4].Name, max: 100, color: data[4].color }
],
radius: 160,
center: ['50%', '55%'],
},
series: [{
type: 'radar',
tooltip: {
trigger: 'item'
},
itemStyle: {
normal:
{
color: "#8ca3e6",
}
},
data: [{
value: [data[0].score, data[1].score, data[2].score, data[3].score, data[4].score],
name: '我的评分',
areaStyle: {
normal: {
opacity: 0.35,
color: '#1632DE'
}
},
lineStyle: {
normal: {
width: 1,
color: '#8ca3e6'
}
}
}]
}]
};
myChart4.setOption(option);
}
};
export default chartsUtils;