在 ECharts 中,象形柱图的属性设置涉及到一系列配置项,用于控制图形的形状、样式、数据显示等。以下是一些常用的象形柱图属性设置:
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