aluminium-trading-uniapp-240925/components/user/visualization.vue

<template>
	<view class="visualization">
		
		<uv-tabs :list="tabs" 
		lineColor="#fff"
		:inactiveStyle="{color : '#aaa', fontSize : '24rpx'}"
		:activeStyle="{color : '#fff', fontSize : '24rpx'}"
		@click="clickTabs"></uv-tabs>
		
		<div class="chartContainer"
		ref="chartContainer"></div>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				tabs : [
					{
						name : '长江现货铝均价',
					},
					{
						name : '国内现货铝均价',
					},
					{
						name : '国外现货铝均价',
					},
					{
						name : '伦敦铝均价',
					},
				],
				series : [
					{
						name: '长江现货铝均价',
						type: 'line',
						data: [],
						smooth: true,
						symbol: 'circle',
						symbolSize: 8,
						itemStyle: {
							color: '#4ECDC4'
						},
						lineStyle: {
							color: '#4ECDC4',
							width: 2
						},
						areaStyle: {
							color: '#4ECDC422'
						},
					},
					{
						name: '国内现货铝均价',
						type: 'line',
						data: [],
						smooth: true,
						symbol: 'circle',
						symbolSize: 8,
						itemStyle: {
							color: '#ff0'
						},
						lineStyle: {
							color: '#ff0',
							width: 2
						},
						areaStyle: {
							color: '#ffff0022'
						},
					},
					{
						name: '国外现货铝均价',
						type: 'line',
						data: [],
						smooth: true,
						symbol: 'circle',
						symbolSize: 8,
						itemStyle: {
							color: '#cd0000'
						},
						lineStyle: {
							color: '#cd0000',
							width: 2
						},
						areaStyle: {
							color: '#cd000022'
						},
					},
					{
						name: '伦敦铝均价',
						type: 'line',
						data: [],
						smooth: true,
						symbol: 'circle',
						symbolSize: 8,
						itemStyle: {
							color: '#c800ff'
						},
						lineStyle: {
							color: '#c800ff',
							width: 2
						},
						areaStyle: {
							color: '#c800ff22'
						},
					},
				],
				dates : [],
				index : 0,
				myChart : null,
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData(){
				this.$api("alpriceNew", res => {
					if(res.code == 200){
						
						let data = res.result
						
						
						this.dates = data[0].map(n => this.$dayjs(n.priceDate)
						.format('MM-DD'))
						
						this.series.forEach((s, i) => {
							if(data[i]){
								s.data = data[i].map(n => n.price)
							}
						})
						
						
						const chartContainer = this.$refs.chartContainer;
						if (!chartContainer) {
							console.error("Chart container not found");
							return;
						}
						
						 
						this.myChart = echarts.init(chartContainer);
						
						this.initChart()
					}
				})
			},
			initChart(data) {
				var that = this;

				let serie = this.series[this.index]

				// 配置 ECharts
				const option = {
					backgroundColor: '#1B263B',
					title: {
						text: `${serie.name} ${serie.data[serie.data.length - 1].toFixed(4)}`,
						right: '10%',
						top: '10%',
						textStyle: {
							color: '#fff',
							fontSize: 12
						}
					},
					// legend: {
					// 	data: ['长江铝现货', '国内现货价', '国外现货价'],
					// 	textStyle: {
					// 		color: '#fff',
					// 		fontSize : '9px'
					// 	},
					// },
					tooltip: {
						trigger: 'axis',
						formatter: '{c0}',
						backgroundColor: '#3A506B',
						textStyle: {
							color: '#fff',
						}
					},
					grid: {
						left: '58px',
						right: '1%',
						bottom: '15%'
					},
					xAxis: {
						type: 'category',
						data: this.dates,
						axisLine: {
							lineStyle: {
								color: '#fff'
							},
						},
						axisLabel: {
							color: '#fff',
							fontSize : '10px',
						}
					},
					yAxis: {
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#fff'
							}
						},
						axisLabel: {
							color: '#fff',
							formatter: function(value) {
								return value;
							}
						}
					},
					series: [this.series[this.index]]
				};
				this.myChart.setOption(option);
			},
			clickTabs(e){
				console.log(e);
				this.index = e.index
				this.initChart()
			},
		},
	}
</script>

<style scoped lang="scss">
.visualization{
	background-color: #1B263B;
	padding: 20rpx 0;
	.chartContainer{
		width: 100%; 
		height: 300px;
	}
}
</style>