各位观众，晚上好！今天咱们来聊聊在 Vue 这位前端小能手中，如何引入那些花里胡哨的图表库，比如 ECharts 和 D3.js，并且让它们乖乖听话，数据一变就跟着跳舞，屏幕大小变了也得跟着伸胳膊蹬腿。
第一幕：选妃——图表库的选择
首先，咱们得明白，图表库就像古代的妃子，各有各的特色。ECharts 就像一位出身名门，装扮华丽的贵妃，上手简单，配置丰富，各种图表应有尽有，但有时候也略显臃肿。D3.js 则像一位身怀绝技的民间女子，灵活多变，定制性极强，但需要花费更多时间去学习和调教。
选择哪个，就看你的项目需求和个人喜好了。如果项目时间紧，需求明确，ECharts 是个不错的选择。如果追求极致的个性化，或者需要处理复杂的数据关系，D3.js 可能会更适合你。
第二幕：迎娶——安装与引入
选好妃子，哦不，图表库，接下来就是迎娶的过程了。
1. ECharts 的迎娶方式：
ECharts 的迎娶方式比较简单粗暴，直接用 npm 或者 yarn 把她娶进门：
npm install echarts --save
# 或者
yarn add echarts然后，在你的 Vue 组件里，像迎财神一样把她请进来：
<template>
<div ref="myChart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
// 初始化 ECharts 实例
const myChart = echarts.init(this.$refs.myChart);
// 配置图表选项
const option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用配置项渲染图表
myChart.setOption(option);
}
};
</script>这段代码做了什么呢？
- 首先，在
<template>里，我们准备了一个div，并且用ref="myChart"给它起了个名字，方便我们找到它。 - 然后，在
<script>里，我们import * as echarts from 'echarts';，把 ECharts 整个迎了进来。 - 在
mounted钩子函数里，我们先用echarts.init(this.$refs.myChart)初始化了一个 ECharts 实例，并且告诉它要画在哪个div里。 - 接着，我们定义了一个
option对象，里面包含了图表的各种配置，比如标题、提示框、坐标轴、数据等等。 - 最后，我们用
myChart.setOption(option)把配置项告诉 ECharts 实例，让它按照我们的指示画图。
2. D3.js 的迎娶方式：
D3.js 的迎娶方式也差不多，也是先用 npm 或者 yarn 把她娶进门：
npm install d3 --save
# 或者
yarn add d3然后，在你的 Vue 组件里，把她请进来：
<template>
<div ref="d3Chart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import * as d3 from 'd3';
export default {
mounted() {
const data = [12, 31, 22, 17, 25, 18, 29, 14];
const svg = d3.select(this.$refs.d3Chart)
.append("svg")
.attr("width", 600)
.attr("height", 400);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 70)
.attr("y", (d) => 400 - d * 8)
.attr("width", 65)
.attr("height", (d) => d * 8)
.attr("fill", "steelblue");
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 70 + 20)
.attr("y", (d) => 400 - d * 8 - 3)
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.attr("fill", "white");
}
};
</script>这段代码稍微复杂一点，因为 D3.js 更加底层，需要我们自己手动控制每一个元素的创建和属性。
- 同样，在
<template>里，我们准备了一个div，并且用ref="d3Chart"给它起了个名字。 - 在
<script>里，我们import * as d3 from 'd3';，把 D3.js 整个迎了进来。 - 在
mounted钩子函数里，我们先定义了一些数据data。 - 然后，我们用
d3.select(this.$refs.d3Chart).append("svg")在div里创建了一个 SVG 元素，并且设置了它的宽度和高度。 - 接着，我们用
svg.selectAll("rect").data(data).enter().append("rect")创建了一堆矩形，并且把数据绑定到这些矩形上。 - 然后，我们设置了这些矩形的各种属性，比如位置、宽度、高度、颜色等等。
- 最后，我们还创建了一些文本，用来显示每个矩形对应的数据。
第三幕：调教——数据的动态更新
迎娶之后，就该调教了。这里的调教，指的就是数据的动态更新。我们需要让图表能够根据数据的变化自动更新。
1. ECharts 的调教方式：
ECharts 的调教方式比较简单，只需要在数据变化的时候，重新调用 myChart.setOption(option) 就可以了。
<template>
<div>
<div ref="myChart" style="width: 600px; height: 400px;"></div>
<button @click="updateData">更新数据</button>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
chartData: [5, 20, 36, 10, 10, 20]
};
},
mounted() {
this.myChart = echarts.init(this.$refs.myChart);
this.updateChart();
},
methods: {
updateChart() {
const option = {
title: {
text: 'ECharts 动态更新示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: this.chartData
}
]
};
this.myChart.setOption(option);
},
updateData() {
// 模拟数据更新
this.chartData = this.chartData.map(item => item + Math.floor(Math.random() * 10));
this.updateChart();
}
}
};
</script>这段代码做了什么呢？
- 首先，我们在
data里定义了一个chartData数组，用来存储图表的数据。 - 然后，在
mounted钩子函数里，我们初始化了 ECharts 实例，并且调用了updateChart方法来渲染图表。 updateChart方法和之前的例子差不多，只是把data替换成了this.chartData。updateData方法模拟了数据的更新，每次点击按钮，都会随机增加chartData数组里的每个元素的值，然后重新调用updateChart方法来更新图表。
2. D3.js 的调教方式：
D3.js 的调教方式稍微复杂一点，需要我们自己手动更新每一个元素。
<template>
<div>
<div ref="d3Chart" style="width: 600px; height: 400px;"></div>
<button @click="updateData">更新数据</button>
</div>
</template>
<script>
import * as d3 from 'd3';
export default {
data() {
return {
chartData: [12, 31, 22, 17, 25, 18, 29, 14]
};
},
mounted() {
this.svg = d3.select(this.$refs.d3Chart)
.append("svg")
.attr("width", 600)
.attr("height", 400);
this.updateChart();
},
methods: {
updateChart() {
const svg = this.svg;
const data = this.chartData;
// 数据绑定
const rects = svg.selectAll("rect")
.data(data);
// 更新 existing elements
rects.transition()
.duration(750)
.attr("y", (d) => 400 - d * 8)
.attr("height", (d) => d * 8);
// 进入 new elements
rects.enter()
.append("rect")
.attr("x", (d, i) => i * 70)
.attr("y", (d) => 400 - d * 8)
.attr("width", 65)
.attr("height", (d) => d * 8)
.attr("fill", "steelblue");
// 移除 exiting elements
rects.exit()
.remove();
const texts = svg.selectAll("text")
.data(data);
texts.transition()
.duration(750)
.text((d) => d)
.attr("y", (d) => 400 - d * 8 - 3);
texts.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 70 + 20)
.attr("y", (d) => 400 - d * 8 - 3)
.attr("font-family", "sans-serif")
.attr("font-size", "12px")
.attr("fill", "white");
texts.exit()
.remove();
},
updateData() {
// 模拟数据更新
this.chartData = this.chartData.map(item => item + Math.floor(Math.random() * 10));
this.updateChart();
}
}
};
</script>这段代码的关键在于 D3.js 的数据绑定和更新机制。
selectAll().data(data)将数据绑定到 SVG 元素上。enter()处理新增的元素，也就是数据比元素多的时候，需要创建新的元素。update()处理已存在的元素，也就是数据和元素数量一样的时候，需要更新元素的属性。exit()处理需要移除的元素，也就是数据比元素少的时候，需要移除多余的元素。
通过这种方式，我们可以实现 D3.js 图表的动态更新。而且，我们还使用了 transition() 方法，让图表的更新过程更加平滑，看起来更舒服。
第四幕：驯服——图表的响应式布局
驯服，指的就是让图表能够根据屏幕的大小自动调整大小，也就是响应式布局。
1. ECharts 的驯服方式：
ECharts 的驯服方式比较简单，只需要监听 window 的 resize 事件，然后重新调用 myChart.resize() 就可以了。
<template>
<div ref="myChart" style="width: 100%; height: 400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
this.myChart = echarts.init(this.$refs.myChart);
this.updateChart();
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
updateChart() {
// ... (图表配置代码)
},
handleResize() {
this.myChart.resize();
}
}
};
</script>这段代码做了什么呢？
- 首先，我们在
<template>里，把div的宽度设置成了100%，这样图表就会自动撑满整个容器。 - 然后，在
mounted钩子函数里，我们监听了window的resize事件，并且把handleResize方法绑定到这个事件上。 handleResize方法很简单，只需要调用this.myChart.resize()就可以了。- 最后，在
beforeDestroy钩子函数里，我们移除了resize事件的监听，防止内存泄漏。
2. D3.js 的驯服方式：
D3.js 的驯服方式稍微复杂一点，需要我们自己手动计算图表的宽度和高度，然后重新设置 SVG 元素的属性。
<template>
<div ref="d3Chart" style="width: 100%; height: 400px;"></div>
</template>
<script>
import * as d3 from 'd3';
export default {
mounted() {
this.svg = d3.select(this.$refs.d3Chart)
.append("svg")
.attr("width", this.$refs.d3Chart.offsetWidth)
.attr("height", this.$refs.d3Chart.offsetHeight);
this.updateChart();
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
updateChart() {
// ... (图表渲染代码)
},
handleResize() {
this.svg
.attr("width", this.$refs.d3Chart.offsetWidth)
.attr("height", this.$refs.d3Chart.offsetHeight);
this.updateChart(); // Re-render the chart with the new dimensions
}
}
};
</script>这段代码做了什么呢？
- 首先，我们在
<template>里，把div的宽度设置成了100%，这样图表就会自动撑满整个容器。 - 然后，在
mounted钩子函数里，我们使用this.$refs.d3Chart.offsetWidth和this.$refs.d3Chart.offsetHeight获取容器的宽度和高度，并且把它们设置成 SVG 元素的属性。 - 接着，我们监听了
window的resize事件，并且把handleResize方法绑定到这个事件上。 handleResize方法重新获取容器的宽度和高度，并且把它们设置成 SVG 元素的属性，然后重新调用updateChart方法来重新渲染图表。- 最后，在
beforeDestroy钩子函数里，我们移除了resize事件的监听，防止内存泄漏。
总结：
| 特性 | ECharts | D3.js |
|---|---|---|
| 上手难度 | 简单 | 复杂 |
| 定制性 | 较低 | 极高 |
| 响应式布局 | resize()方法简单易用 |
需要手动计算和更新 SVG 属性 |
| 数据更新 | setOption()方法简单易用 |
需要手动处理数据绑定和元素更新 |
| 适用场景 | 快速开发，需求明确的项目 | 追求极致个性化，需要处理复杂数据的项目 |
| 体积 | 较大 | 较小，但根据需求可能引入更多模块 |
好了，今天的讲座就到这里。希望大家能够掌握在 Vue 中集成第三方图表库的技巧，并且能够根据自己的需求选择合适的图表库，让你的数据在屏幕上翩翩起舞！ 记住，没有最好的图表库，只有最适合你的图表库！ 散会！