好的，以下是一个使用 echarts 在 Vue 中画出
血压和占比的直方
图的例子：
```vue
<template>
<div id="blood-pressure-chart" style="width: 100%; height: 500px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
data() {
return {
//
血压数据
bloodPressureData: [
{ value: [90, 60] },
{ value: [110, 75] },
{ value: [120, 80] },
{ value: [130, 85] },
{ value: [140, 90] },
{ value: [150, 95] },
{ value: [160, 100] },
{ value: [170, 105] }
],
// 占比数据
proportionData: [
{ value: 20, name: '正常' },
{ value: 30, name: '偏低' },
{ value: 30, name: '偏高' },
{ value: 20, name: '高
血压' }
]
}
},
mounted() {
// 初始化 echarts 实例
const myChart = echarts.init(document.getElementById('blood-pressure-chart'));
// echarts 配置项
const option = {
//
图表标题
title: {
text: '
血压和占比直方
图'
},
// x 轴配置项
xAxis: [{
type: 'value',
name: '
血压',
nameLocation: 'middle',
nameGap: 30,
nameTextStyle: {
fontWeight: 'bold'
}
}, {
type: 'category',
name: '占比',
nameLocation: 'middle',
nameGap: 30,
nameTextStyle: {
fontWeight: 'bold'
},
data: ['正常', '偏低', '偏高', '高
血压']
}],
// y 轴配置项
yAxis: [{
type: 'value',
name: '人数',
nameLocation: 'middle',
nameGap: 50,
nameTextStyle: {
fontWeight: 'bold'
}
}],
// 数据系列配置项
series: [{
// 类型为散点
图
type: 'scatter',
// 数据数组
data: this.bloodPressureData,
// 散点
图的大小
symbolSize: 10,
// 散点
图的颜色
itemStyle: {
color: '#7cb5ec'
}
}, {
// 类型为饼
图
type: 'pie',
// 数据数组
data: this.proportionData,
// 饼
图的半径
radius: '40%',
// 饼
图的位置
center: ['70%', '50%'],
// 饼
图的标签样式
label: {
show: true,
formatter: '{b} {d}%'
},
// 饼
图的颜色
itemStyle: {
color: function(params) {
const colorList = ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980'];
return colorList[params.dataIndex]
}
}
}]
};
// 使用刚指定的配置项和数据显示
图表
myChart.setOption(option);
}
}
</script>
```
在上面的例子中，我们使用了 `scatter` 类型的系列来表示
血压数据，使用了 `pie` 类型的系列来表示占比数据。你可以根据实际需求修改数据和样式等配置项。
订阅专栏 解锁全文
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
