uniapp中引入uCharts各种图表（记得收藏点赞额）

首先：

下载好uCharts需要的

需要的页面按需引入：

import uCharts from '@/components/u-charts/u-charts.js';

正文：

引入柱状图

(1).html部分：主要是注意canvas属性和id别写错了

<view class="qiun-charts">
    <div style="display: flex;align-items: center; margin-left: 10px; margin-top: 10px;">
        <div style="display: flex; justify-content: left; align-items: center; flex-wrap: nowrap;">
            <div
                style="width: 10px; height: 10px; border-radius: 50%; background-color: #16f5e6; margin-right: 2px;">
            </div>
            <div>现金流量分析</div>
        </div>
    </div>
    <canvas :canvas2d="true" canvas-id="canvasMix" id="canvasMix" class="charts" @touchstart="touchMix"
        @touchmove="moveMix" @touchend="touchEndMix"></canvas>
</view>

（2）绘制柱形图都按照下面这个showMix公共方法

<script>
    import uCharts from '@/components/u-charts/u-charts.js';
    var _selfMix;
    var canvaMix = null;
    var canvasIncome = null;
    var canvasTax = null;
    export default {
        data() {
            return {
                //提前定义好变量
                cWidthMix: 750, //混合曲线宽度
                cHeightMix: 500, //混合图高度
                pixelRatio: 1,
                drawLineBarDataX: [], //定义X轴
                drawBar1DataY1: [], //现金流量分析-数据
                drawBar1DataY2: [], //现金流量分析-数据
            }
        },
        methods: {
            //绘制混合曲线
            showMix(canvasId, chartData) {
                canvaMix = new uCharts({
                    $this: _selfMix,
                    canvasId: canvasId,
                    type: 'column',
                    fontSize: 11,
                    legend: true,
                    background: '#FFFFFF',
                    color: ['#1890FF', '#16f5e6'],
                    pixelRatio: _selfMix.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    enableScroll: true,//开启图表拖拽功能
                    scrollAlign:'left',//图表滚动条起始位置
                    padding: [15, 15, 15, 10],
                    xAxis: {
                        disableGrid: true,
                        type: 'grid',
                        gridType: 'dash',
                        itemCount: 10,
                        scrollShow: false,
                        scrollAlign: 'left'
                    },
                    yAxis: {
                        title: '万元',
                        disableGrid: true,
                        gridType: 'dash',
                        splitNumber: 5,
                        min: 0,
                        max: 180,
                        format: (val) => {
                            return val.toFixed(0)
                        }
                    },
                    width: _selfMix.cWidthMix * _selfMix.pixelRatio,
                    height: _selfMix.cHeightMix * _selfMix.pixelRatio,
                    dataLabel: false,
                    dataPointShape: true,
                    extra: {
                        bar: {
                            type: "group",
                            width: 20,
                            meterBorde: 1,
                            meterFillColor: "#FFFFFF",
                            activeBgColor: "#000000",
                            activeBgOpacity: 0.08,
                            linearType: "custom",
                            barBorderCircle: true,
                            seriesGap: 2,
                            categoryGap: 2
                        }
                    },
                });
            },
            
              //数据引入
              getServerDataNetPresent() {
                let Mix = {
                    categories: this.drawLineBarDataX,
                    "series": [{
                        "name": "当期预测的净现值(元)",
                        "data": this.drawBar2DataY1,
                        "type": "column",
                        "color": '#1890FF',
                        "width": 10
                    }, {
                        "name": "当期预测的累计净现值(元)",
                        "data": this.drawBar2DataY2,
                        "type": "column",
                        "color": '#16f5e6',
                        "barWidth": 10
                    }]
                };
                _selfMix.showMix("canvasNetPresentValue", Mix);
            },  
        },
        
        onLoad(options) {
            _selfMix = this;
            this.cWidthMix = uni.upx2px(750);
            this.cHeightMix = uni.upx2px(500);
            setTimeout(() => {
                this.getServerData();
            }, 1000)
        },
        
    }

效果：

引入折线图

<view class="qiun-charts" style="margin-top: 20px;">
    <div style="display: flex; align-items: center; margin-left: 10px; margin-top: 10px;">
        <div
            style="width: 10px; height: 10px; border-radius: 50%; background-color: #16f5e6; margin-right: 2px;">
        </div>
        <div>收入分析</div>
    </div>
    <canvas :canvas2d="true" canvas-id="canvasIncome" id="canvasIncome" class="charts" disable-scroll=true
        @touchstart="touchIncome"></canvas>
</view>

其次写入js：

<script>
    import uCharts from '@/components/u-charts/u-charts.js';
    var _selfMix;
    var canvaMix = null;
    var canvasIncome = null;
    var canvasTax = null;
    export default {
        data() {
            return {
                //提前定义好变量
                cWidthMix: 750, //混合曲线宽度
                cHeightMix: 500, //混合图高度
                pixelRatio: 1,
                drawLineBarDataX: [], //定义X轴
                drawLine1DataY1: [], //收入分析
                drawLine1DataY2: [], //各类补贴
            }
        },
        methods: {
            showLineIncome(canvasId, chartData) {
                canvasIncome = new uCharts({
                    $this: _selfMix,
                    canvasId: canvasId,
                    type: 'line',
                    fontSize: 11,
                    legend: true,
                    dataLabel: false,
                    dataPointShape: true,
                    background: '#FFFFFF',
                    color: ['#1890FF', '#16f5e6'],
                    pixelRatio: _selfMix.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    enableScroll: true,//开启图表拖拽功能
                    scrollAlign:'left',//图表滚动条起始位置
                    padding: [15, 15, 15, 10],
                    xAxis: {
                        disableGrid: true,
                        type: 'grid',
                        gridType: 'dash',
                        itemCount: 10,
                        scrollShow: false,
                        scrollAlign: 'left'
                    },
                    yAxis: {
                        title: '万元',
                        disableGrid: false,
                        gridType: 'dash',
                        splitNumber: 5,
                        min: 0,
                        max: 50,
                        format: (val) => {
                            return val.toFixed(0)
                        }
                    },
                    width: _selfMix.cWidthMix * _selfMix.pixelRatio,
                    height: _selfMix.cHeightMix * _selfMix.pixelRatio,
                    dataLabel: false,
                    dataPointShape: true,
                    extra: {
                        line: {
                            type: 'straight'
                        }
                    }
                });
            },
            
              //数据引入
              getServerDataInconme() {
                let LineA = {
                    categories: this.drawLineBarDataX,
                    series: [{
                            data: this.drawLine1DataY1,
                            name: '年发电收入'
                        },
                        {
                            data: this.drawLine1DataY2,
                            name: '各类补贴收入小计'
                        },
                    ]
                };
                this.showLineIncome("canvasIncome", LineA);
            },
        },
        
        onLoad(options) {
            _selfMix = this;
            this.cWidthMix = uni.upx2px(750);
            this.cHeightMix = uni.upx2px(500);
            setTimeout(() => {
                this.getServerData();
            }, 1000)
        },
        
    }

效果：

引入圆环弧形

<view class="demo-layout bg-purple-light">
    <view>
        <span style="vertical-align: middle;">回报率</span>
    </view>
    <view class="qiun-columns">
        <view class="content">
            <canvas canvas-id="canvasRingRight" id="canvasRingRight" class="canvas"></canvas>
        </view>
    </view>
</view>

<script>
    import uCharts from '@/components/u-charts/u-charts.js';
    var _selfMix;
    var canvaMix = null;
    var canvasIncome = null;
    var canvasTax = null;
    export default {
        data() {
            return {
                //提前定义好变量
                cWidth: 100, //圆弧1宽度
                cHeight: 100, //圆弧1高度
                pixelRatio: 1,
                Arcbar3: {
                    //图表数据
                    series: [{
                        data: 0.76, //数据显示
                        color: "#66FFFF",
                        name: "%" //下方文字
                    }],
                },
            }
        },
        methods: {
            //绘制圆形进度条
            showRing(canvasId, chartData, id) {
                new uCharts({
                    $this: _selfMix,
                    canvasId: canvasId,
                    type: 'arcbar',
                    fontSize: 11,
                    title: {
                        name: Math.round(chartData.series[0].data * 100), //显示的文字百分比                    
                        color: chartData.series[0].color, //环形图的颜色
                        fontSize: 24 * _selfMix.pixelRatio //字体大小
                    },
                    subtitle: {
                        name: chartData.series[0].name, //显示文字
                        color: id === 1 ? '#6699ff' : id === 2 ? '#66CCFF' : id === 3 ? '#66FFFF' : id === 4 ?
                            '#CC9900' : '#FFCC33', //文字颜色
                        fontSize: 16 * this.pixelRatio //字体大小
                    },
                    extra: {
                        arcbar: {
                            type: 'default', //整圆类型进度条图 default圆弧、 circle 整圆
                            width: _selfMix.arcbarWidth * _selfMix.pixelRatio, //圆弧的宽度
                            startAngle: 0.75, //整圆类型只需配置起始角度即可,
                            endAngle: 0.25,
                            gap: 2,
                            linearType: "custom",
                            backgroundColor: '#ccc', //环形图的剩余百分比颜色
                        }
                    },
                    background: '#fff',
                    pixelRatio: _selfMix.pixelRatio,
                    series: chartData.series,
                    animation: false,
                    width: 100 * _selfMix.pixelRatio,
                    height: 100 * _selfMix.pixelRatio,
                    dataLabel: true
                });
            },
        },
        
        onLoad(options) {
            _selfMix = this;
            this.cWidthMix = uni.upx2px(750);
            this.cHeightMix = uni.upx2px(500);
        },
        onShow() {
            setTimeout(() => {
                this.showRing("canvasRingRight", this.Arcbar3, 3);
            }, 900)
        },
        
    }

效果：

饼图

后续的图表类似,举一反三

uniapp中引入uCharts各种图表（记得收藏点赞额）

猜你喜欢