@minix-iot/ui/dist/packages/chartpie/chartpie.jsx

基于Vue的移动端轻量级UI组件库

import { Namespace } from "../../utils/namespace";
import { mixChart } from "../../mixins/chart/mixChart";

const namespace = Namespace.Create('chart-pie')

export default {
    name: namespace.name,
    mixins:[
        mixChart()
    ],
    props:{
        showRing:{
            type:Boolean,
            default: false
        }
    },
    computed:{
        wrapperCls(){
            return namespace.derive('wrapper')
        },  
        cls(){
            return namespace.derive()
        },
        innerCls(){
            return namespace.derive('inner')
        },
        formatedData(){
            return Object.keys(this.data).map(key=>({
                key,
                y: this.data[key],
                x:'1'
            }))
        }
    },
    methods:{
        renderCoord(){
            const option = {
                transposed: true
            }
            if(this.showRing){
                option.innerRadius = 0.8
            }
            this.chart.coord('polar',option)
        },
        renderAxis(){
            this.chart.axis(false)
        },
        renderScale(){
            this.chart.scale(false)
        },
        renderTooltip(){
            this.chart.tooltip(false)
        },
        renderLegend(){
            this.chart.legend({
                itemFormatter:(value)=>{
                    return `${value}  ${this.data[value]}`
                }
            })
        },
        renderSource(){
            this.chart.source(this.formatedData)
        },
        renderGeometry(){
            const {color} = this.geometry
            const interval = this.chart.interval()
            interval.position(['x','y'])
            interval.color('key',color)
            interval.adjust('stack')
            interval.style({
                lineWidth: 5,
                stroke: '#fff',
                lineJoin: 'round',
                lineCap: 'round'
            })
        },
        changeSource(){
            this.chart.changeSource(this.formatedData)
        },
        getCanvas(){
            return this.$refs.canvas
        }
    },
    render(){
        const renderInnerText = ()=>{
            if(this.showRing){
                return (
                    <div class={this.innerCls}>
                        {this.$slots.default}
                    </div>
                )
            }
        }
        return (
            <div class={this.wrapperCls}>
                <canvas ref="canvas"  class={this.cls}/>
                {renderInnerText()}
            </div>
        )
    }
}