柱状图的一些常用配置

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import "./liquid.js";
export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "250px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions();
      },
    },
  },
  mounted() {
    //   在组建再次渲染时，调用 this.initChart()初始化echarts图表
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose(); //在组件销毁的时候，调用chart.dispose()销毁图表实例
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el); //调用echarts.init()方法初始化图表
      this.setOptions();
      /*
      设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，
      ECharts 会合并新的参数和数据，然后刷新图表。
      如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
      */
    },

    setOptions() {
      var xData = [];
      var yData = [];
      this.chartData.forEach((item) => {
        xData.push(item.deptName);
        yData.push({
          value: item.reportRate,
          itemStyle: {
            color: "#409EFF",
            emphasis: {
              barBorderRadius: 30,
            },
          },
        });
        for (let i = 0; i < yData.length; i++) {
          if (i == 5) {
            var itemStyle = {
              color: "#6FC346",
              emphasis: {
                barBorderRadius: 30,
              },
            };
            yData.splice(5, 1, { itemStyle, value: yData[5].value });
          }
        }
      });
      var option = {
        xAxis: {
          type: "category",
          name: "司法所",
          data: xData,
          axisLabel: {
            interval: 0, //强制文字产生间隔
            rotate: -10, //文字逆时针旋转45°,文字显示不全的时候让旋转一定的角度
            textStyle: {
              //文字样式
              color: "#333",
              fontSize: 10,
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "汇报率%",
        },
        series: [
          {
            data: yData,

            type: "bar",
            showBackground: true,
            label: {
              // 柱图头部显示值
              show: true,
              position: "top",
              color: "#333",
              fontSize: "12px",
              formatter: (params) => {
                return params.value[params.encode.x[0]];
              },
            },

            barWidth: "12px",
            itemStyle: {
              backgroundStyle: {
                color: "red",
              },
              normal: {
                // 设置柱子的圆角、
                barBorderRadius: [10, 10, 10, 10],
                color: function (params) {
                  let colorList = [
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                    "#409EFF",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      this.chart.setOption(option, true);
      window.onresize = () => {
        this.chart.resize();
      };
    },
  },
};
</script>
<style scoped>
.chart {
  position: absolute;
  left: -50px;
  top: -40px;
  width: 100%;
}
.leijichart {
  border-radius: 100%;
  overflow: hidden;
  margin-left: 8px;
}
/* canvas {
  position: absolute;
  left: -73px;
  top: -40px;
  width: 1205px;
  height: 250px;
  user-select: none;
  padding: 0px;
  margin: 0px;
  border-width: 0px;
} */
</style>