Vue2中使用Echarts

1.安装echarts

在项目根目录下，使用npm或yarn安装ECharts：

npm install echarts --save

或者

yarn add echarts

2.在相应的vue页面中引入echarts

<script>
import * as echarts from "echarts";
</script>

3.代码解析

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'MyChart',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 获取DOM元素
      const chartDom = this.$refs.chart;
      
      // 初始化ECharts实例
      const myChart = echarts.init(chartDom);

      // 配置图表选项
      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用配置项显示图表
      myChart.setOption(option);
    }
  }
};
</script>

1.定义了一个用于渲染图表的DOM元素。

<div ref="chart" style="width: 600px; height: 400px;"></div>

2.生命周期钩子用于在组件挂载后初始化图表。

mounted() {
    this.initChart();
  },

3.initChart() 方法用于初始化ECharts实例并设置图表配置。

获取DOM元素

const chartDom = this.$refs.chart;

• this.$refs.chart 是 Vue 中通过 ref 属性获取 DOM 元素的方式。

• 在模板中，<div ref="chart"></div> 定义了一个 DOM 元素，this.$refs.chart 就是对这个元素的引用。

• 这个 DOM 元素将作为 ECharts 图表的容器。

初始化 ECharts 实例

const myChart = echarts.init(chartDom);

• echarts.init(chartDom) 是 ECharts 的初始化方法，它会将 chartDom 元素初始化为一个 ECharts 实例。

• myChart 是 ECharts 实例的引用，后续可以通过它来操作图表（例如更新数据、调整配置等）。

配置图表选项

const option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};

• option 是 ECharts 的配置对象，用于定义图表的外观和行为。

• title ：图表的标题，text 属性设置标题内容。

• tooltip：提示框组件，当鼠标悬停在图表上时会显示提示信息。

• xAxis ：X 轴配置，data 属性设置 X 轴的数据项（这里是商品的名称）。

• yAxis：Y 轴配置，这里没有额外配置，ECharts 会自动根据数据生成 Y 轴。

• series：系列列表，每个系列代表一组数据。

  • name：系列的名称，会显示在图例和提示框中。

  • type：图表的类型，这里是柱状图（bar）。

  • data：系列的数据，对应 Y 轴的值。

使用配置项显示图表

myChart.setOption(option);

• myChart.setOption(option) 将配置对象 option 应用到 ECharts 实例中，从而渲染出图表。

• 这一步是必须的，否则图表不会显示。

4.后端获取数据如何在echarts中使用

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';

export default {
  name: 'MyChart',
  data() {
    return {
      myChart: null, // 用于保存 ECharts 实例
      xAxisData: [], // X 轴数据
      yAxisData: []  // Y 轴数据
    };
  },
  mounted() {
    this.initChart();
    this.fetchData(); // 组件挂载后获取数据
  },
  methods: {
    // 初始化图表
    initChart() {
      const chartDom = this.$refs.chart;
      this.myChart = echarts.init(chartDom);
    },

    // 从后端获取数据
    async fetchData() {
      try {
        // 发送请求获取数据
        const response = await axios.get('https://api.example.com/chart-data');
        const data = response.data;

        // 更新 X 轴和 Y 轴数据
        this.xAxisData = data.xAxis;
        this.yAxisData = data.yAxis;

        // 更新图表
        this.updateChart();
      } catch (error) {
        console.error('Failed to fetch data:', error);
      }
    },

    // 更新图表
    updateChart() {
      if (this.myChart) {
        const option = {
          title: {
            text: '动态数据示例'
          },
          tooltip: {},
          xAxis: {
            data: this.xAxisData // 使用从后端获取的 X 轴数据
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: this.yAxisData // 使用从后端获取的 Y 轴数据
            }
          ]
        };

        // 使用配置项显示图表
        this.myChart.setOption(option);
      }
    }
  },
  beforeDestroy() {
    // 销毁 ECharts 实例
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
};
</script>

数据定义

data() {
  return {
    myChart: null, // 用于保存 ECharts 实例
    xAxisData: [], // X 轴数据
    yAxisData: []  // Y 轴数据
  };
}

• myChart：用于保存 ECharts 实例，方便后续操作。

• xAxisData 和 yAxisData：分别用于存储从后端获取的 X 轴和 Y 轴数据。

初始化图表

initChart() {
  const chartDom = this.$refs.chart;
  this.myChart = echarts.init(chartDom);
}

• 在 mounted 钩子中调用 initChart，初始化 ECharts 实例。

获取后端数据

async fetchData() {
  try {
    const response = await axios.get('https://api.example.com/chart-data');
    const data = response.data;

    // 更新 X 轴和 Y 轴数据
    this.xAxisData = data.xAxis;
    this.yAxisData = data.yAxis;

    // 更新图表
    this.updateChart();
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
}

• 使用 axios.get 发送 HTTP 请求，获取后端数据。

• 假设后端返回的数据格式为：

  {
    "xAxis": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    "yAxis": [5, 20, 36, 10, 10, 20]
  }

• 将获取到的数据赋值给 xAxisData 和 yAxisData，然后调用 updateChart 更新图表。

更新图表

updateChart() {
  if (this.myChart) {
    const option = {
      title: {
        text: '动态数据示例'
      },
      tooltip: {},
      xAxis: {
        data: this.xAxisData // 使用从后端获取的 X 轴数据
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: this.yAxisData // 使用从后端获取的 Y 轴数据
        }
      ]
    };

    // 使用配置项显示图表
    this.myChart.setOption(option);
  }
}

• 根据 xAxisData 和 yAxisData 动态生成图表的配置项 option。

• 调用 this.myChart.setOption(option) 更新图表。

销毁 ECharts 实例

beforeDestroy() {
  if (this.myChart) {
    this.myChart.dispose();
  }
}

• 在组件销毁前，调用 dispose 方法销毁 ECharts 实例，避免内存泄漏。