sisMobilePhone/components/tools/u-charts/shuoming.md

/* 数据格式以及调用案例 http://doc.ucharts.cn/1172183 ： */

template

    <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"></canvas>

import => u-chart.js

data: cWidth:'', cHeight:'', pixelRatio:1,

methods: getServerData(){

                let LineA={
                    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
                    series: [{
                        name: '成交量A',
                        data: [35, 20, 25, 37, 4, 20],
                        color: '#000000'
                    }, {
                        name: '成交量B',
                        data: [70, 40, 65, 100, 44, 68]
                    }, {
                        name: '成交量C',
                        data: [100, 80, 95, 150, 112, 132]
                    }]
                };
                //LineA.categories=res.data.data.LineA.categories;
                // LineA.series=res.data.data.LineA.series;

                this.showLineA("canvasLineA",LineA);


        },
        showLineA(canvasId,chartData){
            var _self = this;
            var 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',
                    dashLength:8
                },
                yAxis: {
                    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'
                    }
                }
            });
            console.log(canvaLineA.categories);
        }

onLoad() {

        this.cWidth=uni.upx2px(1500);
        this.cHeight=uni.upx2px(500);
        this.getServerData();           
    }

style: .qiun-charts {

    width: 1500upx;
    height: 500upx;
    background-color: #FFFFFF;
}

.charts {
    width: 1500upx;
    height: 500upx;
    background-color: #FFFFFF;
}