parking_operation/components/pieChart.vue

<!-- 饼图 -->
<template>
  <view class="charts-box">
    <view class="charts-box-title">{{ title }}</view>
    <qiun-data-charts type="pie" :canvas2d="true" :ontouch="true" :chartData="chartData" :opts="opts" />
  </view>
</template>

<script>
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    title: {
      type: [String, Number],
      default: ''
    },
    opts: {
      type: Object,
      default: () => {
        return {
          // color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
          dataLabel: true,
          legend: {
            position: 'bottom',
            lineHeight: 20
          },
          extra: {
            pie: {
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 15,
              border: true,
              borderWidth: 3,
              borderColor: '#FFFFFF',
							linearType: 'custom'
            }
          }
        };
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.charts-box {
  background-color: #fff;
  border-radius: 5px;
  padding: 18px 15px;

  &-title {
    text-align: center;
    margin-bottom: 10px;
  }
}
</style>