## **图表示例** :-:![](https://box.kancloud.cn/acec2ac57a29b49ebd2c8496e8396a82_468x342.gif) ## **标准数据格式** ``` 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> ```