Echarts柱状图文字在柱体上垂直显示

最新推荐文章于 2025-07-04 17:37:46 发布

原创最新推荐文章于 2025-07-04 17:37:46 发布 · 7.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts

Echarts 专栏收录该内容

17 篇文章

订阅专栏

本文详细解析了使用ECharts创建柱状图的具体配置方法，包括如何设置柱状图的类型、数据、标签显示方式及样式。通过具体代码示例，展示了如何利用formatter函数实现标签的特殊显示效果，以及如何定义柱状图的颜色。

var option={
	series:[{
          name: '', 
          type: 'bar', //类型                  
          data: [820],
          label: {
              show: true,
              position: 'insideBottom',
              color: '#FFFFFF',
              formatter: function (params) {
                     let txtArry = params.seriesName.split('');
                     let rs = "";
                     for (var i = 0; i < txtArry.length; i++) {
                           rs += txtArry[i] + "\n";
                      }
                      return rs;
                 }
            },
             itemStyle: {//柱状图样式
                 normal: {
                      color: '#13AF82'
                 }
              }
         }]
}

在这里插入图片描述