xpl/components/mchart.vue

<template>
	<view class="content">
		<scroll-view scroll-x="true" class="box" v-if="istrue">
			<view class="tu" :style="{'width': boxwidth}">
				<qiun-data-charts type="area" :chart-data="chartData" echartsApp />
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { lalaprice } from '@/api/wallet.js';
export default {
	data() {
		return {
			boxwidth:'',
			istrue: false,
			chartData: {
				categories: [],
				series: [
					{
						name: 'LALA价格走势图',
						data: []
					}
				]
			}
		};
	},

	mounted() {
		console.log(this.chartData, '渲染完毕');
		this.createChart();
	},
	methods: {
		createChart() {
			lalaprice()
				.then(e => {
					console.log(e.data, '123456');
					this.chart_data = e.data
					this.boxwidth = e.data.length *150 + 'rpx';
					// this.$set(this,'boxwidth',e.data.length *150 + 'rpx')
					console.log(this.boxwidth,"宽度")
					let time = e.data.map(item => {
						return item.date;
					});
					console.log(time);

					this.$set(this.chartData, 'categories', time.reverse());

					let val = e.data.map(item => {
						return +item.lala_price;
					});

					console.log(val);
					this.$set(this.chartData.series[0], 'data', val.reverse());
					this.istrue = true;
				})
				.catch(E => {
					console.log(E);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 750rpx;
	height: 500rpx;
}

.line-chart {
	height: 500rpx;
	width: 730rpx;
	margin: auto;
	background-color: #eee;
}
.box {
	height: 500rpx;
}
.tu {
	height: 500rpx;
}
</style>