跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • # 请教一下*echarts 中横向柱状图怎样实现类目名称显示在图表上方*的问题
未分類
5 11 月 2020

# 请教一下*echarts 中横向柱状图怎样实现类目名称显示在图表上方*的问题

# 请教一下*echarts 中横向柱状图怎样实现类目名称显示在图表上方*的问题

資深大佬 : Ixiqiuqiu 5

echarts 版本

V4.7.0

预期效果

想还原设计图里的,横向柱状图将类目名称显示在图表上方的效果(如图) # 请教一下*echarts 中横向柱状图怎样实现类目名称显示在图表上方*的问题

实际效果

按官方示例 Demo 改了一个,但总是没法更改 Y 轴类目名位置的问题 # 请教一下*echarts 中横向柱状图怎样实现类目名称显示在图表上方*的问题

配置代码

option = {     backgroundColor: '#071021',     tooltip: {         trigger: 'axis',         axisPointer: {            // 坐标轴指示器,坐标轴触发有效             type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'         }     },     legend: {         data: ['违法数', '事故数', '死亡数'],         // right: '35%',         bottom: 'bottom',         itemGap: 10,         padding: [16,0],         itemWidth: 20,         itemHeight: 10,         textStyle: {             fontSize: 12,             fontWeight: 600,             color: '#C4D3F5'         }     },     grid: {         left: '3%',         right: '4%',         bottom: '3%',         containLabel: true     },     xAxis: {         type: 'value',         show: false,          },     yAxis: {         type: 'category',         show: true,         // itemStyle: {         //     color: '#fff'         // },         data: ['西安纵横交通设施工程有限公司', '西安市双生吉福搬家服务部', '陕西明通交通设施工程有限公司', '扬力集团股份有限公司', '陕西西安路路通交通设施有限公司', '西安智达交通有限责任公司', '西安天畅交通设施有限责任公司','陕西中旺能源交通开发有限责任公司','蓝天巴士集团','西安菱力物流设备有限公司']     },     series: [         {             name: '违法数',             type: 'bar',             stack: '总量',             barGap: '-10%',         barWidth: '50%',          showBackground: true,             backgroundStyle: {                 color: 'rgba(255,255,255,0.1)'             },             label: {                 show: true,                 position: 'inside',                 // position: 'right',             color: '#ffffff',             fontSize: 15             },             data: [320, 302, 301, 334, 390, 330, 320,301, 334, 390],             itemStyle: {                 color: '#0E9BD8',                 // normal: {                 // //     show: true,                 // //   position: "top",                 // }             },                      },         {             name: '事故数',             type: 'bar',             stack: '总量',             label: {                 show: true,                 position: 'inside'             },             data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101],              itemStyle: {                 color: '#FEA900'             },         },         {             name: '死亡数',             type: 'bar',             stack: '总量',             label: {                 show: true,                 position: 'insideRight'             },             data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191],              itemStyle: {                 color: '#FF3D3D'             },         },             ] }; 

大佬有話說 (1)

  • 資深大佬 : c6h6benzene

    这应该是 label.position 控制的。你现在应该是把类目名当做了 Y 轴的 label 。

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具