option = {
// 标题组件，包含主标题和副标题。
title: {
id: 'bar-chart',
show: true,
text: '柱状图标题',
textStyle: {
color: '#fff'
},
subtext: '副标题副标题',
subtextStyle: {
color: '#eee'
},
left: 'center',//标题位置
top: '20'//标题位置
},
// 图例组件
legend: {
type: 'plain',//plain:普通图例；scroll:可滚动翻页的图例。当图例数量较多时使。
show: true,
bottom: '50',
left: 'center',
// 图例图形中线的样式
lineStyle: {
color: '#fff'
},
// 图例的公用文本样式
textStyle: {
color: '#fff'
}
},
// 直角坐标系内绘图网格
grid: {
show: false,//是否显示直角坐标系网格,外边框
top: '10%',//离容器左侧的距离
right: '50',//离容器上侧的距离
left: '20',//离容器左侧的距离
bottom: '12%',//离容器底部的距离
borderColor: '#ff0',//外边框颜色
containLabel: true,//是否包含坐标轴的刻度标签,默认为false；true时防止标签溢出
},
// 提示框组件
tooltip: {
trigger: 'axis',//触发类型,axis:坐标轴触发
axisPointer: {//坐标轴指示器配置项
type: 'shadow'//指示器类型:line、shadow、none、cross
},
backgroundColor: 'rgba(50,50,50,0.7)',//提示框浮层的背景颜色
borderColor: '#fff',//提示框浮层的边框颜色
textStyle: {
color: '#fff',
fontSize: '15'
},
// {a}（系列名称） {b}（x轴的值），{c}（y轴的值）
formatter: '{b0}：<br />{a0}：{c0}人'//1.字符串模板
// formatter:function(params){ //2.回调函数,可return dom 自定义样式
// console.log('params',params)
// return params[0].name
// }
},
//图表背景色
backgroundColor: '#081736',
// x 轴设置
xAxis: [{
type: 'category',
name: '月份',//X轴名称
nameLocation: 'end',//X轴名称位置
nameTextStyle: {//X轴名称样式
color: '#fff',
fontWeight: 'bold'
},
nameGap: 10,//X轴名称与轴线之间的距离
nameRotate: 0,//坐标轴名称旋转
axisLabel: {//X轴类目名称样式
color: '#fff',
rotate: 0 //X轴类目名称旋转角度
},
axisLine: { //X轴轴线设置
show: true,
lineStyle: {
color: '#fff',
width: 2
},
},
axisTick: {//X轴刻度相关设置
show: false,
},
splitLine: {// 横向分隔线
show: true,
lineStyle: {
color: '#195384',
type: "dotted",
}
},
// 类目数据
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
}],
// y轴设置
yAxis: [
{
type: 'value',
position: 'left',
name: "万元",
nameTextStyle: {
color: "#fff",
fontSize: 12,
fontWeight: 'bold'
},
min: 0,//坐标轴刻度最小值
axisLine: {//y轴轴线设置
show: true,
lineStyle: {
color: '#fff',
width: 2
}
},
axisLabel: {//y轴刻度标签
formatter: '{value}',
inside: false,//刻度标签是否朝内，默认朝外
textStyle: {
color: "#fff",
}
},
axisTick: {//刻度设置
show: false,
},
splitLine: {//纵向分隔线
show: true,
lineStyle: {
color: '#0a3e98',
type: "dotted",
}
},
}
],
series: [
{
name: '采购金额',
type: 'bar',
barWidth: 20,
markPoint:'arrow',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#01B1FF'
}, {
offset: 1,
color: '#033BFF'
}], false)
},
label: {
show: true,
fontSize: 13,
color: '#000',
position: 'top',
backgroundColor:'#eee',
padding:[4,6]
},
data: [50, 100, 98, 49, 36, 96, 93, 59.6, 89, 84, 40, 73]
}
],
};