vue中使用柱状图

原创已于 2022-05-25 19:56:49 修改 · 6.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #echarts #vue

于 2022-04-24 19:14:53 首次发布

数据可视化专栏收录该内容

4 篇文章

订阅专栏

本文档详细介绍了在Vue项目中使用ECharts库创建柱状图的步骤，包括调整柱子宽度、设置渐变色、定制x轴和y轴样式，以及去除不需要的分割线和刻度线。通过实例代码展示具体实现过程。

主要是为了记录以下内容
1.更改柱子宽度：barWidth属性
2.设置柱子颜色为渐变色：itemStyle属性
3.x轴的样式：axisLine属性
4.刻度上字体的样式及间距等：axisLabel里的lineStyle属性
5.去掉与x轴平行的分割线:

splitLine:{show:false}

6.去掉y轴刻度线

axisTick:{show:false}

效果图如下
在这里插入图片描述
代码如下：

<template>
  <div class="psgBarChart" ref="psgBarChart"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    let barOption = {
      // 设置柱状图的位置
      grid: {
        // 距离左方轴数值
        x: 248,
        // y:200,
        x2: 264,
        // 距离下方轴数值
        // y2: 120,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了', '眼要花了'],
        // boundaryGap: false,
        // 刻度上字体的样式
        axisLabel: {
          padding: [34, 0, 0, 0],
          fontSize: 60,
          color: '#fff',
        },
        // x轴的样式
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999',
            width: 10
          }
        }
      },
      yAxis: {
        type: 'value',
        // 不展示y轴
        show: false,
        // 不展示分割线
        splitLine: {
          show: false
        },

      },
      series: [
        {
          data: [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5],
          type: 'bar',
          //   柱子的宽度
          barWidth: 125,
          //   柱子的颜色
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#ECBD50' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(236, 189, 80, 0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
        //  对应数值展示在柱子中间
          label: {
            show: true,
            position: 'inside',
            fontSize:60,
            color:'#fff'
          },

        }
      ]
    };
    let barChart = echarts.init(this.$refs.psgBarChart);
    barChart.setOption(barOption)
  }

}
</script>

<style lang="scss" scoped>
.psgBarChart {
  width: 6100px;
  height: 504px;
  //   background-color: pink;
}
</style>