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

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

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

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

export default {
    name: namespace.name,
    mixins:[
        mixChart()
    ],
    props:{
        showHorizental:{
            type:Boolean,
            default: false
        }
    },
    computed:{  
        cls(){
            return namespace.derive()
        }
    },
    methods:{
        renderAxis(){
            this.chart.axis(this.getAxisOption(true))
        },
        renderGeometry(){
            const {x,y,yr} = this.axis

            const {classifyBy, color} = this.geometry

            const geos = this.isUsingYR ? this.data: [this.data]

            geos.forEach((_,index)=>{
                const position = [x.use, this.isUsingYR && (index === geos.length - 1) ? yr?.use: y.use]

                const interval = this.chart.interval()
                interval.position(position)
                interval.shape('smooth')
                interval.adjust('stack')
                classifyBy ? interval.color(classifyBy, color) : interval.color(color)
            })
        },
        renderCoord(){
            if(this.showHorizental){
                this.chart.coord({
                    transposed: true
                })
            }
        }
    },
    render(){
        return (
            <canvas  class={this.cls}/>
        )
    }
}