动态修改echarts的值,简单易解

uni使用echarts时,动态修改X轴和Y轴的值

首先,本人是菜鸟一枚,自己没事研究一下。大佬有更简单的方式或者方法错误请提出谢谢。
切入正题
使用的是mpvue-echarts插件,请前往https://ext.dcloud.net.cn/plugin?id=46下载
下载玩之后把components中的echarts和mpvue-echarts放在自己项目的components里面
接着引入
import * as echarts from '../../components/echarts/echarts.simple.min.js';
import mpvueEcharts from '../../components/mpvue-echarts/src/echarts.vue'`

页面编辑

<template>
	<view class="table">
		<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
	</view>
</template>
<script>
	import * as echarts from '../../components/echarts/echarts.simple.min.js';
	import mpvueEcharts from '../../components/mpvue-echarts/src/echarts.vue'
	export default {
		components: {
			mpvueEcharts
		},
		data() {
			return {
				echarts: echarts,
				
			}
		},
		onLoad() {

		},
		methods: {
			lineInit(canvas, width, height) {
				// console.log(canvas)
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height,
				})
				canvas.setChart(lineChart)
				let list = ['1', '2', '3', '4']	//模拟请求的数据
				let option = {
					xAxis: {
						type: 'category',
						data: list		//更改为自己上面定义的数据
					},
					yAxis: {
						type: 'value',
						data: []
					},
					grid: {
						left: 10,
						right: 30,
						bottom: 10,
						top: 30,
						containLabel: true
						//left right bottom top 是距离边框的数值
					},
					series: [{
						data: [],
						data: [1,2,3,4],	//此处为y轴数值
						type: 'line',
						color: ['#5eb4e2'], //折线条的颜色
					}]
				}
				lineChart.setOption(option)
				return lineChart
			},
			btn() {

			}
		}
	}
</script>
<style>
	.ec-canvas[data-v-fa0fa476] {
		height: 600rpx;
		width: 100%;
	}
</style>

效果图如下
动态修改echarts的值,简单易解_第1张图片
大佬们有更好的方法请麻烦分享一下 在这跪谢!!!!!

你可能感兴趣的:(笔记,js,json,小程序,web,app)