uni app 图表

最新推荐文章于 2024-07-08 08:54:52 发布

酷盖机车男

最新推荐文章于 2024-07-08 08:54:52 发布

阅读量487

点赞数

分类专栏： uni-app 文章标签： uni-app echarts javascript

本文链接：https://blog.csdn.net/m0_60053251/article/details/126976891

版权

uni-app 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html id 不能重复 option 为配置项

<view :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
			<view :prop="option2" :change:prop="echarts.updateEcharts" id="echarts2" class="echarts"></view>
			<view :prop="option3" :change:prop="echarts.updateEcharts" id="echarts3" class="echarts"></view>

js 初始化图表需要引入echarts.js文件

下载地址 https://echarts.apache.org/handbook/zh/get-started/

<script module="echarts" lang="renderjs">
let myChart
let myChart1
let myChart3
export default {
	onNavigationBarButtonTap(){
		uni.navigateTo({
			url: "/pages/transaction/groupSelection"
		})
	},
	mounted() {
		if (typeof window.echarts === 'function') {
			this.initEcharts()
		} else {
			// 动态引入较大类库避免影响页面展示
			const script = document.createElement('script')
			// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
			script.src = 'static/echarts.js'
			script.onload = this.initEcharts.bind(this)
			document.head.appendChild(script)
		}
	},
	methods: {
		initEcharts() {
			myChart = echarts.init(document.getElementById('echarts'))
			myChart1 = echarts.init(document.getElementById('echarts2'))
			myChart3 = echarts.init(document.getElementById('echarts3'))

			// 观测更新的数据在 view 层可以直接访问到
			myChart.setOption(this.option)
			myChart1.setOption(this.option2)
			myChart3.setOption(this.option3)
		},
		updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 监听 service 层数据变更
			myChart.setOption(this.option)
			myChart1.setOption(this.option2)
			myChart3.setOption(this.option3)
		}, 
		onClick(event, ownerInstance) {
			// 调用 service 层的方法
			ownerInstance.callMethod('onViewClick', {
				test: 'test'
			})
		}
	}
}
</script>

这里是配置项

// 获取总金额
		getzongMoney() {
			this.option2 = {
				title: {
					text: `近7日交易总金额${this.jiaoyiMoney}`,
					top: 5,
					left: 5,
					textStyle: {
						fontSize: 14
					}
				},
				legend: {
					right: 5,
					top: 5
				},
				xAxis: {
					type: 'category',
					// width:20,
					// boundaryGap: false,
					data: ['09/09', '09/10', '09/11', '09/12'], //数据
					// axisLine: {
					// 	lineStyle: {
					// 		color: '#999'
					// 	}
					// },
					axisTick: {
						length: 3
					}
				},
				yAxis: {
					show: true
				},
				grid: {
					left: '10%',
					right: '10%',
					bottom: '15%',
					top: '25%'
				},
				dataZoom: [
					{
						type: 'inside',
						start: 1,
						end: 200
					}
				], // 收缩
				series: [
					{
						type: 'bar',
						data: ['5', '10', '18', '30'], //数据
						// barWidth: 20,
						// barGap: '1%',
						/*多个并排柱子设置柱子之间的间距*/
						// barCategoryGap: '50%',
						/*多个并排柱子设置柱子之间的间距*/
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						},
						label: {
							show: false,
							position: 'center',
							textStyle: {
								fontSize: 12
							}
						},
						itemStyle: {
							color: '#2c76fd'
						},
						lineStyle: {
							width: 1
						}
					}
				]
			};
		},