当前ECharts版本为5.1.2。
概述
按照其他可视化工具中柱状图的默认样式,对ECharts基础柱状图进行如下设置:
- 标题,副标题:设置居中,修改字体大小
- 图例:设置图例位置
- 工具栏:显示工具栏
- 背景色:设置为白色
- 坐标轴标签:设置居中显示、标签与轴间距
- 数据标签:顶部显示
- 网格线:显示网格线
- 提示框:显示提示框
配置项
option = {
//设置提示框
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
//添加工具栏
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: "none"
},
dataView: {
readOnly: false
},
magicType: {
type: ["line", "bar"]
},
restore: {},
saveAsImage: {}
}
},
//设置背景色
backgroundColor:"#FFFFFF",
//设置标题
title: {
text:"样例",
subtext:"副标题",
left:"center",
textStyle: {
fontSize: 24
},
subtextStyle: {
fontSize: 20
}
},
//设置图例
legend: {
left:"5%"
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//设置轴标签属性
name: "星期",
nameLocation: "middle",
nameGap:30,
axisTick: {
alignWithLabel: true
},
//设置网格线属性
splitLine: {
show: true,
lineStyle:{
color: ['#EEE'],
width: 1,
type: 'solid'
}
}
},
yAxis: {
type: 'value',
//设置轴标签属性
name: "利润(万元)",
nameLocation: "middle",
nameGap:50
},
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220],
//设置数据标签属性
label: {
position: "outside",
show: true
}
}
]
};