图表示例

:-:K线图基本用法 - 图1

标准数据格式

  1. Candle: {
  2.     categories: ['2019/5/5', '2019/5/6', '2019/5/6', '2019/5/8', '2019/5/9', '2019/5/10'],
  3.     series: [{
  4.         name: '上证指数',
  5.         data: [
  6.             [2320.26, 2302.6, 2287.3, 2362.94],
  7.             [2300, 2291.3, 2288.26, 2308.38],
  8.             [2295.35, 2346.5, 2295.35, 2346.92],
  9.             [2347.22, 2358.98, 2337.35, 2363.8],
  10.             [2360.75, 2382.48, 2347.89, 2383.76],
  11.             [2383.43, 2385.42, 2371.23, 2391.82],
  12.             [2377.41, 2419.02, 2369.57, 2421.15]
  13.         ]
  14.     }]
  15. }

K线图data[n]传入顺序：开盘，收盘，最低，最高

调用方法

  1. canvaCandle=new uCharts({
  2.     $this:_self,
  3.     canvasId: canvasId,
  4.     type: 'candle',
  5.     fontSize:11,
  6.     legend:true,
  7.     background:'#FFFFFF',
  8.     pixelRatio:_self.pixelRatio,
  9.     categories: chartData.categories,
  10.     series: chartData.series,
  11.     animation: true,
  12.     enableScroll: true,
  13.     xAxis: {
  14.         disableGrid:true,
  15.         itemCount:_self.itemCount,
  16.         scrollShow:true,
  17.         scrollAlign:'right',
  18.     },
  19.     yAxis: {
  20.         gridType:'dash',
  21.         splitNumber:5,
  22.         format:(val)=>{return val.toFixed(0)}
  23.     },
  24.     width: _self.cWidth*_self.pixelRatio,
  25.     height: _self.cHeight*_self.pixelRatio,
  26.     dataLabel: false,
  27.     dataPointShape: true,
  28.     extra: {
  29.         candle:{
  30.             color:{
  31.                 upLine:'#f04864',
  32.                 upFill:'#f04864',
  33.                 downLine:'#2fc25b',
  34.                 downFill:'#2fc25b'
  35.             },
  36.             average:{
  37.                 show:true,
  38.                 name:['MA5','MA10','MA30'],
  39.                 day:[5,10,30],
  40.                 color:['#1890ff', '#2fc25b', '#facc14']
  41.             }
  42.         },
  43.         tooltip:{
  44.             bgColor:'#000000',
  45.             bgOpacity:0.7,
  46.             gridType:'dash',
  47.             dashLength:5,
  48.             gridColor:'#1890ff',
  49.             fontColor:'#FFFFFF',
  50.             horizentalLine:true,
  51.             xAxisLabel:true,
  52.             yAxisLabel:true,
  53.             labelBgColor:'#DFE8FF',
  54.             labelBgOpacity:0.95,
  55.             labelAlign:'left',
  56.             labelFontColor:'#666666'
  57.         }
  58.     },
  59. });

完整代码示例

  1. <template>
  2.     <view class="qiun-columns">
  3.         <view class="qiun-bg-white qiun-title-bar qiun-common-mt qiun-rows" >
  4.             <view class="qiun-title-dot-light">基本K线图（完善中）</view>
  5.             <view style="flex: 1;qiun-rows;text-align: right;">
  6.                 <button type="default" size="mini" @tap="tapButton('in')">放大</button>
  7.                 <button type="default" size="mini" style="margin-left: 20upx;" @tap="tapButton('out')">缩小</button>
  8.             </view>
  9.         </view>
  10.         <view class="qiun-charts">
  11.             <canvas canvas-id="canvasCandle" id="canvasCandle" class="charts" disable-scroll=true @touchstart="touchCandle" @touchmove="moveCandle" @touchend="touchEndCandle"></canvas>
  12.         </view>
  13.         <view class="qiun-padding qiun-bg-white ">
  14.             <slider :value="itemCount" min="5" :max="sliderMax" block-color="#f8f8f8" block-size="18" @changing="sliderMove" @change="sliderMove"/>
  15.         </view>
  16.     </view>
  17. </template>
  19. <script>
  20.     import uCharts from '@/components/u-charts/u-charts.js';
  21.     var _self;
  22.     var canvaCandle=null;
  24.     export default {
  25.         data() {
  26.             return {
  27.                 cWidth:'',
  28.                 cHeight:'',
  29.                 pixelRatio:1,
  30.                 itemCount:20,//x轴单屏数据密度
  31.                 sliderMax:50,
  32.             }
  33.         },
  34.         onLoad() {
  35.             _self = this;
  36.             this.cWidth=uni.upx2px(750);
  37.             this.cHeight=uni.upx2px(500);
  38.             this.getServerData();
  39.         },
  40.         methods: {
  41.             getServerData(){
  42.                 uni.request({
  43.                     url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
  44.                     data:{
  45.                     },
  46.                     success: function(res) {
  47.                         console.log(res.data.data)
  48.                         let Candle={categories:[],series:[]};
  49.                         //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
  50.                         Candle.categories=res.data.data.Candle.categories;
  51.                         Candle.series=res.data.data.Candle.series;
  52.                         _self.showCandle("canvasCandle",Candle);
  53.                     },
  54.                     fail: () => {
  55.                         _self.tips="网络错误，小程序端请检查合法域名";
  56.                     },
  57.                 });
  58.             },
  59.             showCandle(canvasId,chartData){
  60.                 canvaCandle=new uCharts({
  61.                     $this:_self,
  62.                     canvasId: canvasId,
  63.                     type: 'candle',
  64.                     fontSize:11,
  65.                     legend:true,
  66.                     background:'#FFFFFF',
  67.                     pixelRatio:_self.pixelRatio,
  68.                     categories: chartData.categories,
  69.                     series: chartData.series,
  70.                     animation: true,
  71.                     enableScroll: true,
  72.                     xAxis: {
  73.                         disableGrid:true,
  74.                         itemCount:_self.itemCount,
  75.                         scrollShow:true,
  76.                         scrollAlign:'right',
  77.                     },
  78.                     yAxis: {
  79.                         //disabled:true
  80.                         gridType:'dash',
  81.                         splitNumber:5,
  82.                         format:(val)=>{return val.toFixed(0)}
  83.                     },
  84.                     width: _self.cWidth*_self.pixelRatio,
  85.                     height: _self.cHeight*_self.pixelRatio,
  86.                     dataLabel: false,
  87.                     dataPointShape: true,
  88.                     extra: {
  89.                         candle:{
  90.                             color:{
  91.                                 upLine:'#f04864',
  92.                                 upFill:'#f04864',
  93.                                 downLine:'#2fc25b',
  94.                                 downFill:'#2fc25b'
  95.                             },
  96.                             average:{
  97.                                 show:true,
  98.                                 name:['MA5','MA10','MA30'],
  99.                                 day:[5,10,30],
  100.                                 color:['#1890ff', '#2fc25b', '#facc14']
  101.                             }
  102.                         },
  103.                         tooltip:{
  104.                             bgColor:'#000000',
  105.                             bgOpacity:0.7,
  106.                             gridType:'dash',
  107.                             dashLength:5,
  108.                             gridColor:'#1890ff',
  109.                             fontColor:'#FFFFFF',
  110.                             horizentalLine:true,
  111.                             xAxisLabel:true,
  112.                             yAxisLabel:true,
  113.                             labelBgColor:'#DFE8FF',
  114.                             labelBgOpacity:0.95,
  115.                             labelAlign:'left',
  116.                             labelFontColor:'#666666'
  117.                         }
  118.                     },
  119.                 });
  121.             },
  122.             touchCandle(e){
  123.                 canvaCandle.scrollStart(e);
  124.             },
  125.             moveCandle(e) {
  126.                 canvaCandle.scroll(e);
  127.             },
  128.             touchEndCandle(e) {
  129.                 canvaCandle.scrollEnd(e);
  130.                 //下面是toolTip事件，如果滚动后不需要显示，可不填写
  131.                 canvaCandle.showToolTip(e, {
  132.                     format: function (item, category) {
  133.                         return category + ' ' + item.name + ':' + item.data 
  134.                     }
  135.                 });
  136.             },
  137.             tapButton(type){
  138.                 let step=5;
  139.                 if(type=='in'){
  140.                     _self.itemCount -= step;
  141.                     if(_self.itemCount<=5){
  142.                         _self.itemCount=5;
  143.                     }
  144.                 }else{
  145.                     _self.itemCount += step;
  146.                     if(_self.itemCount>=_self.sliderMax){
  147.                         _self.itemCount=_self.sliderMax;
  148.                     }
  149.                 }
  150.                 _self.zoomCandle(_self.itemCount);
  151.             },
  152.             sliderMove(e){
  153.                 _self.itemCount=e.detail.value;
  154.                 _self.zoomCandle(e.detail.value);
  155.             },
  156.             zoomCandle(val) {
  157.                 canvaCandle.zoom({
  158.                     itemCount: val
  159.                 });
  160.             }
  161.         }
  162.     }
  163. </script>
  165. <style>
  166.     /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
  167.     .qiun-charts {
  168.         width: 750upx;
  169.         height: 500upx;
  170.         background-color: #FFFFFF;
  171.     }
  173.     .charts {
  174.         width: 750upx;
  175.         height: 500upx;
  176.         background-color: #FFFFFF;
  177.     }
  178.     .qiun-textarea{height: 300upx;}
  179. </style>