option = {
xAxis: {
type: 'category',
data: ['Category A', 'Category B', 'Category C', 'Category D']
},
yAxis: {
type: 'value'
},
series: [{
type: 'pictorialBar', // 象形柱图
symbol: 'rect', // 图形的形状,可以是 'rect'、'circle'、'diamond' 等
itemStyle: {
color: 'skyblue' // 图形的颜色
},
symbolSize: 40, // 图形的大小
data: [100, 80, 120, 150], // 数据
symbolRepeat: 'fixed', // 图形的重复方式,'fixed' 表示按照数据的数量重复
symbolMargin: '50%', // 图形间的间隔
z: 3, // 图形的层级
label: { // 数据标签
show: true,
position: 'top',
formatter: '{c}%', // 标签格式化字符串,可以使用 '{c}' 表示数据值
fontSize: 12,
color: 'black'
},
emphasis: { // 高亮样式
itemStyle: {
color: 'orange'
}
},
animationDuration: 1000, // 动画时长
animationEasing: 'cubicOut' // 动画缓动效果
}]
};
上述代码中,一些常用的象形柱图属性设置如下:
- symbol: 图形的形状,可以是 'rect'(矩形)、'circle'(圆形)、'diamond'(菱形)等。
- itemStyle: 图形的样式设置,包括颜色、阴影等。
- symbolSize: 图形的大小。
- data: 图形的数据,每个数据项表示一个象形柱图。
- symbolRepeat: 图形的重复方式,可以是 'fixed'(按照数据的数量重复)或 'repeat'(在坐标轴上均匀重复)。
- symbolMargin: 图形间的间隔,可以是百分比字符串,也可以是具体数值。
- z: 图形的层级,控制图形显示的层次。
- label: 数据标签的配置,用于显示数据值。
- emphasis: 高亮样式,鼠标悬停时的样式配置。
- animationDuration: 动画时长,控制图形的动画效果时长。
- animationEasing: 动画缓动效果,可以是各种缓动函数名称,如 'linear'、'cubicInOut' 等。
你可以根据需要调整这些属性,以满足你的图表设计需求。
转载请注明出处:http://www.zyzy.cn/article/detail/5446/ECharts