饼图特定指示线和文字展示以及部分不展示

最新推荐文章于 2024-05-21 14:15:14 发布

转身_learner

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量336

点赞数

文章标签： javascript echarts

本文链接：https://blog.csdn.net/weixin_47818125/article/details/133356433

版权

<template>
  <div class="content">
    <div
      ref="charts"
      style="width: 1200px; height: 1000px; margin: 0 auto"
    ></div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      points: [],
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const charts = echarts.init(this.$refs["charts"]);
      let arr = [
        {
          value: 335,
          legendname: "种类01",
          name: "种类01  335",
          itemStyle: {
            color: "#8d7fec",
          },
        },
        {
          value: 310,
          legendname: "种类02",
          name: "种类02  310",
          itemStyle: {
            color: "#5085f2",
          },
        },
        {
          value: 234,
          legendname: "种类03",
          name: "种类03  234",
          itemStyle: {
            color: "#e75fc3",
          },
        },
        {
          value: 154,
          legendname: "种类04",
          name: "种类04  154",
          itemStyle: {
            color: "#f87be2",
          },
        },
        {
          value: 335,
          legendname: "种类05",
          name: "种类05  335",
          itemStyle: { color: "#f2719a" },
        },
        {
          value: 335,
          legendname: "种类06",
          name: "种类06  335",
          itemStyle: { color: "#fca4bb" },
        },
        {
          value: 335,
          legendname: "种类07",
          name: "种类07  335",
          itemStyle: { color: "#f59a8f" },
        },
      ];
      arr = arr.map((item) => {
        return {
          ...item,
          emphasis: {
            labelLine: {
              show: true,
            },
          },
          label: {
            normal: {
              show: (function () {
                if (
                  item.legendname == "种类01" ||
                  item.legendname == "种类02"
                  || item.legendname == "种类03"
                  || item.legendname == "种类04"
                  || item.legendname == "种类05"
                  || item.legendname == "种类06"
                ) {
                  return false;
                } else {
                  return true;
                }
              })(),
              formatter: (params) => {
                return params.percent + "|" + params.value;
              },
              borderWidth: 0,
              borderRadius: 4,
              padding: [0, -86],
              height: 70,
              fontSize: 13,
              align: "center",
              color: "#ffffff",
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 20,
                  color: "#ffffff",
                  padding: [0, 0, 5, 0],
                },
                c: {
                  fontSize: 20,
                  lineHeight: 20,
                  color: "#ffffff",
                },
              },
            },
          },
          labelLine: {
            show: (function () {
              if (item.legendname == "种类01" || item.legendname == "种类02") {
                return false;
              } else {
                return true;
              }
            })(),
            lineStyle: {
              color: "#ffffff", // 改变标示线的颜色
            },
          },
        };
      });
      let option1 = {
        backgroundColor: "#05274C",
        grid: {
          left: "20%",
        },
        color: [
          "#2AC9FD",
          "#76FBC0",
          "#35C96E",
          "#FCC708",
          "#48B188",
          "#5957C2",
          "#4A5D73",
        ],
        tooltip: {
        trigger: 'item',
        formatter:function (parms){
          var str=  parms.seriesName+"</br>"+
            parms.marker+""+parms.data.legendname+"</br>"+
            "数量："+ parms.data.value+"</br>"+
            "占比："+ parms.percent+"%";
            return  str ;
        }
    },
    legend: {
        type:"scroll",
        orient: 'vertical',
        left:'80%',
        align:'left',
        top:'middle',
        textStyle: {
            color:'#8C8C8C'
        },
        height:250
    },
        series: [
          {
            color: [
              "#2AC9FD",
              "#76FBC0",
              "#35C96E",
              "#FCC708",
              "#48B188",
              "#5957C2",
            ],
            type: "pie",
            radius: "50%",
            labelLine: {
              normal: {
                length: 25,
                length2: 120,
                lineStyle: {
                  type: "solid",
                },
              },
            },
            data: [...arr],
          },
        ],
      };
      charts.setOption(option1);
    },
  },
};
</script>
  <style scoped>
.content {
  background-color: #0e2152;
  height: 100%;
}
</style>