本文记录在 Vue 2 项目中整合 ECharts 实现基本数据可视化的流程，包括柱状图、饼图的渲染以及自定义主题的下载与应用。以下步骤基于实际项目经验，覆盖从依赖安装到图表渲染的完整过程。
1. 安装 ECharts 依赖
在项目根目录下运行 npm 命令安装 ECharts 包：
[code=shell]
npm install echarts -S
[/code]
安装完成后，推荐在 Vue 的入口文件 main.js 中全局引入并挂载到 Vue 原型上，以便在所有组件中通过 this.$echarts 直接调用。
[code=javascript]
// main.js
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
[/code]
2. 创建容器与初始化图表
在任意组件中准备一个用于放置图表的 div 容器，并设置宽高。
[code=html]
<div>
<div class="echart-box" ref="box"></div>
</div>
[/code]
使用 scoped 样式约束容器尺寸，边框仅用于开发调试：
[code=css]
.echart-box {
width: 500px;
height: 350px;
border: 3px solid pink;
margin: 20px auto;
}
[/code]
在组件 mounted 钩子中通过 $refs 获取 DOM 元素，并调用 echarts.init 初始化实例。
[code=javascript]
const userdom = this.$refs.box
const mycart = this.$echarts.init(userdom)
[/code]
3. 绘制柱状图
以 ECharts 官方示例中的基础柱状图为例，配置 xAxis、yAxis 及 series 数据。
[code=javascript]
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
}
mycart.setOption(option)
[/code]
showBackground 和 backgroundStyle 用于在柱状图柱子背后显示浅色底块，增强视觉效果。setOption 方法将配置应用到实例上。
4. 绘制饼图
使用相同思路绘制饼图，在组件中创建第二个容器（ref="boxpie"）并初始化。
[code=javascript]
const mypie = this.$echarts.init(this.$refs.boxpie)
mypie.setOption({
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
})
[/code]
emphasis 配置用于鼠标悬停时的高亮阴影效果。
5. 主题下载与使用
默认样式较普通，可以从 ECharts 主题下载页面（https://echarts.apache.org/zh/theme-builder.html）选择并下载 JS 主题文件，例如 vintage.js。将下载的 JS 文件放在项目 assets 目录中（如 src/assets/vintage.js），在组件中引入：
[code=javascript]
import '@/assets/vintage.js'
[/code]
然后在 init 方法中传入主题名称作为第二个参数：
[code=javascript]
const mycart = this.$echarts.init(userdom, 'vintage')
const mypie = this.$echarts.init(this.$refs.boxpie, 'vintage')
[/code]
应用主题后，图表的配色和样式会随之变化。
6. 完整组件示例
将上述步骤整合到一个 Vue 单文件组件中，最终代码如下：
[code=html]
<template>
<div style="display: flex; justify-content: space-around;">
<div class="echart-box" ref="box"></div>
<div class="echart-box" ref="boxpie"></div>
</div>
</template>
<script>
import '@/assets/vintage.js'
export default {
mounted() {
this.showEcarts()
},
methods: {
showEcarts() {
// 柱状图
const userdom = this.$refs.box
const mycart = this.$echarts.init(userdom, 'vintage')
mycart.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
})
// 饼图
const mypie = this.$echarts.init(this.$refs.boxpie, 'vintage')
mypie.setOption({
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
})
}
}
}
</script>
<style scoped>
.echart-box {
width: 500px;
height: 350px;
border: 3px solid pink;
margin: 20px;
}
</style>
[/code]
总结
本文展示了在 Vue 2 项目中整合 ECharts 并渲染柱状图和饼图的核心步骤：安装依赖、全局注入、初始化实例、配置 option 以及应用第三方主题。这套流程同样适用于折线图、散点图等其他图表类型，只需根据 ECharts 官方示例调整 series.type 和相关配置即可。对于生产环境，建议将主题文件打包而非在运行时动态加载，以减少请求次数。 |
发表于 
发表于