123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232 |
- <template>
- <view class="line_chart">
- <canvas
- :canvasId="canvasId"
- id="canvasId"
- disable-scroll="true"
- :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
- @touchstart="touchstart"
- @touchmove="touchmove"
- @touchend="touchend"
- />
- <slot />
- </view>
- </template>
- <script>
- import uCharts from '@/plugins/stan-ucharts/u-charts/u-charts.js';
- const lineCharts = {},
- optionAs = {};
- export default {
- name: 'LineChart',
- props: {
- dataAs: {
-
- type: Object,
- default: () => ({})
- },
- basicAs: {
-
- type: Object,
- default: () => ({})
- },
- xAxisAs: {
-
- type: Object,
- default: () => ({})
- },
- yAxisAs: {
-
- type: Object,
- default: () => ({})
- },
- legendAs: {
-
- type: Object,
- default: () => ({})
- },
- extraAs: {
-
- type: Object,
- default: () => ({})
- },
- width: {
-
- type: Number,
- default: 750
- },
- height: {
-
- type: Number,
- default: 500
- },
- labelKey: {
- type: String,
- default: 'categories'
- },
- valueKey: {
- type: String,
- default: 'series'
- },
- canvasId: {
- type: String,
- default: `line_canvas_${Math.ceil(Math.random(5) * 10000)}`
- }
- },
- data() {
- return {};
- },
- computed: {
- cWidth() {
- return uni.upx2px(this.width);
- },
- cHeight() {
- return uni.upx2px(this.height);
- }
- },
- methods: {
- showCharts() {
- let defaultOption = {
-
- $this: this,
- canvasId: this.canvasId,
- type: 'line',
- padding: [15, 15, 0, 15],
- colors: ['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d'],
- rotate: false,
- rotateLock: true,
- enableScroll: true,
- enableMarkLine: false,
- animation: true,
- dataLabel: true,
- dataPointShape: true,
- duration: 1000,
- fontSize: 12,
- background: '#ffffff',
- pixelRatio: 1,
- width: this.cWidth,
- height: this.cHeight,
-
- categories: this.dataAs[this.labelKey],
- series: this.dataAs[this.valueKey],
-
- xAxis: {
-
- type: 'grid',
- rotateLabel: true,
- itemCount: 5,
-
- scrollShow: true,
- scrollAlign: 'left',
- scrollBackgroundColor: '#EFEBEF',
- scrollColor: '#A6A6A6',
- disabled: false,
- disableGrid: true,
- calibration: true,
- gridColor: '#cccccc',
- gridType: 'dash',
- gridEval: 1,
- dashLength: 4,
- fontColor: '#666666',
- boundaryGap: 'center',
- axisLine: false,
- axisLineColor: '#cccccc'
-
- },
- yAxis: {
-
- disabled: false,
- position: 'left',
- format: val => {
- let defaultSetting = { type: 'number', fixed: 0, name: '' };
- let { type, fixed, name } = this.yAxisAs && this.yAxisAs.formatter ? Object.assign(defaultSetting, this.yAxisAs.formatter) : defaultSetting;
- if (type == 'number') {
- return val.toFixed(fixed) + name;
- } else if (type == 'percent') {
- let newName = name || '%';
- return (val * 100).toFixed(fixed) + newName;
- } else {
- return val.toFixed(0);
- }
- }
-
-
- },
-
- legend: {
- show: true,
- position: 'top',
- float: 'left',
- padding: 10,
- margin: 0
-
-
-
-
-
-
-
- },
-
- extra: {
- line: {
- type: 'straight'
- }
- }
- };
- optionAs[this.canvasId] = Object.assign(defaultOption, this.basicAs, this.xAxisAs, this.yAxisAs, this.legendAs, this.extraAs);
- lineCharts[this.canvasId] = new uCharts(optionAs[this.canvasId]);
- },
- touchstart(e) {
- let that = this;
- lineCharts[this.canvasId].touchLegend(e, { animation: false });
- lineCharts[this.canvasId].scrollStart(e);
- lineCharts[this.canvasId].showToolTip(e, {
-
- format: function(item, category) {
- let defaultSetting = { type: 'number', fixed: 0, name: '' };
- let newName;
- let { type, fixed, name } = that.yAxisAs && that.yAxisAs.formatter ? Object.assign(defaultSetting, that.yAxisAs.formatter) : defaultSetting;
- if (typeof item.data === 'object') {
- if (type == 'number') {
- return `${category} ${item.name}:${item.data.value.toFixed(fixed)}${name}`;
- } else if (type == 'percent') {
- newName = name || '%';
- return `${category} ${item.name}:${(item.data.value * 100).toFixed(fixed)}${newName}`;
- } else {
- return `${category} ${item.name}:${item.data.value}`;
- }
- } else {
- if (type == 'number') {
- return `${category} ${item.name}:${item.data.toFixed(fixed)}${name}`;
- } else if (type == 'percent') {
- newName = name || '%';
- return `${category} ${item.name}:${(item.data * 100).toFixed(fixed)}${newName}`;
- } else {
- return `${category} ${item.name}:${item.data}`;
- }
- }
- }
- });
- },
- touchmove(e) {
- lineCharts[this.canvasId].scroll(e);
- },
- touchend(e) {
- lineCharts[this.canvasId].scrollEnd(e);
- },
- changeData({ series, categories }) {
- lineCharts[this.canvasId].updateData({
- series,
- categories
- });
- }
- }
- };
- </script>
- <style></style>
|