{site_name}

{site_name}

🌜 搜索

ECharts(百度开源的可视化图表库)中的“象形柱图”是一种特殊的条形图,其中

前端 𝄐 0
echarts设置柱状图属性名称,echarts柱状,echart 柱状图,echarts柱状图属性,echarts柱状图形状,echarts柱状图案例
ECharts(百度开源的可视化图表库)中的“象形柱图”是一种特殊的条形图,其中每个条形都由多个小图标或符号组成,以代表数据值。其属性设置包括以下几个方面:

1. **数据格式:** 数据应该以以下格式提供:每个数据项都是一个对象,包括 name 和 value 属性。如果需要在同一系列中使用不同的符号,请在每个数据项上添加 symbol 属性,并将其设置为相应的符号类型。

2. **符号类型:** 可以通过 symbol 属性来指定每个数据项所使用的符号类型。ECharts 默认提供了多种符号类型,如圆形、三角形、正方形等。也可以通过配置 symbolSize 属性来定义符号大小。

3. **颜色控制:** 可以通过 color 属性来控制每个数据项所使用的颜色。如果不指定颜色,则 ECharts 会自动从当前主题中选择颜色。

下面是一个简单的 ECharts 象形柱图示例,其中每个条形都由五个圆点组成,代表不同城市的人口数量:

javascript
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['北京', '上海', '广州', '深圳', '杭州']
},
yAxis: {
type: 'value'
},
series: [{
name: '人口数量',
type: 'pictorialBar',
symbol: 'circle',
symbolSize: 20,
barWidth: '60%',
itemStyle: {
color: function(params) {
var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'];
return colorList[params.dataIndex];
}
},
data: [
{name: '北京', value: 2170},
{name: '上海', value: 2424},
{name: '广州', value: 1461},
{name: '深圳', value: 1303},
{name: '杭州', value: 1199}
]
}]
};


在上面的示例中,我们使用了 type: 'pictorialBar' 来指定使用象形柱图类型。每个条形都由五个圆点组成,因为我们在 symbol 属性上指定了 circle。同时,我们在 symbolSize 属性上设置了符号大小为 20,通过 itemStyle 属性设置每个数据项所使用的颜色。