1.安装echarts
在项目根目录下，使用npm或yarn安装ECharts：
npm install echarts --save或者
yarn add echarts2.在相应的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 实例，避免内存泄漏。
