<template> <view class="ucharts-line"> <canvas disable-scroll=true @touchstart="touchLine" @touchmove="moveLine" @touchend="touchEndLine" :canvas-id="id" :id="id" :style="{'width':cWidth+'px','height':cHeight+'px'}"></canvas> </view> </template> <script> import uCharts from '../common/js/u-charts.js' let canvaLine = null export default { props: { chartData: Object }, data() { return { id: 'ucharts-line', cWidth:'', cHeight:'', color: ['#FA6342'], total: 0 } }, created () { this.cWidth= uni.upx2px(568); this.cHeight= uni.upx2px(405); }, mounted () { canvaLine = new uCharts({ $this: this, //传入this canvasId: this.id, //传入id colors: this.color, //颜色 type: 'line', //类型折线图 fontSize: uni.upx2px(24), //字体大小 background:'#FFFFFF', //背景色 pixelRatio: 1, //像素比,默认为1,仅支付宝小程序需要大于1,其他平台必须为1 animation: true, //展示动画 padding: [4, 0, 0, 0], enableScroll: true,//开启图表拖拽功能 categories: this.chartData.categories, series: this.chartData.series, //数据 extra: { line: { type: 'curve', width: uni.upx2px(8) } }, width: this.cWidth, //图表宽 height: this.cHeight, //图表高 legend:{ //不显示图例 show: false }, dataLabel: true, //显示数据 dataPointShapeType: 'hollow', addPoint: true, xAxis: { disableGrid: false, type: 'grid', gridColor: '#E6E6E6', fontColor: '#666666', boundaryGap: 'justify', axisLineColor: '#0065FF', itemCount: 7, labelCount: 8, scrollShow: true, scrollAlign: 'right', scrollBackgroundColor:'#F7F7FF',//可不填写,配合enableScroll图表拖拽功能使用,X轴滚动条背景颜色,默认为 #EFEBEF scrollColor:'#FA6342',//可不填写,配合enableScroll图表拖拽功能使用,X轴滚动条颜色,默认为 #A6A6A6 }, yAxis: { splitNumber: 4, gridColor: '#E6E6E6', fontSize: uni.upx2px(12), min: 0, max: 40, axisLineColor: '#E6E6E6', } }) }, methods: { touchLine (e) { canvaLine.scrollStart(e) }, moveLine (e) { canvaLine.scroll(e) }, touchEndLine (e) { canvaLine.scrollEnd(e) } } } </script> <style lang="scss" scoped> .ucharts-line { width: 100%; height: auto; } </style>