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

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

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

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

export default {
    name: namespace.name,
    mixins:[
        mixChart()
    ],
    props:{
        showArea:{
            type:Boolean,
            default: false
        }
    },
    computed:{  
        cls(){
            return namespace.derive()
        }
    },
    methods:{
        renderTooltip(){
            this.chart.tooltip(this.getTooltipOption(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 line = this.chart.line()
                line.position(position)
                line.shape('smooth')
                classifyBy ? line.color(classifyBy, color) : line.color(color)

                if(!this.showArea){
                    return 
                }

                const area = this.chart.area()
                area.position(position)
                area.shape('smooth')
                classifyBy ? area.color(classifyBy, this.getLinearColor(color)) : area.color(this.getLinearColor(color))
            })
        }
    },
    render(){
        return (
            <canvas  class={this.cls}/>
        )
    }
}