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)文章
這篇文章主要為大家介紹了LogicFlow插件使用前準(zhǔn)備詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Vue-Router路由守衛(wèi)詳?shù)募?xì)用法教程
在Vue.js應(yīng)用中,Vue-Router是一個非常重要的插件,它允許我們實現(xiàn)頁面間的導(dǎo)航,然而,僅僅實現(xiàn)導(dǎo)航是不夠的,我們還需要在導(dǎo)航的不同階段進(jìn)行各種操作,本文將結(jié)合實際案例,詳細(xì)介紹Vue-Router路由守衛(wèi)的用法,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了分享一個vue項目“腳手架”項目的實現(xiàn)步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作
這篇文章主要介紹了vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Element-UI Table組件上添加列拖拽效果實現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Element-UI Table組件上添加列拖拽效果的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了詳解Vue源碼之?dāng)?shù)據(jù)的代理訪問，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue使用關(guān)于speak-tss插件的詳細(xì)介紹及一些配置項
本文詳細(xì)介紹了speak-tss插件在Vue3中的使用方法和配置,首先需要下載依賴,然后引入插件,并進(jìn)行實例化和配置,配置項包括音量、語言、語音、語速、音調(diào)等,speak-tss支持多種語言和語音,適用于需要文本語音播報的場景2024-09-09
如何利用vue進(jìn)行AJAX,其它vue本身不支持發(fā)送AJAX請求,需要使用vue-resource（vue1.0版本）或axios（vue2.0版本）第三方插件的支持才行2018-10-10
這篇文章主要介紹了vue多頁面開發(fā)和打包的正確處理方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
vue輪播圖插件vue-awesome-swiper的使用代碼實例
本篇文章主要介紹了vue輪播圖插件vue-awesome-swiper的使用代碼實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07