option = {
legend: {},
// 鼠标放上显示提示
tooltip: {
trigger: 'axis', //触发类型 'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用,'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
axisPointer: { //坐标轴指示器,坐标轴触发有效
type: 'cross', //默认为直线,可选line shadow cross
crossStyle: {
color: '#fff'
}
}
},
// x轴
xAxis: {
show:true,
axisPointer: { //写到X轴就是给X轴改的鼠标放上后的样式
type: 'shadow',
},
// 坐标轴标签
axisLabel: {
inside: true,
textStyle: {
color: '#fff'
}
},
//X坐标刻度
axisTick: {
show: false, //坐标轴线是否显示
inside:true, //坐标轴线是否朝内
},
//X坐标标签 就是文字
axisLabel:{
show:true, //坐标标签是否显示
inside:false, //坐标标签是否朝内
},
//grid 区域中的分隔线
axisLine: {
show: true
},
// 网格区域
splitArea:{
show:true
},
data: ["1月","2月","3月","4月","5月"],
z: 10
},
// y轴
yAxis: {
show:true, //是否显示
position:'left', //显示位置
offset:0, //y轴相对于默认位置的偏移
type:'value', //轴的类型
name:'', //轴的名称
nameLocation:'end',
// 坐标名称的样式 颜色 内边距 字体大小等
nameTextStyle:{
color:"#000",
padding:[5,0,0,10],
},
nameGap:20, //坐标名称和轴线的距离
// nameRotate:270, //坐标名字的旋转
// 坐标轴 轴线
axisLine: {
show: true,
// 箭头
symbol:['none','arrow'], //['none','arrow']这是只在末端显示箭头,'arrow'两端都显示箭头 'none'就是不显示
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//线
lineStyle:{
color:'green', //线的颜色
width:1, //线的宽度
type:'solide' //显得类型
}
},
//坐标轴 刻度 就是纵向多出来的小线
axisTick: {
show: true,
inside:false, //---是否朝内
lengt:3, //长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
//坐标轴标签 坐标轴显示的数值
axisLabel: {
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 8, //---刻度标签与轴线之间的距离
textStyle: {
color: '#999'
}
},
//--网格区域
splitArea:{
show:false, //---是否显示,默认false
},
},
// 数据区域的缩放
dataZoom: [
{
type: 'inside'
}
],
//内容数据
series: [
{
name: '全部的',
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
// 柱子0%的颜色
{offset: 0, color: '#E27BF6'},
//柱子50%的颜色
{offset: 0.5, color: '#D575F2'},
//柱子100%的颜色
{offset: 1, color: '#D14CFB'}
]
)
},
// barWidth:'30', //调节柱子的宽度
data: [900, 23438, 4200, 3000, 4000, 5000]
},
{
name: '已完成的',
type: 'bar',
// 图形形状
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
// 柱子0%的颜色
{offset: 0, color: '#01F4D4'},
//柱子50%的颜色
{offset: 0.5, color: '#02E2E8'},
//柱子100%的颜色
{offset: 1, color: '#02D2F9'}
]
)
},
//鼠标放到柱子上的样式
// emphasis: {
// itemStyle: {
// color: new echarts.graphic.LinearGradient(
// 0, 0, 0, 1,
// [
// {offset: 0, color: '#2378f7'},
// {offset: 0.7, color: '#2378f7'},
// {offset: 1, color: '#83bff6'}
// ]
// )
// }
// },
// barWidth:'30', //调节柱子的宽度
// barCategoryGap:'50%', //调节柱子之间的距离
data: [3020, 4800, 3600, 6050, 4320, 6200,5050]
},
{
name: '未完成的',
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
// 柱子0%的颜色
{offset: 0, color: '#FA86CC'},
//柱子50%的颜色
{offset: 0.5, color: '#F65CB9'},
//柱子100%的颜色
{offset: 1, color: '#F73FAE'}
]
)
},
// barWidth:'30', //调节柱子的宽度
data: [1000, 9356, 2356, 3000, 5000, 4832]
},
{
name: '超期已完成',
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
// 柱子0%的颜色
{offset: 0, color: '#C9EC8D'},
//柱子50%的颜色
{offset: 0.5, color: '#B2E951'},
//柱子100%的颜色
{offset: 1, color: '#99E218'}
]
)
},
// barWidth:'30', //调节柱子的宽度
data: [900, 23438, 4200, 3000, 4000, 5000]
},
{
name: '超期未完成的',
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
// 柱子0%的颜色
{offset: 0, color: '#F1F288'},
//柱子50%的颜色
{offset: 0.5, color: '#EEEF51'},
//柱子100%的颜色
{offset: 1, color: '#E5E709'}
]
)
},
// barWidth:'30', //调节柱子的宽度
data: [900, 23438, 4200, 3000, 4000, 5000]
},
]
};