yinchuan-community-all/mini-program/garden-wxapp/pages/agency/comps/canvas/Line.vue

<template>
    <view class="">
        <view class="qiun-charts">
            <canvas :canvas-id="canvasId" :id="canvasId" class="charts" @touchstart="touchLineA"></canvas>
        </view>
    </view>
</template>

<script>
    import uCharts from '@/assets/js/u-charts/u-charts/u-charts.js';

    var _self;
    var canvaLineA = null;
    export default {
        data() {
            return {
                cWidth: '',
                cHeight: '',
                pixelRatio: 1,
            }
        },
        props: {
            lineJson: {
                type: Object,
                default: null
            },
            canvasId: {
                type: String,
                default: "canvasLineA"
            },
        },
        created() {
            _self = this;
            this.cWidth = uni.upx2px(750);
            this.cHeight = uni.upx2px(500);
            _self.showLineA(this.canvasId, this.lineJson);
        },
        methods: {
            showLineA(canvasId, chartData) {
                canvaLineA = new uCharts({
                    $this: _self,
                    canvasId: canvasId,
                    type: 'line',
                    fontSize: 11,
                    legend: {show: true},
                    dataLabel: false,
                    dataPointShape: true,
                    background: '#FFFFFF',
                    pixelRatio: _self.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    xAxis: {
                        type: 'grid',
                        gridColor: '#CCCCCC',
                        gridType: 'dash',
                        disableGrid: true,
                        dashLength: 8,
                        rotateLabel: true
                    },
                    yAxis: {
                        disableGrid: true,
                        gridType: 'dash',
                        gridColor: '#CCCCCC',
                        dashLength: 8,
                        splitNumber: 5,
                        min: 10,
                        max: 180,
                        format: (val) => {
                            return val.toFixed(0)
                        }
                    },
                    width: _self.cWidth * _self.pixelRatio,
                    height: _self.cHeight * _self.pixelRatio,
                    extra: {
                        line: {
                            type: 'straight'
                        }
                    }
                });

            },
            touchLineA(e) {
                canvaLineA.showToolTip(e, {
                    format: function (item, category) {
                        return category + ' ' + item.name + ':' + item.data
                    }
                });
            }
        }
    }
</script>

<style>
    .qiun-charts {
        width: 750 upx;
        height: 500 upx;
        background-color: #FFFFFF;
    }

    .charts {
        width: 750 upx;
        height: 500 upx;
        background-color: #FFFFFF;
    }
</style>