vue3+echarts實現(xiàn)好看的圓角環(huán)形圖
更新時間：2023年10月09日 10:48:37 作者：妍崽崽@
這篇文章主要介紹了vue3+echarts實現(xiàn)好看的圓角環(huán)形圖效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
好看的圓角環(huán)形圖
實現(xiàn)效果
實現(xiàn)方法
1.引入echart
cnpm i --save echarts import * as echarts from 'echarts';
2.頁面上定義dom
<template>
<div id="echartLine" class="echartDiv">
折線圖
</div>
</template>3.實現(xiàn)具體源碼
<template>
<div id="echartLine" class="echartDiv" style="width: 100%;height: 400px;">
</div>
</template>
<script>
import * as echarts from 'echarts';
import { onMounted,nextTick } from 'vue';
export default {
setup(){
const echartInit = () =>{;
var myChart = echarts.init(document.getElementById('echartLine'));
// 指定圖表的配置項和數(shù)據(jù)
let option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '西安',
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 30,
borderColor: '#fff',
borderWidth: 15
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
data: [
{ value: 1048, name: '大盤雞' },
{ value: 735, name: '紅油米線' },
{ value: 580, name: '淳化活絡(luò)' },
{ value: 484, name: '肉夾饃' },
{ value: 300, name: '牛肉面' }
]
}
]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
}
//掛載
onMounted(()=>{
nextTick(()=>{
echartInit()
})
})
return {
};
}
}
</script>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-draggable實現(xiàn)拖拽表單的示例代碼
本文主要介紹了vue-draggable實現(xiàn)拖拽表單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue+canvas實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的)
這篇文章主要介紹了vue+canvas實現(xiàn)數(shù)據(jù)實時從上到下刷新瀑布圖效果(類似QT的),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
提起幫助文檔，想必大家都會想到?VuePress等。但是VuePress是“靜態(tài)網(wǎng)站生成器”，需要我們自行編寫文檔，然后交給VuePress變成網(wǎng)站。因此，本文將用vite2+Vue3編寫一個在線幫助文檔工具，需要的可以參考一下2022-03-03
本文為大家介紹了VUE中內(nèi)置指令包括：v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once2019-02-02
這篇文章給大家?guī)砹薞ue.js 踩坑記之雙向綁定問題，非常不錯，具有參考借鑒價值，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
Nuxt引入vue-persistedstate以及踩坑記錄
這篇文章主要介紹了Nuxt引入vue-persistedstate以及踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關(guān)于vue3中封裝axios請求的最新實現(xiàn)步驟,在Vue 3中可以通過封裝axios來實現(xiàn)接口的統(tǒng)一管理和調(diào)用,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
vue中動態(tài)出來返回的時間秒數(shù)(在多少秒顯示分、小時等等)
這篇文章主要給大家介紹了關(guān)于vue中動態(tài)出來返回的時間秒數(shù)(在多少秒顯示分、小時等等)的相關(guān)資料,文中通過代碼示例介紹的非常詳細,對大家學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
本篇文章主要介紹了vue-resouce設(shè)置請求頭的三種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了ant?design?vue的table取消自帶分頁問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10