官网 : https://echarts.apache.org/zh/index.html
官网模板:https://echarts.apache.org/examples/en/index.html
代码编辑页面: https://echarts.apache.org/examples/en/editor.html?c=line-simple
柱状图:
var option = {
title: {
text: '单位:亿元',
left:'12%',
top:'4%',
textStyle: {
color: "#ffffff",
fontSize: 18,
}
},
backgroundColor:'#031d7c',
grid:{//直角坐标系内绘图网格
show:false,//是否显示直角坐标系网格。[ default: false ]
left:"10%",//grid 组件离容器左侧的距离。
right:"30px",
top:'10%',
borderColor:"#c45455",//网格的边框颜色
bottom:"20%" //
},
tooltip: {
trigger: "axis",
},
legend: {
icon: "circle", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none
itemWidth:20,
itemHeight:20,
data:['累计','近60天'],
textStyle:{//图例文字的样式
color:'#ccc',
fontSize:16
},
x:'right', //可设定图例在左、右、居中
y:'up', //可设定图例在上、下、居中
padding:[25,100,0,0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
},
xAxis: {
data: ["应收账款保理","订单融资","应收账款信托","票据贴现","电e贷",'电e票','电e盈','投标保证保险','履约保证保险','其他'],
//设置轴线的属性
axisLine:{
lineStyle:{
color:'#ffffff',
width:1,//这里是为了突出显示加上的
}
},
splitLine:{
show:false,
},
axisTick:{
show:false,
length: 0
},
axisLabel: {
color: '#ffffff',
// 让x轴文字方向为竖向
interval: 0,
formatter: function(value) {
return value.split('').join('\n')
},
textStyle: {
color: '#c3dbff', //更改坐标轴文字颜色
fontSize : 23 //更改坐标轴文字大小
}
}
},
yAxis: {
axisLine:{
show:false,
lineStyle:{
color:'#ffffff',
width:1,//这里是为了突出显示加上的
}
},
axisTick:{
show:false,
length: 0
},
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
series: [{
name: '累计',
type: 'bar',
stack:'使用情况',
data: [68, 60, 58, 55, 52, 50,43,41,40,30],
itemStyle:{
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#1335ea'}, //柱图渐变色
{offset: 0.5, color: '#1591f2'}, //柱图渐变色
{offset: 1, color: '#1335ea'}, //柱图渐变色
]
)
},
}
},{
name: '近60天',
type: 'bar',
stack:'使用情况',
data: [5, 4, 4, 6, 6, 4,4,5,4,5],
itemStyle:{
normal:{color:"#3FBB49"},
}
}]
};