echarts：在柱子上方显示数值，调整柱子的宽度，调整y轴的步长极限，设置y轴的名称的样式

た入场券 2022-03-11 08:38 428阅读 0赞

小谷最近学习echarts各种收集，百度到的样式修改。  
**在柱子上方显示数值：**

label: { 
          	normal: { 
              show: true,
              position: 'top',
              textStyle: { 
                color: 'black'
              }
          },
       }

**调整柱子的宽度：**

barWidth : 45,

**调整y轴的步长极限：  
设置y轴的名称的样式：**

yAxis: { name:'金额',
    			fontSize : 30,
    			max: 500,
    			nameLocation:'middle' },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]

// 引入基本模板
    let echarts = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    export default { 
      name: 'hello',
      data() { 
        return { 
          msg: 'Welcome to Your Vue.js App'
        }
      },
      mounted() { 
        this.drawLine();
      },
      methods: { 
        drawLine() { 
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('myChart'))
          // 绘制图表
          myChart.setOption({ 
            legend: { 
    			x: 'left',
    			// orient: 'vertical'//图例纵向排列，如果没有默认横向
    		},
        tooltip: { name:'谷姑姑'},
        dataset: { 
            source: [
                ['月份', '订单数', '订单金额'],
    			['2月', 150, 30,],
                ['3月', 83.1, 73.4,0],
                ['4月', 86.4, 65.2,0],
                ['5月', 72.4, 53.9,0]
            ]
        },
    	xAxis: { type: 'category',
    	},
    	yAxis: { name:'金额',
    			fontSize : 30,
    			max: 500,
    			nameLocation:'middle' },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ 
    		type: 'bar',
    		
    		barWidth : 45,
    		label: { 
          	normal: { 
              show: true,
              position: 'top',
              textStyle: { 
                color: 'black'
              }
          },
       }},
    		{ type: 'bar',
    		barWidth : 45,
    		label: { 
          	normal: { 
              show: true,
              position: 'top',
              textStyle: { 
                color: 'black'
              }
          }
       }},
    		
    		
            
        ],
          });
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]: /images/20220311/ba1edf5a1ee143bf9527e51ef9b465c6.png