横向柱状图

<!--横向柱状图图-->
<template>

  <!--echart图标-->
  <div id="transverseBar" ref="transverseBar" style="height:375px;width:500px"></div>

</template>

<script>
// 引入基本模板
import * as echarts from "echarts";

export default {
  name: "TransverseBar",
  props: {
    yValue: {
      type: Array,
      default() {
        return []
      }
    },
    seriesData: {
      type: Array,
      default() {
        return []
      }
    },
    maxVal: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      myChart: null,
    }
  },
  mounted() {

    this.initEchart();

  },
  methods: {
    initEchart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.transverseBar);
      let option = {
        // 标题
        title: {
          text: "▍横向柱状图", // ▍ 任意打一个字，调出搜狗输入法卡片，右键单击——表情符号——符号大全
          left: 40,
          top: 40,
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
        },
        // 坐标轴
        grid: {
          top: "15%",
          left: "5%",
          right: "3%",
          bottom: "5%",
          containLabel: true, //是否包含坐标轴的文字
        },
        // X轴：横向柱状图，将xAxis的type设置为value
        xAxis: {
          type: "value",
          show: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        // Y轴：横向柱状图，将xAxis的type设置为category
        yAxis: {
          type: "category",
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color:'#fff',
            show: true
          }
        },
        // 图表内容
        series: [
          {
            type: "bar", // 图表类型
            data: [5, 20, 36, 10, 10, 20], // 数据
            barWidth: 14, // 柱的宽度
            // 柱上面的数值配置
            label: {
              show: true, // 显示值
              position: "right", // 显示位置
              color: "white",
            },
            // 每一个条目的样式配置
            itemStyle: {
              barBorderRadius: [0, 34, 34, 0], // 圆角
              // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "rgba(30, 231, 231, 0)" },
                { offset: 1, color: "rgba(24, 144, 255, 1)" },
              ]),
            },
          },
        ],
        // 提示框设置
        tooltip: {
          trigger: "axis", //触发类型——坐标轴
          // 鼠标移入条目下面的背景
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              color: "rgba(225,225,225,.3)",
              width: 65,
            },
          },
        },
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
//.chartBox {
//  width: 100%;
//  box-sizing: border-box;
//  padding: 1.6rem 1.6rem 0;
//  flex: 1;
//
//  #crosswiseBarChart {
//
//    height: 100%;
//
//  }
//}
</style>