echarts histogram markPoint configuración, descripción detallada de la configuración de parámetros del histograma con instrucciones de cantidad en la parte superior

Configuración de parámetros clave:

1. Ubicación del histograma
2. el eje y desaparece
3. Las líneas del eje x y las marcas de graduación desaparecen pero el texto permanece
4. Sombreado de área del histograma
5. Una marca de cantidad en la parte superior del histograma indica la configuración.
6. El eje xy el eje y están compuestos por líneas, marcas de graduación y texto.
7. Cada elemento de los datos de la serie se puede configurar individualmente o como un todo.
8. demo oficial de echarts
9. Documento oficial para la configuración detallada del histograma echarts

<template>
  <div id="barchart_container"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
    
    
  data() {
    
    
    return {
    
    };
  },
  created() {
    
    },
  mounted() {
    
    
    var bar = echarts.init(document.getElementById("barchart_container"));
    var option = {
    
    
      //柱状图位置
      grid: {
    
    
        // left: "3%",
        // right: "4%",
        bottom: 100,
        // height: 200
        show: false
        // containLabel: true,
      },
      //图例部分
      legend: {
    
    
        left: 84,
        bottom: 41,
        data: ["自我评分", "师兄评分"],
        textStyle: {
    
    
          fontSize: 18,
          fontFamily: "Source Han Sans CN",
          fontWeight: "bold",
          color: "#333333",
        },
        itemGap: 185,
        itemWidth: 19,
        itemHeight: 7,
        inactiveColor: "#f60", //图例关闭时的颜色
      },
      //x轴配置
      xAxis: {
    
    
      //类型
        type: "category",
      //数据 data中的每一项的字体样式可以单独配置
        data: ["html", "css", "javascript", "框架", "jquery"],
      // 线条
        axisLine: {
    
    
          show: false,
        },
       //刻度
        axisTick: {
    
    
          show: false,
        },
       //文字配置
        axisLabel: {
    
    
          show: true,
          margin: 12,
          fontSize: 15,
          fontFamily: "Source Han Sans CN",
          fontWeight: 500,
          color: "#333333",
        },
      },
	//y轴配置
      yAxis: [
        {
    
    
          show: false
        },
      ],
      //数据系列
      series: [
        {
    
    
          name: "自我评分",
          type: "bar",
          data: [2.0, 3.0, 4.0, 5.0, 10.0],
          //每一条柱状图的样式展示
          itemStyle: {
    
    
            color: "#FC9708",
            background: "#FC9708",
            shadowColor: "#FC9708",
            //阴影
            shadowOffsetX: 4,
            shadowOffsetY: 5,
            shadowBlur: 10,
            borderRadius: "4 4 0 0",
            //  opacity: 0.6
          },
          //柱状图顶部的数量标注
          markPoint: {
    
    
            symbol: "pin",//相当于是type
            symbolSize: "65",//size
            symbolOffset: [0, -1],//位置偏移量
            //是否显示标注的值
            label: {
    
    
              show: true,
              fontFamily: "wgsFont",//该字体是我自己引入的lcd字体，不知道怎么引入，私聊。
              fontSize: 44,
            },
            //哪些值显示标注，只有这三种数据显示，目前不能都做到显示，其实也可以做到都显示但是效果可能不好
            data: [
              {
    
     type: "max", name: "最大值" },
              {
    
     type: "min", name: "最小值" },
              {
    
     type: "average", name: "平均值" },
            ],
          },
          //这是一个平均线
          //   markLine: {
    
    
          //     data: [{ type: "average", name: "平均值" }],
          //   },
        },
        {
    
    
          name: "师兄评分",
          type: "bar",
          data: [3.0, 4.0, 6.0, 8.0, 11.0],
          itemStyle: {
    
    
            color: "#2E5AFB",
            // color: "#FC9708",
            background: "#2E5AFB",
            shadowColor: "#2E5AFB",
            shadowOffsetX: 4,
            shadowOffsetY: 5,
            shadowBlur: 10,
            borderRadius: "4 4 0 0",
          },
          markPoint: {
    
    
            symbol: "pin",
            symbolSize: "65",
            symbolOffset: [0, -1],
            //是否标注的值
            label: {
    
    
              show: true,
              fontFamily: "wgsFont",
              fontSize: 44,
            },
            data: [
              {
    
     type: "max", name: "最大值" },
              {
    
     type: "min", name: "最小值" },
              {
    
     type: "average", name: "平均值" },
            ],
          },
          //   markLine: {
    
    
          //     data: [{ type: "average", name: "平均值" }],
          //   },
        },
      ],
    };

    bar.setOption(option);
  },
  methods: {
    
    },
  computed: {
    
    },
};
</script>
<style scoped>
#barchart_container {
    
    
  width: 560px;
  height: 328px;
  /* FIXME:ZUJIAN WEI ZHI */
  margin: 20px 0 0 20px;
  background: #ffffff;
  box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.2);
  border-radius: 10px;
}
</style>