|
坐标轴配置canvas组件配置完整示例
坐标轴配置enableScroll: true,//开启图表拖拽功能xAxis: { type:'grid', gridType:'dash', itemCount:4,//x轴单屏显示数据的数量，默认为5个 scrollShow:true,//新增是否显示滚动条，默认false scrollAlign:'left',//滚动条初始位置 scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF scrollColor:'#DEE7F7',//默认为 #A6A6A6}
canvas组件配置
完整示例 基本折线图 import uCharts from '@/components/u-charts/u-charts.js'; var _self; var canvaLineA=null; /*下面是服务器返回的数据格式 var Data={ "LineA": { "categories": ["2012", "2013", "2014", "2015", "2016", "2017"], "series": [{ "name": "成交量A", "data": [35, 8, 25, 37, 4, 20] }, { "name": "成交量B", "data": [70, 40, 65, 100, 44, 68] }, { "name": "成交量C", "data": [100, 80, 95, 150, 112, 132] }] } } */ export default { data() { return { cWidth:'', cHeight:'', pixelRatio:1, serverData:'', } }, onLoad() { _self = this; this.cWidth=uni.upx2px(750); this.cHeight=uni.upx2px(500); this.getServerData(); }, methods: { getServerData(){ uni.request({ url: 'https://www.easy-mock.com/mock/5cc586b64fc5576cba3d647b/uni-wx-charts/chartsdata2', data:{ }, success: function(res) { console.log(res.data.data) //下面这个根据需要保存后台数据，我是为了模拟更新柱状图，所以存下来了 _self.serverData=res.data.data; let LineA={categories:[],series:[]}; //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去 LineA.categories=res.data.data.LineA.categories; LineA.series=res.data.data.LineA.series; _self.showLineA("canvasLineA",LineA); }, fail: () => { _self.tips="网络错误，小程序端请检查合法域名"; }, }); }, showLineA(canvasId,chartData){ canvaLineA=new uCharts({ $this:_self, canvasId: canvasId, type: 'line', fontSize:11, legend:true, dataLabel:true, dataPointShape:true, background:'#FFFFFF', pixelRatio:_self.pixelRatio, categories: chartData.categories, series: chartData.series, animation: false, enableScroll: true,//开启图表拖拽功能 xAxis: { disableGrid:false, type:'grid', gridType:'dash', itemCount:4, scrollShow:true, scrollAlign:'left', scrollBackgroundColor:'#F7F7FF', scrollColor:'#DEE7F7', }, yAxis: { //disabled:true gridType:'dash', splitNumber:8, min:10, max:180, format:(val)=>{return val.toFixed(0)+'元'} }, width: _self.cWidth*_self.pixelRatio, height: _self.cHeight*_self.pixelRatio, extra: { lineStyle: 'straight' }, }); }, touchLineA(e){ canvaLineA.scrollStart(e); }, moveLineA(e) { canvaLineA.scroll(e); }, touchEndLineA(e) { canvaLineA.scrollEnd(e); //下面是toolTip事件，如果滚动后不需要显示，可不填写 canvaLineA.showToolTip(e, { format: function (item, category) { return category + ' ' + item.name + ':' + item.data } }); }, } }page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}.qiun-padding{padding:2%; width:96%;}.qiun-wrap{display:flex; flex-wrap:wrap;}.qiun-rows{display:flex; flex-direction:row !important;}.qiun-columns{display:flex; flex-direction:column !important;}.qiun-common-mt{margin-top:10upx;}.qiun-bg-white{background:#FFFFFF;}.qiun-title-bar{width:96%; padding:10upx 2%; flex-wrap:nowrap;}.qiun-title-dot-light{border-left: 10upx solid #0ea391; padding-left: 10upx; font-size: 32upx;color: #000000}.qiun-charts{width: 750upx; height:500upx;background-color: #FFFFFF;}.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
|