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 实例，避免内存泄漏。