Echarts参数配置地址： http://echarts.baidu.com/option.html#series-gauge，
//仪标盘
function myCharts1(progress) {
require(["echart"], function(echarts) {
var myChart1 = echarts.init(document.getElementById('top1'));
var option1 = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [{
name: '任务指标',
type: 'gauge',//仪表盘类型
radius: 60,//图形变大变小使用
startAngle: 180,//开始角度，注：仪表盘角度右边为0度，和正常的不太一样
endAngle: 0,//结束角度
min: 0,
max: 100,
axisLine: {
lineStyle: {
color: [
[progress, '#4992E1'], //计划完成任务
[1, '#ECEFF4']
],
width: 20
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
lineStyle: {
width: 1
},
length: 20
},
pointer: {
show: false,
length: '0',
width: 0
},
detail: {
show: false
},
data: [{ value: progress * 100, name: '' + (progress * 100).toFixed() + '%', textStyle: { fontSize: 10 } }] //任务完成进度
}]
};
myChart1.setOption(option1);
});
}
//两条折线图
function myCharts3(nowDepartment, otherDepartment, departmentScoreLabel, nowDepartmentName, otherDepartmentName) {
require(["echart"], function(echarts) {
var myChart3 = echarts.init(document.getElementById('mid1'));
var option3 = {
legend: {
data: [{ name: '' + nowDepartmentName + '' }, { name: '' + otherDepartmentName + '' }],
top: 17
},
tooltip: {
trigger: 'item',//触发方式
formatter: "{a} <br/>{b} : {c}分"//abc,各代表：图例，x,y显示的数据
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: departmentScoreLabel,
offset: 8
}],
yAxis: {
name: '(分值)',
type: 'value',
minInterval: 1,
splitLine: { show: false } //去除网格线
},
series: [{
data: otherDepartment,
smooth:true,//变成平滑曲线
name: '' + otherDepartmentName + '',
type: 'line',
symbol: 'circle', //拐点样式
symbolSize: 8,
itemStyle: {
normal: {
color: "#F99F15", //拐点颜色
lineStyle: {
width: 2, //折线宽度
color: "#F99F15" // 线条颜色
}
}
}
}, {
data: nowDepartment,
name: '' + nowDepartmentName + '',
type: 'line',
symbol: 'circle', //拐点样式
symbolSize: 8,
itemStyle: {
normal: {
color: "#2DD2CA", //拐点颜色
lineStyle: {
width: 2, //折线宽度
color: "#2DD2CA" // 线条颜色
}
}
}
}]
};
myChart3.setOption(option3);
});
}
//饼状图
function myCharts4(xLabel, priorityModel, labelModel) {
require(["echart"], function(echarts) {
var myChart4 = echarts.init(document.getElementById('mid2'));
var option4 = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c}个 ({d}%)"
},
legend: {
data: xLabel, //['直达', '百度', '谷歌', '必应', '其他', '星云'],
type: 'scroll',
selectedMode: false
},
series: [{
name: '优先级统计',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
cursor: 'pointer',
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data: priorityModel
},
{
name: '标签统计',
type: 'pie',
radius: ['40%', '55%'],
label: {
normal: {
formatter: '{b|{b}：}{c}个 {per|{d}%}',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
// shadowBlur:3,
// shadowOffsetX: 2,
// shadowOffsetY: 2,
// shadowColor: '#999',
// padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
// abg: {
// backgroundColor: '#333',
// width: '100%',
// align: 'right',
// height: 22,
// borderRadius: [4, 4, 0, 0]
// },
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
}
},
data: labelModel
}
]
};
myChart4.setOption(option4);
});
}
//柱状图（一般柱状图）
function addRank1(data1, data2) {
require(['echart'], function(echarts) {
var myChart1 = echarts.init(document.getElementById('rank_left1'));
var option1 = {
color: ['#54A0F6'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
x:1,//距离左边间隔
x2:1,//距离右边间隔
y: 20,//距离上边间隔
left: '8%',
right: '15%',
y2: 0,//距离下边间隔
containLabel: true
},
xAxis: [{
axisLine: {
show: false
},
axisTick: {
show: false
},
type: 'category',
textStyle: {
fontSize: 18
},
data: data1,
nameLocation: 'start'
}],
yAxis: [{
show: false,
axisTick: {
show: false
},
splitLine: false,
type: 'value'
}],
series: [{
name: '昨日分值',
type: 'bar',
barWidth: '60%',
label: {
normal: {
show: true,
position: 'top'
}
},
data: data2
}]
};
myChart1.setOption(option1);
})
}
//柱状图（一条柱上两个数据类型的）
function myCharts6(sixXLabelModel, sixYShortLabel, sixYLongLabel, sixYAvgLabel) {
require(["echart"], function(echarts) {
var myChart6 = echarts.init(document.getElementById('bot2'));
var option6 = {
color: ['rgb(65, 240, 238)', 'rgb(188, 188, 188)', 'rgb(71,146,227)'],
legend: {
data: [
{ name: '最短用时' },
{ name: '最长用时' },
{ name: '平均用时' }
],
y: 17,
selectedMode: false
},
tooltip: {
trigger: 'item',
formatter: "{a}<br/>{b}:{c}分钟"
},
grid: {
x: 30,
y2: 30,
containLabel: true
},
xAxis: [{
type: 'category',
data: sixXLabelModel
}],
yAxis: [{
name: '(分钟)',
type: 'value',
splitLine: {
show: false
}
}],
series: [{
name: '最短用时',
type: 'bar',
stack: '用时',
data: sixYShortLabel,
},
{
name: '最长用时',
type: 'bar',
stack: '用时',
data: sixYLongLabel,
barWidth: 30
},
{
name: '平均用时',
type: 'bar',
data: sixYAvgLabel,
barWidth: 30
// color: 'rgb(35, 40, 238)'
}
]
};
myChart6.setOption(option6);
});
}
