tuoheng_pilot_mini_move_20240715/components/pie/index.js

// components/pie/index.js
import * as echarts from "../ec-canvas/echarts"
let chart
function getPixelRation(){
    var {pixelRatio} = wx.getSystemInfoSync();
    return  pixelRatio||1
};
function initChart(canvas, data, total) {
    chart = echarts.init(canvas, null, {
        width: 315,
        height: 280,
        devicePixelRatio:getPixelRation()
    })
    var option = getOption(data, total)
    chart.setOption(option)
    canvas.setChart(chart)
    return chart
}
function getOption(data, total) {
    let option = {
        disableTouch: true,
        backgroundColor: "#ffffff",
        title: {
           text: '任务总数',
           subtext: total + '条',
           textAlign: 'center',
           x: '48%',
           y: '42%'
        },
        legend: {
            bottom: "5%",
            orient: 'vertical',
            left: "right",
            selectedMode: false
        },
        grid: [
            {
                bottom: 40,
                top: -30,
                left: 5,
                right: 5,
            },
        ],
        series: [
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: ["40%", "65%"],
                silent: true,
                label: {
                  position: 'inner',
                  fontSize: 12,
                  formatter: '{d}%'
                },
                labelLine: {
                  show: false
                },
                data: data,
            },
        ]
    }
    return option
}
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        data: {
            type: Object
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            onInit: initChart
        },
    },
    // 数据监听器
    observers: {
        data() {
            setTimeout(()=>{
                chart.setOption(getOption(this.properties.data.dataList, this.properties.data.total))
            },500)
        },
    },
    /**
     * 组件的方法列表
     */
    methods: {

    }
})