ucharts 折线 点_线图基本用法

## **图表示例**

:-: 

## **标准数据格式**

```

chartData: {

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]

}]

}

```

## **调用方法**

```

canvaLineA=new uCharts({

$this:_self,

canvasId: canvasId,

type: 'line',

fontSize:11,

legend:{show:true},

dataLabel:false,

dataPointShape:true,

background:'#FFFFFF',

pixelRatio:1,

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: this.cWidth,

height: this.cHeight,

extra: {

line:{

type: 'straight'

}

}

});

```

## **完整代码示例**

```

基本折线图

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

var _self;

var canvaLineA=null;

export default {

data() {

return {

cWidth:'',

cHeight:'',

pixelRatio:1,

}

},

onLoad() {

_self = this;

this.cWidth=uni.upx2px(750);

this.cHeight=uni.upx2px(500);

this.getServerData();

},

methods: {

getServerData(){

uni.request({

url: 'https://www.ucharts.cn/data.json',

data:{

},

success: function(res) {

console.log(res.data.data)

let LineA={categories:[],series:[]};

//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去

LineA.categories=res.data.data.LineA.categories;

LineA.series=res.data.data.LineA.series;

_self.showLineA("canvasLineA",LineA);

},

fail: () => {

_self.tips="网络错误，小程序端请检查合法域名";

},

});

},

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',

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'

}

}

});

},

touchLineA(e) {

canvaLineA.showToolTip(e, {

format: function (item, category) {

return category + ' ' + item.name + ':' + item.data

}

});

}

}

}

/*样式的width和height一定要与定义的cWidth和cHeight相对应*/

.qiun-charts {

width: 750upx;

height: 500upx;

background-color: #FFFFFF;

}

.charts {

width: 750upx;

height: 500upx;

background-color: #FFFFFF;

}

```