123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <template>
- <view class="chart-line">
- <canvas canvas-id="line" id="line" class="chart" disable-scroll="true" @touchstart="touchLine" @touchmove="moveLine" @touchend="touchEndLine"></canvas>
- </view>
- </template>
- <script>
- import uCharts from './js/u-charts.js';
- export default {
- props: {
- unit: String,
- color: String,
- chartData: Object,
- background: String
- },
- watch: {
- chartData() {
- this.draw(this.chartData);
- }
- },
- methods: {
- draw(data) {
- console.log(data.series, 1111);
- this.line = new uCharts({
- $this: this,
- type: 'line',
- canvasId: 'line',
- colors: [this.color ? this.color : '#F76454'],
- width: uni.upx2px(688),
- height: uni.upx2px(567),
- fontSize: uni.upx2px(28),
- enableScroll: true,
- enableMarkLine: true,
- animation: true,
- legend: {
- show: true
- },
- extra: {
- line: {
- type: 'curve',
- width: uni.upx2px(5)
- }
- },
- dataLabel: false,
- dataPointShape: true,
- dataPointShapeType: 'solid',
- background: this.background,
- categories: data.categories,
- series: data.series,
- xAxis: {
- type: 'grid',
- itemCount: 5,
- scrollShow: true,
- disableGrid: true,
- scrollAlign: 'right',
- fontColor: this.color,
-
- scrollColor: this.color,
- axisLineColor: '#CCCCCC',
- scrollBackgroundColor: this.background,
- disabled: false,
-
- format: v=>{
- var date = new Date(v);
- return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;
- }
- },
- yAxis: {
- min: 0,
- disabled: false,
- format: val => {
- return val;
- },
- gridColor: '#ccc',
- max: Math.max.apply(Math, data.series[0].data) + 123,
- gridType: 'dash'
- }
- });
- },
- touchLine(e) {
- this.line.scrollStart(e);
- },
- moveLine(e) {
- this.line.scroll(e);
- },
- touchEndLine(e) {
- this.line.scrollEnd(e);
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .chart-line {
- width: 100%;
- height: 100%;
- position: relative;
- .chart {
- width: 100%;
- height: 100%;
- }
- }
- </style>
|