Vue中使用echarts实现绘制人体动态图
更新时间：2024年03月05日 09:48:02 作者：小青年一枚
这篇文章主要为大家详细介绍了Vue中如何使用echarts实现绘制人体动态图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
最近一直处于开发大屏的项目，在开发中遇到了一个小知识点，在大屏中如何实现人体动态图。然后看了下echarts官方文档，根据文档中的示例调整出来自己想要的效果。
根据文档上发现 series 中 type 类型设置为 象形柱形图，象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。然后边采用SVG PathData来实现，通过SVG PathData实现后发现图片更省事。这也算是长见识了，哈哈。
详细的文档大家也可以参考下官方文档：https://echarts.apache.org/zh/option.html#series-pictorialBar
接下来还是老规矩，看代码：
let symbols = [
/*这里我使用的是base64方式，大家也可以根据喜好设置为 path://*/
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA",
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA",
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA",
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA",
];
option = {
tooltip: {
show: false, //鼠标放上去显示悬浮数据
},
grid: {
left: '5%',
right: '20%',
top: "20%",
bottom: "20%",
containLabel: true,
},
xAxis: {
data: ["a", "x", "b"],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
yAxis: {
max: 100,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "",
type: "pictorialBar",
symbolClip: true,
symbolBoundingData: 100,
label: {
normal: {
show: true,
position: "bottom",
offset: [0, 10],
formatter: "{b}\n{c}%",
textStyle: {
fontSize: 16,
color: "#686868",
},
},
},
symbolSize: ['50%', '100%'],
data: [
{
name: "低体重",
value: 35,
//采用base64方式
symbol: symbols[0],
//symbolSize: ['50%', '50%'],
itemStyle: {
normal: {
color: "rgba(73, 107, 168)", //单独控制颜色
},
},
},
{
name: "正常",
value: 25,
symbol: symbols[1],
itemStyle: {
normal: {
color: "rgba(98, 123, 81)", //单独控制颜色
},
},
},
{
name: "超重",
value: 20,
symbol: symbols[2],
itemStyle: {
normal: {
color: "rgba(163, 126, 46)", //单独控制颜色
},
},
},
{
name: "肥胖",
value: 30,
symbol: symbols[3],
itemStyle: {
normal: {
color: "rgba(180, 79, 33)", //单独控制颜色
},
},
},
],
z: 10,
},
{
// 设置背景底色，不同的情况用这个
name: "",
type: "pictorialBar", //异型柱状图 图片、SVG PathData
symbolBoundingData: 100,
animationDuration: 10,
z: 10,
symbolSize: ['50%', '100%'],
data: [
{
itemStyle: {
normal: {
color: "rgba(73, 107, 168, 0.2)",
opacity: 0.4,
},
},
value: 100,
symbol: symbols[0],
},
{
itemStyle: {
normal: {
color: "rgba(98, 123, 81,0.40)", //单独控制颜色
opacity: 0.4,
},
},
value: 100,
symbol: symbols[1],
},
{
itemStyle: {
normal: {
color: "rgba(163, 126, 46,0.40)", //单独控制颜色
opacity: 0.4,
},
},
value: 100,
symbol: symbols[2],
},
{
itemStyle: {
normal: {
color: "rgba(180, 79, 33, 0.4)", //单独控制颜色
opacity: 0.4,
},
},
value: 100,
symbol: symbols[3],
},
],
},
],
};
以上代码便是使用base64方式实现，
另外后面优化代码采用了 图片方式，其实与base64方式区别在于引用。
const option = {
tooltip: {
show: false, //鼠标放上去显示悬浮数据
},
grid: {
left: '5%',
right: '25%',
top: "10%",
bottom: "20%",
containLabel: true,
},
xAxis: {
data: ["a", "x", "b"],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
yAxis: {
max: 100,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "",
type: "pictorialBar",
symbolClip: true,
symbolBoundingData: 100,
label: {
normal: {
show: true,
position: "bottom",
offset: [0, 10],
formatter: "{b}\n{c}%",
textStyle: {
fontSize: 14,
color: "#fff",
},
},
},
data: [
{
name: "低体重",
value: 35,
symbol: 'image://' + require("../assets/images/1-image.png"),
symbolSize: ['50%', '100%'],
itemStyle: {
normal: {
color: "rgba(73, 107, 168)", //单独控制颜色
},
},
},
{
name: "正常",
value: 25,
symbol: 'image://' + require("../assets/images/2-image.png"),
symbolSize: ['50%', '100%'],
itemStyle: {
normal: {
color: "rgba(98, 123, 81)", //单独控制颜色
},
},
},
{
name: "超重",
value: 20,
symbol: 'image://' + require("../assets/images/3-image.png"),
symbolSize: ['50%', '100%'],
itemStyle: {
normal: {
color: "rgba(163, 126, 46)", //单独控制颜色
},
},
},
{
name: "肥胖",
value: 30,
symbol: 'image://' + require("../assets/images/4-image.png"),
symbolSize: ['50%', '100%'],
itemStyle: {
normal: {
color: "rgba(180, 79, 33)", //单独控制颜色
},
},
},
],
z: 10,
},
{
// 设置背景底色，不同的情况用这个
name: "",
type: "pictorialBar", //异型柱状图 图片、SVG PathData
symbolBoundingData: 100,
animationDuration: 10,
z: 10,
data: [
{
itemStyle: {
normal: {
opacity: 0.6,
},
},
value: 100,
symbol: 'image://' + require("../assets/images/1-image.png"),
symbolSize: ['50%', '100%'],
},
{
itemStyle: {
normal: {
opacity: 0.6,
},
},
value: 100,
symbol: 'image://' + require("../assets/images/2-image.png"),
symbolSize: ['50%', '100%'],
},
{
itemStyle: {
normal: {
opacity: 0.6,
},
},
value: 100,
symbol: 'image://' + require("../assets/images/3-image.png"),
symbolSize: ['50%', '100%'],
},
{
itemStyle: {
normal: {
opacity: 0.6,
},
},
value: 100,
symbol: 'image://' + require("../assets/images/4-image.png"),
symbolSize: ['50%', '100%'],
},
],
},
],
};
到此这篇关于Vue中使用echarts实现绘制人体动态图的文章就介绍到这了,更多相关Vue echarts绘制人体动态图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近遇到一个动态增加行和列的需求,所以这里给大家总结下,这篇文章主要给大家介绍了关于vue el-table实现动态添加行和列的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue3移动端嵌入pdf的多种方法小结,使用embed嵌入有好处也有缺点,本文给大家讲解的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue实现websocket客服聊天功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。篇文章主要介绍了vue-cli3脚手架的配置以及使用,需要的朋友可以参考下2018-08-08
公司的大数据工作组就需要通过数据大屏展示一些处理过后有价值的信息，本文主要介绍了Vue大屏数据展示示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了vue动态配置模板 'component is'代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要为大家介绍了vue+G6图形化实现功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
MVVM是Model-View-ViewModel的缩写，MVVM是一种设计思想，这篇文章主要介绍了Vue生命周期和MVVM框架,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
这篇文章主要介绍了在Vue中通过vue-router实现命名视图,本文给大家提到了vue-router的原理解析，给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库
构建工具使用vue3推荐的vite,下面这篇文章主要给大家介绍了关于如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
最新评论