要在 Vue2 中使用
ECharts 实现 x
轴 y
轴气泡图，你需要先安装
ECharts。
可以通过 npm 或 yarn 安装
ECharts：
```bash
npm install
echarts --save
# 或者
yarn add
echarts
```
安装完成后，在 Vue 组件中引入
ECharts：
```javascript
import
echarts from '
echarts'
```
然后在组件的 mounted 钩子函数中初始化
ECharts 实例：
```javascript
mounted () {
// 初始化
ECharts 实例
const chart =
echarts.init(this.$refs.chart)
// 具体的
ECharts 配置
const option = {
// 配置项
}
// 使用刚指定的配置项和数据显示图表
chart.setOption(option)
}
```
对于气泡图，可以使用 scatter 和 visualMap 组件实现。以下是一个简单的示例：
```javascript
mounted () {
// 初始化
ECharts 实例
const chart =
echarts.init(this.$refs.chart)
//
ECharts 配置
const option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
visualMap: {
min: 0,
max: 100,
dimension: 2,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
type: 'scatter',
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,
formatter: function (param) {
return param.data[2]
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new
echarts.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 中使用
ECharts 实现 x
轴 y
轴气泡图了。
扫一扫
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
