要在
Vue2 中使用 E
Charts
实现 x 轴 y 轴气泡图，你需要先安装 E
Charts。
可以通过 npm 或 yarn 安装 E
Charts：
```bash
npm install e
charts --save
# 或者
yarn add e
charts
```
安装完成后，在
Vue 组件中引入 E
Charts：
```javascript
import e
charts from 'e
charts'
```
然后在组件的 mounted 钩子函数中初始化 E
Charts 实例：
```javascript
mounted () {
// 初始化 E
Charts 实例
const
chart = e
charts.init(this.$refs.
chart)
// 具体的 E
Charts 配置
const option = {
// 配置项
}
// 使用刚指定的配置项和数据显示
图表
chart.setOption(option)
}
```
对于气泡图，可以使用 scatt
er 和
visualMap 组件
实现。以下是一个简单的示例：
```javascript
mounted () {
// 初始化 E
Charts 实例
const
chart = e
charts.init(this.$refs.
chart)
// E
Charts 配置
const option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
visualMap: {
min: 0,
max: 100,
dimension: 2,
calculable: true,
orient: 'horizontal',
left: 'cent
er',
bottom: '15%'
},
s
eries: [{
type: 'scatt
er',
data: [
[10.0, 8.04, 10],
[8.0, 6.95, 30],
[13.0, 7.58, 20],
[9.0, 8.81, 50],
[11.0, 8.33, 80],
[14.0, 9.96, 40],
[6.0, 7.24, 70],
[4.0, 4.26, 90],
[12.0, 10.84, 60],
[7.0, 4.82, 100],
[5.0, 5.68, 10]
],
symbolSize: function (data) {
return Math.sqrt(data[2])
},
label: {
emphasis: {
show: true,
formatt
er: function (param) {
return param.data[2]
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new e
charts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(251, 118, 123)'
}, {
offset: 1,
color: 'rgb(204, 46, 72)'
}])
}
}
}]
}
// 使用刚指定的配置项和数据显示
图表
chart.setOption(option)
}
```
在模板中添加一个 div 占位符，并设置 ref 属性为
chart：
```html
<template>
<div ref="
chart" style="width: 100%; height: 400px;"></div>
</template>
```
这样就可以在
Vue2 中使用 E
Charts
实现 x 轴 y 轴气泡图了。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1328
