earch单柱形展示百分比

Posted 2021-05-18 叩首问路 码梦人生

如图：

 

Line.vue

<template>
  <div>
    <div style="width: 300px; height: 300px" ref="chart" id="chart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    initCharts() {
      let bookCategoryChart = this.$echarts.init(
        document.getElementById("chart")
      );
      var attackSourcesData = [60];
      let num = 60;
      function attackSourcesDataFmt(sData) {
        var sss = [];
        sData.forEach(function (item) {
          sss.push({
            value: item,
            // itemStyle: itemStyle
          });
        });
        console.log(sss);
        return sss;
      }
      var option = {
        tooltip: {      
          show: true,
          className:\'tip\',
          textStyle: {
            padding: [0, 0, 0, 0],
          },
          // backgroundColor: "rgba(255,255,255,1)", //背景颜色（此时为默认色）
          formatter: function (val) {
            console.log(val);
            console.log(num);
            if (val.seriesName == "未完成") {
              val.value = 100 - num;
            }
            return `${val.marker}${val.seriesName}:${val.value}%`;
          },
        },
        legend: {
          show: false,
        },
        xAxis: {
          type: "value",

          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: [],
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            z: 3,
            name: "完成",
            type: "bar",
            barWidth: "10",
            data: attackSourcesDataFmt(attackSourcesData),
            itemStyle: {
              normal: {
                // color: "#ff0000",
                barBorderRadius: 5,
              },
            },
          },
          {
            name: "未完成",
            type: "bar",
            barWidth: "10",
            barGap: "-100%",
            data: [100],
            itemStyle: {
              normal: {
                // color: "#00ff09",
                barBorderRadius: 5,
              },
            },
          },
        ],
      };
      bookCategoryChart.setOption(option);
    },
  },
  mounted() {
    this.initCharts();
  },
};
</script>
<style scoped>
/deep/ .tip{
  color: aquamarine  ;
  background-color: brown ;
  padding:1px !important;
}
</style>