1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- <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,
- canvasId: this.id,
- colors: this.color,
- type: 'line',
- fontSize: uni.upx2px(24),
- background:'#FFFFFF',
- pixelRatio: 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',
- scrollColor:'#FA6342',
- },
- 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>
|