图表示例

混合图基本用法 - 图1

标准数据格式

  1. Mix: {
  2.     "categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
  3.     "series": [{
  4.         "name": "曲面",
  5.         "data": [70, 50, 85, 130, 64, 88],
  6.         "type": "area",
  7.         "style": "curve"
  8.     }, {
  9.         "name": "柱1",
  10.         "data": [40, 30, 55, 110, 24, 58],
  11.         "type": "column"
  12.     }, {
  13.         "name": "柱2",
  14.         "data": [50, 20, 75, 60, 34, 38],
  15.         "type": "column"
  16.     }, {
  17.         "name": "曲线",
  18.         "data": [70, 50, 85, 130, 64, 88],
  19.         "type": "line",
  20.         "style": "curve",
  21.         "color": "#1890ff"
  22.     }, {
  23.         "name": "折线",
  24.         "data": [120, 140, 105, 170, 95, 160],
  25.         "type": "line",
  26.         "color": "#2fc25b"
  27.     }, {
  28.         "name": "点",
  29.         "data": [100, 80, 125, 150, 112, 132],
  30.         "type": "point",
  31.         "color": "#f04864"
  32.     }]
  33. }

调用方法

  1. canvaMix=new uCharts({
  2.     $this:_self,
  3.     canvasId: canvasId,
  4.     type: 'mix',
  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:false,
  15.         type:'grid',
  16.         gridType:'dash',
  17.         itemCount:4,
  18.         scrollShow:true,
  19.         scrollAlign:'left',
  20.     },
  21.     yAxis: {
  22.         gridType:'dash',
  23.         splitNumber:5,
  24.         min:10,
  25.         max:180,
  26.         format:(val)=>{return val.toFixed(0)}
  27.     },
  28.     width: _self.cWidth*_self.pixelRatio,
  29.     height: _self.cHeight*_self.pixelRatio,
  30.     dataLabel: true,
  31.     dataPointShape: true,
  32.     extra: {
  33.         tooltip:{
  34.             bgColor:'#000000',
  35.             bgOpacity:0.7,
  36.             gridType:'dash',
  37.             dashLength:8,
  38.             gridColor:'#1890ff',
  39.             fontColor:'#FFFFFF',
  40.             horizentalLine:true,
  41.             xAxisLabel:true,
  42.             yAxisLabel:true,
  43.             labelBgColor:'#DFE8FF',
  44.             labelBgOpacity:0.95,
  45.             labelAlign:'left',
  46.             labelFontColor:'#666666'
  47.         }
  48.     },
  49. });

完整代码示例

  1. <template>
  2.     <view class="qiun-columns">
  3.         <view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
  4.             <view class="qiun-title-dot-light">混合图</view>
  5.         </view>
  6.         <view class="qiun-charts" >
  7.             <canvas canvas-id="canvasMix" id="canvasMix" class="charts" disable-scroll=true @touchstart="touchMix" @touchmove="moveMix" @touchend="touchEndMix"></canvas>
  8.         </view>
  9.     </view>
  10. </template>
  12. <script>
  13.     import uCharts from '@/components/u-charts/u-charts.js';
  14.     var _self;
  15.     var canvaMix=null;
  17.     export default {
  18.         data() {
  19.             return {
  20.                 cWidth:'',
  21.                 cHeight:'',
  22.                 pixelRatio:1,
  23.             }
  24.         },
  25.         onLoad() {
  26.             _self = this;
  27.             this.cWidth=uni.upx2px(750);
  28.             this.cHeight=uni.upx2px(500);
  29.             this.getServerData();
  30.         },
  31.         methods: {
  32.             getServerData(){
  33.                 uni.request({
  34.                     url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2',
  35.                     data:{
  36.                     },
  37.                     success: function(res) {
  38.                         console.log(res.data.data)
  39.                         let Mix={categories:[],series:[]};
  40.                         //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
  41.                         Mix.categories=res.data.data.Mix.categories;
  42.                         Mix.series=res.data.data.Mix.series;
  43.                         _self.showMix("canvasMix",Mix);
  44.                     },
  45.                     fail: () => {
  46.                         _self.tips="网络错误，小程序端请检查合法域名";
  47.                     },
  48.                 });
  49.             },
  50.             showMix(canvasId,chartData){
  51.                 canvaMix=new uCharts({
  52.                     $this:_self,
  53.                     canvasId: canvasId,
  54.                     type: 'mix',
  55.                     fontSize:11,
  56.                     legend:true,
  57.                     background:'#FFFFFF',
  58.                     pixelRatio:_self.pixelRatio,
  59.                     categories: chartData.categories,
  60.                     series: chartData.series,
  61.                     animation: true,
  62.                     enableScroll: true,//开启图表拖拽功能
  63.                     xAxis: {
  64.                         disableGrid:false,
  65.                         type:'grid',
  66.                         gridType:'dash',
  67.                         itemCount:4,
  68.                         scrollShow:true,
  69.                         scrollAlign:'left',
  70.                     },
  71.                     yAxis: {
  72.                         gridType:'dash',
  73.                         splitNumber:5,
  74.                         min:10,
  75.                         max:180,
  76.                         format:(val)=>{return val.toFixed(0)}
  77.                     },
  78.                     width: _self.cWidth*_self.pixelRatio,
  79.                     height: _self.cHeight*_self.pixelRatio,
  80.                     dataLabel: true,
  81.                     dataPointShape: true,
  82.                     extra: {
  83.                         tooltip:{
  84.                             bgColor:'#000000',
  85.                             bgOpacity:0.7,
  86.                             gridType:'dash',
  87.                             dashLength:8,
  88.                             gridColor:'#1890ff',
  89.                             fontColor:'#FFFFFF',
  90.                             horizentalLine:true,
  91.                             xAxisLabel:true,
  92.                             yAxisLabel:true,
  93.                             labelBgColor:'#DFE8FF',
  94.                             labelBgOpacity:0.95,
  95.                             labelAlign:'left',
  96.                             labelFontColor:'#666666'
  97.                         }
  98.                     },
  99.                 });
  100.             },
  101.             touchMix(e){
  102.                 canvaMix.scrollStart(e);
  103.             },
  104.             moveMix(e) {
  105.                 canvaMix.scroll(e);
  106.             },
  107.             touchEndMix(e) {
  108.                 canvaMix.scrollEnd(e);
  109.                 //下面是toolTip事件，如果滚动后不需要显示，可不填写
  110.                 canvaMix.showToolTip(e, {
  111.                     format: function (item, category) {
  112.                         return category + ' ' + item.name + ':' + item.data 
  113.                     }
  114.                 });
  115.             }
  116.         }
  117.     }
  118. </script>
  120. <style>
  121.     /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
  122.     .qiun-charts {
  123.         width: 750upx;
  124.         height: 500upx;
  125.         background-color: #FFFFFF;
  126.     }
  128.     .charts {
  129.         width: 750upx;
  130.         height: 500upx;
  131.         background-color: #FFFFFF;
  132.     }
  133. </style>