vue3+echarts实现好看的圆角环形图
更新时间:2023年10月09日 10:48:37 作者:妍崽崽@
这篇文章主要介绍了vue3+echarts实现好看的圆角环形图效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
前言
好看的圆角环形图
实现效果
实现方法
1.引入echart
2.页面上定义dom
3.实现具体源码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <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> |
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
最新评论