Echarts中柱状图的的使用，X轴字体倾斜设置，柱状图上显示数值

最新推荐文章于 2024-07-02 10:08:12 发布

jiandan7410

最新推荐文章于 2024-07-02 10:08:12 发布

阅读量2.6k

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/jiandan7410/article/details/120533362

版权

drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            show: true
          },
          color: ['#2EB7BD', '#3CE1D9', '#FBBACB', '#4695D1'],
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '衬衫'],
            axisLabel: { //X轴字体倾斜设置
              interval: 0,
              rotate: -30 //倾斜的程度
            }
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 5],
            itemStyle: {   //设置在柱状图上显示数值
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }
            }
          }]
        })
      }