## **图表示例**
:-:
## **标准数据格式**
```
chartData: {
categories: ['2019/5/5', '2019/5/6', '2019/5/6', '2019/5/8', '2019/5/9', '2019/5/10'],
series: [{
name: '上证指数',
data: [
[2320.26, 2302.6, 2287.3, 2362.94],
[2300, 2291.3, 2288.26, 2308.38],
[2295.35, 2346.5, 2295.35, 2346.92],
[2347.22, 2358.98, 2337.35, 2363.8],
[2360.75, 2382.48, 2347.89, 2383.76],
[2383.43, 2385.42, 2371.23, 2391.82],
[2377.41, 2419.02, 2369.57, 2421.15]
]
}]
}
```
>[danger] K线图data\[n\]传入顺序：开盘，收盘，最低，最高
## **调用方法**
```
canvaCandle=new uCharts({
$this:this,
canvasId: canvasId,
type: 'candle',
fontSize:11,
legend:{show:true},
background:'#FFFFFF',
pixelRatio:1,
categories: chartData.categories,
series: chartData.series,
animation: true,
enableScroll: true,
xAxis: {
disableGrid:true,
itemCount:10,
scrollShow:true,
scrollAlign:'right',
},
yAxis: {
gridType:'dash',
splitNumber:5,
format:(val)=>{return val.toFixed(0)}
},
width: this.cWidth,
height: this.cHeight,
dataLabel: false,
dataPointShape: true,
extra: {
candle:{
color:{
upLine:'#f04864',
upFill:'#f04864',
downLine:'#2fc25b',
downFill:'#2fc25b'
},
average:{
show:true,
name:['MA5','MA10','MA30'],
day:[5,10,30],
color:['#1890ff', '#2fc25b', '#facc14']
}
},
tooltip:{
bgColor:'#000000',
bgOpacity:0.7,
gridType:'dash',
dashLength:5,
gridColor:'#1890ff',
fontColor:'#FFFFFF',
horizentalLine:true,
xAxisLabel:true,
yAxisLabel:true,
labelBgColor:'#DFE8FF',
labelBgOpacity:0.95,
labelAlign:'left',
labelFontColor:'#666666'
}
},
});
```
## **完整代码示例**
```
<template>
<view class="qiun-columns">
<view class="qiun-bg-white qiun-title-bar qiun-common-mt qiun-rows" >
<view class="qiun-title-dot-light">基本K线图（完善中）</view>
<view style="flex: 1;qiun-rows;text-align: right;">
<button type="default" size="mini" @tap="tapButton('in')">放大</button>
<button type="default" size="mini" style="margin-left: 20upx;" @tap="tapButton('out')">缩小</button>
</view>
</view>
<view class="qiun-charts">
<canvas canvas-id="canvasCandle" id="canvasCandle" class="charts" disable-scroll=true @touchstart="touchCandle" @touchmove="moveCandle" @touchend="touchEndCandle"></canvas>
</view>
<view class="qiun-padding qiun-bg-white ">
<slider :value="itemCount" min="5" :max="sliderMax" block-color="#f8f8f8" block-size="18" @changing="sliderMove" @change="sliderMove"/>
</view>
</view>
</template>
<script>
import uCharts from '@/components/u-charts/u-charts.js';
var _self;
var canvaCandle=null;
export default {
data() {
return {
cWidth:'',
cHeight:'',
pixelRatio:1,
itemCount:20,//x轴单屏数据密度
sliderMax:50,
}
},
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 Candle={categories:[],series:[]};
//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
Candle.categories=res.data.data.Candle.categories;
Candle.series=res.data.data.Candle.series;
_self.showCandle("canvasCandle",Candle);
},
fail: () => {
_self.tips="网络错误，小程序端请检查合法域名";
},
});
},
showCandle(canvasId,chartData){
canvaCandle=new uCharts({
$this:_self,
canvasId: canvasId,
type: 'candle',
fontSize:11,
legend:{show:true},
background:'#FFFFFF',
pixelRatio:_self.pixelRatio,
categories: chartData.categories,
series: chartData.series,
animation: true,
enableScroll: true,
xAxis: {
disableGrid:true,
itemCount:_self.itemCount,
scrollShow:true,
scrollAlign:'right',
},
yAxis: {
//disabled:true
gridType:'dash',
splitNumber:5,
format:(val)=>{return val.toFixed(0)}
},
width: _self.cWidth*_self.pixelRatio,
height: _self.cHeight*_self.pixelRatio,
dataLabel: false,
dataPointShape: true,
extra: {
candle:{
color:{
upLine:'#f04864',
upFill:'#f04864',
downLine:'#2fc25b',
downFill:'#2fc25b'
},
average:{
show:true,
name:['MA5','MA10','MA30'],
day:[5,10,30],
color:['#1890ff', '#2fc25b', '#facc14']
}
},
tooltip:{
bgColor:'#000000',
bgOpacity:0.7,
gridType:'dash',
dashLength:5,
gridColor:'#1890ff',
fontColor:'#FFFFFF',
horizentalLine:true,
xAxisLabel:true,
yAxisLabel:true,
labelBgColor:'#DFE8FF',
labelBgOpacity:0.95,
labelAlign:'left',
labelFontColor:'#666666'
}
},
});
},
touchCandle(e){
canvaCandle.scrollStart(e);
},
moveCandle(e) {
canvaCandle.scroll(e);
},
touchEndCandle(e) {
canvaCandle.scrollEnd(e);
//下面是toolTip事件，如果滚动后不需要显示，可不填写
canvaCandle.showToolTip(e, {
format: function (item, category) {
return category + ' ' + item.name + ':' + item.data
}
});
},
tapButton(type){
let step=5;
if(type=='in'){
_self.itemCount -= step;
if(_self.itemCount<=5){
_self.itemCount=5;
}
}else{
_self.itemCount += step;
if(_self.itemCount>=_self.sliderMax){
_self.itemCount=_self.sliderMax;
}
}
_self.zoomCandle(_self.itemCount);
},
sliderMove(e){
_self.itemCount=e.detail.value;
_self.zoomCandle(e.detail.value);
},
zoomCandle(val) {
canvaCandle.zoom({
itemCount: val
});
}
}
}
</script>
<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
.charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
.qiun-textarea{height: 300upx;}
</style>
```
- uCharts简介
- 图表预览
- 快速上手
- 常见问题
- API参数
- 通用基础配置项
- 数据列表配置项
- 标题配置项
- 坐标轴配置项
- 图例配置项
- 扩展配置项
- 圆弧进度图
- 仪表盘
- 雷达图
- 柱状图
- 饼图圆环图
- 玫瑰图
- 折线图
- 区域图
- K线图
- 词云图
- 漏斗图
- 地图
- 条状图
- 标记线
- ToolTip
- 其他配置
- 方法 & 事件
- 更新图表数据
- 图例点击交互
- 停止动画效果
- 添加移除事件监听
- 获取图表点击序列编号
- 获取图例点击序列编号
- ToolTip方法
- 图表拖拽事件
- 放大或缩小图表
- 图表渲染完成事件
- 入门配置示例
- 图表区域详解
- 绘制X坐标轴网格
- 绘制Y坐标轴网格
- 隐藏X轴（不含网格）
- 隐藏Y轴（不含网格）
- 启用X轴滚动条及拖拽
- 绘制Y轴标题
- 隐藏X轴下方图例
- 隐藏数据点标识
- 隐藏数据点标签
- 进阶配置示例
- ToolTip配置
- uni-app示例
- 饼图
- 饼图基本用法
- 饼图右侧图例
- 圆环图
- 圆环图基本用法
- 玫瑰图
- 玫瑰图基本用法
- 线图
- 线图基本用法
- 柱状图
- 基本柱状图
- 温度计式图表
- 堆叠柱状图
- 横屏模式
- 区域图
- 区域图基本用法
- 雷达图
- 雷达图基本用法
- 圆弧进度图
- 圆弧进度图基本用法
- 整圆进度图基本用法
- 仪表盘
- 仪表盘基本用法
- K线图
- K线图基本用法
- 条状图
- 条状图基本用法
- 混合图
- 混合图基本用法
- 词云图
- 词云图基本用法
- 漏斗图
- 漏斗图基本用法
- 地图
- 地图基本用法
- 更新记录
- 改造uCharts打造专属图表
- uni-app实战教程