Vue中使用echarts實現(xiàn)繪制人體動態(tài)圖
更新時間：2024年03月05日 09:48:02 作者：小青年一枚
這篇文章主要為大家詳細介紹了Vue中如何使用echarts實現(xiàn)繪制人體動態(tài)圖,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
最近一直處于開發(fā)大屏的項目，在開發(fā)中遇到了一個小知識點，在大屏中如何實現(xiàn)人體動態(tài)圖。然后看了下echarts官方文檔，根據(jù)文檔中的示例調(diào)整出來自己想要的效果。
根據(jù)文檔上發(fā)現(xiàn) series 中 type 類型設(shè)置為 象形柱形圖，象形柱圖是可以設(shè)置各種具象圖形元素（如圖片、SVG PathData 等）的柱狀圖。然后邊采用SVG PathData來實現(xiàn)，通過SVG PathData實現(xiàn)后發(fā)現(xiàn)圖片更省事。這也算是長見識了，哈哈。
詳細的文檔大家也可以參考下官方文檔：https://echarts.apache.org/zh/option.html#series-pictorialBar
接下來還是老規(guī)矩，看代碼：
let symbols = [
/*這里我使用的是base64方式，大家也可以根據(jù)喜好設(shè)置為 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, //鼠標(biāo)放上去顯示懸浮數(shù)據(jù)
},
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: "\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,
},
{
// 設(shè)置背景底色，不同的情況用這個
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方式實現(xiàn)，
另外后面優(yōu)化代碼采用了 圖片方式，其實與base64方式區(qū)別在于引用。
const option = {
tooltip: {
show: false, //鼠標(biāo)放上去顯示懸浮數(shù)據(jù)
},
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: "\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,
},
{
// 設(shè)置背景底色，不同的情況用這個
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%'],
},
],
},
],
};
到此這篇關(guān)于Vue中使用echarts實現(xiàn)繪制人體動態(tài)圖的文章就介紹到這了,更多相關(guān)Vue echarts繪制人體動態(tài)圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于vue中hash和history的區(qū)別與使用圖文詳解
vue-router中有hash模式和history模式,下面這篇文章主要給大家介紹了關(guān)于vue中hash和history的區(qū)別與使用的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-03-03
Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的示例代碼
這篇文章主要介紹了Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的方法,文中通過代碼示例講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-08-08
Vue3+TypeScript報錯:無法找到模塊xx的聲明文件問題
這篇文章主要介紹了Vue3+TypeScript報錯:無法找到模塊xx的聲明文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了解決vue 退出動畫無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue2.0頁面前進刷新回退不刷新的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue @click與@click.native,及vue事件機制的使用分析
這篇文章主要介紹了vue @click與@click.native,及vue事件機制的使用分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue 3.0x中的Suspense和異步組件,我們將討論新的defineAsyncComponent函數(shù),以及如何利用Suspense組件來更好地處理異步組件的加載和顯示,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue中下拉框組件的封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
關(guān)于Vue.js一些問題和思考學(xué)習(xí)筆記（1）
這篇文章主要為大家分享了關(guān)于Vue.js一些問題和思考的學(xué)習(xí)筆記,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本篇文章主要介紹了Vuejs Prop基本用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08