小程序内外环图表

import { formatAmount } from "../../../utils/util";

// pagesA/components/circular-pie-chart/index.ts
let echarts = require("../ec-canvas/echarts")
// import * as  echarts from "../ec-canvas/echarts";
let chartData: any = []
//@ts-ignore
function initChart(canvas, width, height, dpr) {
  console.log('@chartData', chartData)
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  const colorMap = ['#3A484F', "#E5F1F8", '#3aa6e5', '#F47F89', '#76d0f3', '#6d90ca', '#F47F89']
  let option: any
  let data = chartData.map((item: any) => {
    return {
      name: item.itemName,
      value: item.itemMoney,
      ...item
    }
  })
  option = {
    series: [
      {
        name: '产品类目消费占比',
        type: 'pie',
        radius: [75, 90],
        funnelAlign: 'left',
        max: 1048,
        avoidLabelOverlap: false,
        hoverAnimation:false,
        label: {
          normal: {
            show: true,
            position: 'inner',
            formatter: (params: any) => {
              console.log("@params",params)
              let color;
              if(params.dataIndex==1){
                color="black"
              }else{
                color="white"
              }
              return `{${color}|${ params.data.proportion || ''}}`
            },
            rich: {
              white: {
                color: "#fff",
                fontSize: 8,
              },
              black:{
                color: "#000",
                fontSize: 8,
              }
            },
            // fontSize: 8,
            // color: '#fff'
          }
        },
        color: colorMap,
        data: data
      },
      {
        name: '产品类目消费占比',
        type: 'pie',
        radius: [80, 100],
        funnelAlign: 'left',
        max: 1048,
        avoidLabelOverlap: false,
        hoverAnimation:false,
        itemStyle: {
          normal: {
            label: {
              position: 'outer',
              color: '#000',
              lineHeight: 16,
              formatter: (params: any) => {
                console.log('@parmas', params)
                return `${params.data.name || ''}\n ￥${formatAmount(params.data.value) || ''}`
              },
            },
            labelLine: {
              show: true
            }
          }
        },
        data: data
      }
    ]
  };
  chart.setOption(option);
  return chart;
}
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    pie: {
      type: Array,
      value: [],
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      // lazyLoad: true,
      onInit: initChart
    },
    loading: true,
    pieData: [],
  },
  ready() {
    let timers = setTimeout(() => {
      chartData = this.properties.pie
      this.setData({
        loading: false,
        pieData: chartData
      })
      clearTimeout(timers)
    }, 1000)
  },
  /**
   * 组件的方法列表
   */
  methods: {

  }
})

<!--pagesA/components/circular-pie-chart/index.wxml-->
<view class="circular-pie-chart" wx:if="{{!loading}}">
  <ec-canvas id="circular-pie" canvas-id="circular-pie" ec="{{ ec }}"></ec-canvas>
  <view class="color">
    <view class="item" wx:for="{{pieData}}">
      <view class="circle" style="background: {{item.color}};"></view>
      <view class="label">{{item.itemName}}</view>
    </view>
  </view>
</view>

/* pagesA/components/circular-pie-chart/index.wxss */
.circular-pie-chart {
  width: 100%;
  height: 600rpx;
  margin: 0 auto;

  .color {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: -30rpx;
    .item {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      &:not(:last-child) {
        margin-right: 55rpx;
      }
      .circle {
        width: 16rpx;
        height: 16rpx;
        background: #3AA6E5;
        border-radius: 50%;
      }
      .label {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #4C4C4C;
        margin-left: 10rpx;
      }
    }
  }
}