vue+echarts实现饼图组件(实现左右联动并且数据量大时可滚动)

pieChart.vue(直接cv即可)

javascript 复制代码
<template>
  <div class="rBox1">
    <div id="rBox1"></div>
  </div>
</template>

<script>
export default {
  name: "pieChart",
  dicts: [],
  props: {
    subtext: {
      type: String,
      default: "",
    },
    chartData: {
      type: Array,
      default: () => [
        // {
        //   value: 1,
        //   legendName: "类型1",
        //   name: "类型1  335 件/10.5%",
        //   itemStyle: { color: "#8d7fec" },
        // },
      ],
    },
  },
  computed: {
    sum() {
      return this.chartData.reduce((total, item) => {
        return total + item.value;
      }, 0);
    },
  },
  components: {},
  watch: {
    chartData() {
      this.initMyEChart();
    },
  },
  data() {
    return {
      myChart: "",
      option: {},
    };
  },
  methods: {
    initMyEChart() {
      this.option = {
        title: [
          {
            text: this.sum,
            subtext: this.subtext,
            textStyle: {
              fontSize: 30,
              color: "black",
            },
            subtextStyle: {
              fontSize: 14,
              color: "#333",
            },
            textAlign: "center",
            x: "29%",
            y: "37%",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.marker +
              "" +
              parms.data.legendName +
              "</br>" +
              "数量:" +
              parms.data.value +
              "</br>" +
              "占比:" +
              parms.percent +
              "%";
            return str;
          },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "64%",
          align: "left",
          top: "middle",
          textStyle: {
            color: "#8C8C8C",
            fontSize: 12,
          },
          height: 140,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 10,
        },
        series: [
          {
            name: "类型占比",
            type: "pie",
            center: ["30%", "50%"],
            radius: ["60%", "80%"],
            clockwise: false,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outter",
                formatter: function (parms) {
                  return parms.data.legendName;
                },
              },
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true,
              },
            },
            data: this.chartData,
          },
        ],
      };
      this.myChart = this.$echarts.init(document.getElementById("rBox1"));
      this.myChart.setOption(this.option);

      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    this.myChart.clear();
  },
};
</script>

<style lang="scss" scoped>
.rBox1 {
  width: 100%;
  height: 100%;

  #rBox1 {
    width: 100%;
    height: 100%;
  }
}
</style>

使用

javascript 复制代码
    <div class="leftComp-box-content">
        <pieChart ref="pieChart" :chartData="pieData" subtext="事件总量"/>
      </div>
import pieChart from "@/views/pieChart.vue";

  components: {pieChart},
  data() {
    return {
      pieData: [],
    };
  },


    getBox2Data() {
      const data = [
        {
          "name": "拥堵事件",
          "count": 12,
        },
        {
          "name": "道路事件",
          "count": 56,
        },
        {
          "name": "超速事件",
          "count": 105,
        },
        {
          "name": "交通事故",
          "count": 71,
        },
        {
          "name": "气象",
          "count": 10,
        },
        {
          "name": "道路施工",
          "count": 45,
        },
        {
          "name": "道路维护",
          "count": 23,
        },
        {
          "name": "道路瞎写",
          "count": 51,
        },
        {
          "name": "道路维修",
          "count": 30,
        }
      ]
      const sum = data.reduce((total, item) => {
        return total + item.count;
      }, 0);
      this.pieData = data.map((i) => {
        return {
          value: i.count,
          legendName: i.name,
          name: `${i.name}   ${i.count}   件/${((i.count / sum) * 100).toFixed(2)}%`,
        };
      });
    },


 mounted() {
    this.initLeftCompData();
  },




  .leftComp-box-content {
width: 100px;
height: 100px;
      }
相关推荐
前端_学习之路7 分钟前
axios--源码解析
java·开发语言·javascript·ajax
xixixin_8 分钟前
【uniapp】内容瀑布流
java·前端·uni-app
计算机毕设定制辅导-无忧学长15 分钟前
响应式 Web 设计:HTML 与 CSS 协同学习的进度(二)
前端·css·html
yzp011216 分钟前
html方法收集
前端·javascript·html
paradoxaaa_19 分钟前
VUE2导出el-table数据为excel并且按字段分多个sheet
javascript·vue.js·excel
lbh42 分钟前
前端处理 .xlsx 文件流并触发下载指南
前端·javascript
xixixin_42 分钟前
【uniapp】各端获取路由路径的方法
前端·javascript·uni-app·vue
Epicurus1 小时前
如何编写高质量的TypeScript应用程序
前端
萧寂1731 小时前
Grid布局示例代码
前端·javascript·css
汪洪墩1 小时前
知道自己鼠标在某个竖直平面上的经纬度信息在这个竖直的平面上的实时坐标
服务器·前端·cesium