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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- echarts设置tootip轮播切换展示(vue3搭配vue-echarts粘贴即用)
- 手把手教你Vue3 按需引入 Echarts的过程(收藏)
- vue导出excel和echart图形分别在不同工作表的实现方法
- vue使用echarts实现柱状图动态排序效果
- vue2.0如何实现echarts饼图(pie)效果展示
- vue中如何使用echarts动态渲染数据
- vue使用echarts实现动态数据的示例详解
- Vuex进行Echarts数据页面初始化后如何更新dom
- vue+echarts图表的基本使用步骤总结
- 在Vue中使用Echarts+封装
- 使用vue3+ts打开echarts的正确方式
- vue3中使用Vchart的示例代码