## **图表示例** :-: ![](https://box.kancloud.cn/3f51d08ce47f621442c8bcca7becb536_468x345.gif) ## **标准数据格式** ``` chartData: { "categories": ["2012", "2013", "2014", "2015", "2016", "2017"], "series": [{ "name": "曲面", "data": [70, 50, 85, 130, 64, 88], "type": "area", "style": "curve" }, { "name": "柱1", "data": [40, 30, 55, 110, 24, 58], "type": "column" }, { "name": "柱2", "data": [50, 20, 75, 60, 34, 38], "type": "column" }, { "name": "曲线", "data": [70, 50, 85, 130, 64, 88], "type": "line", "style": "curve", "color": "#1890ff" }, { "name": "折线", "data": [120, 140, 105, 170, 95, 160], "type": "line", "color": "#2fc25b" }, { "name": "点", "data": [100, 80, 125, 150, 112, 132], "type": "point", "color": "#f04864" }] } ``` ## **调用方法** ``` canvaMix = new uCharts({ $this:this, canvasId: canvasId, type: 'mix', fontSize:11, legend:{show:true}, background:'#FFFFFF', pixelRatio:1, categories: chartData.categories, series: chartData.series, animation: true, enableScroll: true,//开启图表拖拽功能 xAxis: { disableGrid:false, type:'grid', gridType:'dash', itemCount:4, scrollShow:true, scrollAlign:'left', }, yAxis: { gridType:'dash', splitNumber:5, min:10, max:180, format:(val)=>{return val.toFixed(0)} }, width: this.cWidth, height: this.cHeight, dataLabel: true, dataPointShape: true, extra: { tooltip:{ bgColor:'#000000', bgOpacity:0.7, gridType:'dash', dashLength:8, 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" > <view class="qiun-title-dot-light">混合图</view> </view> <view class="qiun-charts" > <canvas canvas-id="canvasMix" id="canvasMix" class="charts" disable-scroll=true @touchstart="touchMix" @touchmove="moveMix" @touchend="touchEndMix"></canvas> </view> </view> </template> <script> import uCharts from '@/components/u-charts/u-charts.js'; var _self; var canvaMix=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 Mix={categories:[],series:[]}; //这里我后台返回的是数组,所以用等于,如果您后台返回的是单条数据,需要push进去 Mix.categories=res.data.data.Mix.categories; Mix.series=res.data.data.Mix.series; _self.showMix("canvasMix",Mix); }, fail: () => { _self.tips="网络错误,小程序端请检查合法域名"; }, }); }, showMix(canvasId,chartData){ canvaMix=new uCharts({ $this:_self, canvasId: canvasId, type: 'mix', fontSize:11, legend:{show:true}, background:'#FFFFFF', pixelRatio:_self.pixelRatio, categories: chartData.categories, series: chartData.series, animation: true, enableScroll: true,//开启图表拖拽功能 xAxis: { disableGrid:false, type:'grid', gridType:'dash', itemCount:4, scrollShow:true, scrollAlign:'left', }, yAxis: { gridType:'dash', splitNumber:5, min:10, max:180, format:(val)=>{return val.toFixed(0)} }, width: _self.cWidth*_self.pixelRatio, height: _self.cHeight*_self.pixelRatio, dataLabel: true, dataPointShape: true, extra: { tooltip:{ bgColor:'#000000', bgOpacity:0.7, gridType:'dash', dashLength:8, gridColor:'#1890ff', fontColor:'#FFFFFF', horizentalLine:true, xAxisLabel:true, yAxisLabel:true, labelBgColor:'#DFE8FF', labelBgOpacity:0.95, labelAlign:'left', labelFontColor:'#666666' } }, }); }, touchMix(e){ canvaMix.scrollStart(e); }, moveMix(e) { canvaMix.scroll(e); }, touchEndMix(e) { canvaMix.scrollEnd(e); //下面是toolTip事件,如果滚动后不需要显示,可不填写 canvaMix.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> ```