ECharts官网实例:https://www.echartsjs.com/examples/#chart-type-bar
图表的一些配置属性:https://www.echartsjs.com/option.html
举例:最简单的柱状图
option = {
title:{ //图标题的设置
show:true,
text:'柱状图',
},
color: ['#3398DB'], //颜色设置,每个柱子相同颜色
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: { //直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend :{ //关于图例的显示
show : 'true',
},
xAxis : [ //直角坐标系 grid 中的 x 轴
{
type : 'category', //'value' 数值轴,适用于连续数据。
// 'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
//'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
//'log' 对数轴。适用于对数数据。
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], //x轴的数据
axisTick: { //坐标轴刻度
alignWithLabel: true
}
}
],
yAxis : [ //直角坐标系 grid 中的 y 轴
{
type : 'value'
}
],
series : [ //系列列表
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
显示出的图形为:
有这么多的配置项,具体每一个都会有详细的说明。