vue3+echarts实现好看的圆角环形图
作者：妍崽崽@
这篇文章主要介绍了vue3+echarts实现好看的圆角环形图效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
好看的圆角环形图
实现效果
实现方法
1.引入echart
cnpm i --save echarts import * as echarts from 'echarts';
2.页面上定义dom
<template>
<div id="echartLine" class="echartDiv">
折线图
</div>
</template>3.实现具体源码
<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'));
// 指定图表的配置项和数据
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: '淳化活络' },
{ value: 484, name: '肉夹馍' },
{ value: 300, name: '牛肉面' }
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//挂载
onMounted(()=>{
nextTick(()=>{
echartInit()
})
})
return {
};
}
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。