vue中echart数据动态切换，一看就懂

vue中echart数据动态切换

话不多说上效果图
如果觉得是你想要的效果就继续往下看吧。
话不多说直接上源码：

<template>
	<div>
	    
		<div id="list" style="width: 20px;height: 200px;">
			<ul v-for="item in 3" :key="item" @click="changedata(item)">
				<li style="display: inline;"><button>{
    {item}}button>li>
			ul>
		div>
		
		<div id="box" style="width: 500px;height: 500px;">div>
	div>

template>

<script>
	import Vue from 'vue'
	import echarts from 'echarts'
	Vue.use(echarts)
	export default {
      
		data() {
      
			return {
      
				data: [],
				data1: ['700', '800', '900', '1000', '600', '500', '700'],
				data2: ['234','564','349','974','732','324','940'],
				data3: ['632','127','611','993','398','237','1234']
			}
		},
		mounted() {
      
			this.drawLine()
		},
		methods: {
      
			changedata(item){
      
				console.log(item);
				if(item==1){
      
					this.data = this.data1
				    this.drawLine()
				};
				if(item==2){
      
					this.data = this.data2
				    this.drawLine()
				}
				if(item==3){
      
					this.data = this.data3
				    this.drawLine()
				}
			},
			drawLine() {
      
				var myChart = echarts.init(document.getElementById("box"));
				var optoin = {
      
					legend: {
      
						data:['降雨量']
					},
					xAxis: {
      
						type: 'category',
						boundaryGap: false,
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
      
						type: 'value'
					},
					series: [{
      
						data: this.data,
						areaStyle: {
       },
						type: 'line'
					}],
				}
				myChart.setOption(optoin)

			}
		}
	}
script>

<style>
style>

用过echart 的应该都能看懂，没用过的可以直接把代码粘过去看看，我就不一一的注释了。希望对你有帮助：）