## **图表示例**
:-: 
## **标准数据格式**
```
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'
}
}
});
```
## **完整代码示例**
```
<template>
<view class="qiun-columns">
<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
<view class="qiun-title-dot-light">基本折线图</view>
</view>
<view class="qiun-charts" >
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
</view>
</view>
</template>
<script>
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
}
});
}
}
}
</script>
<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
.charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
</style>
```
- uCharts简介
- 图表预览
- 快速上手
- 常见问题
- API参数
- 通用基础配置项
- 数据列表配置项
- 标题配置项
- 坐标轴配置项
- 图例配置项
- 扩展配置项
- 圆弧进度图
- 仪表盘
- 雷达图
- 柱状图
- 饼图圆环图
- 玫瑰图
- 折线图
- 区域图
- K线图
- 词云图
- 漏斗图
- 地图
- 条状图
- 标记线
- ToolTip
- 其他配置
- 方法 & 事件
- 更新图表数据
- 图例点击交互
- 停止动画效果
- 添加移除事件监听
- 获取图表点击序列编号
- 获取图例点击序列编号
- ToolTip方法
- 图表拖拽事件
- 放大或缩小图表
- 图表渲染完成事件
- 入门配置示例
- 图表区域详解
- 绘制X坐标轴网格
- 绘制Y坐标轴网格
- 隐藏X轴（不含网格）
- 隐藏Y轴（不含网格）
- 启用X轴滚动条及拖拽
- 绘制Y轴标题
- 隐藏X轴下方图例
- 隐藏数据点标识
- 隐藏数据点标签
- 进阶配置示例
- ToolTip配置
- uni-app示例
- 饼图
- 饼图基本用法
- 饼图右侧图例
- 圆环图
- 圆环图基本用法
- 玫瑰图
- 玫瑰图基本用法
- 线图
- 线图基本用法
- 柱状图
- 基本柱状图
- 温度计式图表
- 堆叠柱状图
- 横屏模式
- 区域图
- 区域图基本用法
- 雷达图
- 雷达图基本用法
- 圆弧进度图
- 圆弧进度图基本用法
- 整圆进度图基本用法
- 仪表盘
- 仪表盘基本用法
- K线图
- K线图基本用法
- 条状图
- 条状图基本用法
- 混合图
- 混合图基本用法
- 词云图
- 词云图基本用法
- 漏斗图
- 漏斗图基本用法
- 地图
- 地图基本用法
- 更新记录
- 改造uCharts打造专属图表
- uni-app实战教程