Vue联动Echarts实现数据大屏展示

2023年6月11日上午5:43 • JavaScript

下面是“Vue联动Echarts实现数据大屏展示”的完整攻略。

一、什么是Vue联动Echarts

Vue是一款流行的前端框架，Echarts是一款流行的数据可视化库。Vue联动Echarts的实现，就是将Vue与Echarts进行结合，实现数据的动态展示和交互。

二、如何实现Vue联动Echarts

1. 引入Echarts

在项目中引入Echarts库，可以通过以下两种方式进行引入：

（1）通过npm安装：

npm install echarts --save

然后在vue组件中引入：

import echarts from 'echarts'

（2）通过cdn引入：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>

2. 创建基础Echarts图表

在Vue组件中，可以通过以下方式进行Echarts图表的创建：

（1）在html中定义一个元素作为图表的容器：

<div id="echarts-container" style="width: 100%;height: 500px;"></div>

（2）在Vue组件的methods中，通过Echarts的API创建图表：

import echarts from 'echarts'

methods: {
  createChart() {
    const myChart = echarts.init(document.getElementById('echarts-container'))
    // 执行接下来的Echarts配置和数据操作...
  }
}

3. 配置Echarts图表

Echarts的图表配置很灵活，可以根据不同的需求进行不同的配置，常见的配置有以下内容：

（1）设置图表的基本信息：

option = {
  title: {
    text: 'Echarts基础例子'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
}

（2）对图表进行进一步设置：

myChart.setOption(option)

4. 实现数据联动

Vue联动Echarts最重要的部分在于实现数据的联动。下面给出两个示例，分别说明如何实现数据联动。

示例1：Echarts中柱状图的点击事件触发Vue组件的数据更新

<template>
  <div>
    <div id="echarts-container" style="width: 100%;height: 500px;"></div>
    <div>
      {{selectedData}}
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'EchartsExample1',
  data() {
    return {
      chartData: {
        categories: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        data: [5, 20, 36, 10, 10, 20]
      },
      selectedData: ''
    }
  },
  methods: {
    createChart() {
      const myChart = echarts.init(document.getElementById('echarts-container'))
      const option = {
        title: {
          text: 'Echarts基础例子'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: this.chartData.categories
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: this.chartData.data
        }]
      }
      myChart.setOption(option)
      myChart.on('click', (params) => {
        this.selectedData = params.name
      })
    }
  },
  mounted() {
    this.createChart()
  },
}
</script>

在上述代码中，我们通过点击柱状图触发了Echarts的点击事件。点击之后，执行methods中的函数，将点击的数据存入Vue组件中的selectedData中，从而实现了Vue组件中的数据更新。

示例2：Vue组件中的输入框的数据更新触发Echarts中数据的更新

<template>
  <div>
    <div>
      <input type="text" v-model="inputData" />
      <button @click="updateData">更新数据</button>
    </div>
    <div id="echarts-container" style="width: 100%;height: 500px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'EchartsExample2',
  data () {
    return {
      inputData: '',
      chartData: {
        categories: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        data: [5, 20, 36, 10, 10, 20]
      }
    }
  },
  methods: {
    createChart() {
      const myChart = echarts.init(document.getElementById('echarts-container'))
      const option = {
        title: {
          text: 'Echarts基础例子'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: this.chartData.categories
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: this.chartData.data
        }]
      }
      myChart.setOption(option)
    },
    updateData () {
      const data = [10, 20, 30, 40, 50, 60]
      this.chartData.data = data
      const myChart = echarts.getInstanceByDom(document.getElementById('echarts-container'))
      myChart.setOption({
        series: [{
          data: data
        }]
      })
    }
  },
  mounted () {
    this.createChart()
  }
}
</script>

在上述代码中，我们定义了一个输入框和一个“更新数据”的按钮。当点击“更新数据”时触发了Vue组件中的updateData()方法，将数据更新至chartData中。随后，我们通过Echarts的API获取到chart容器中关联的myChart实例，使用echarts实例的方法setOption()，更新图表中的数据。