Echarts环形饼状图设置内外边框

上班快一个月了,最近再写echarts的项目,亚历山大啊

记录一下饼状图设置内外边框的代码

series: [
                {
                    name: '项目分数',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: true
                    },
                    data: [
                        {value: 335, name: '970分以上'},
                        {value: 310, name: '950-970分'},
                        {value: 234, name: '900-950分'},
                        {value: 135, name: '900分以下'},
                    ]
                },
                {
                    name: '外边框',
                    type: 'pie',
                    clockWise: false,
                    radius: ['74%', '74%'],//边框大小
                    center: ['50%', '50%'],//边框位置
                    data: [{
                        value: 10,
                        itemStyle: {
                            normal: {
                                borderWidth: 8,//设置边框粗细
                                borderColor: 'rgb(9,37,71, 0.5)'//边框颜色
                            }
                        }
                    }]
                },
            ]

此时还需要把指示线取消

labelLine:{  
   normal:{  
       length:45, 
       length2:45,
       show: false    // 隐藏所有指示线
   }  
},

效果图

### Vue 中 ECharts 环形饼状图动画效果实现 #### 创建表容器 为了在页面中显示环形饼状图,首先需要创建一个用于容纳表的 `div` 容器。这可以通过定义 HTML 结构中的特定类名来完成。 ```html <div id="app"> <div class="echarts" ref="ringChart"></div> </div> ``` 此结构提供了放置表的空间,并允许通过 JavaScript 访问该元素以便初始化 ECharts 实例[^3]。 #### 初始化 ECharts 表实例 接下来,在 Vue 组件的方法或生命周期钩子内初始化 ECharts 的实例对象: ```javascript import * as echarts from 'echarts'; export default { mounted() { this.initRingChart(); }, methods: { initRingChart() { const chartDom = document.querySelector('.echarts'); const myChart = echarts.init(chartDom); let option; // 配置项设置... option && myChart.setOption(option); window.addEventListener('resize', function () { myChart.resize(); }); } } } ``` 这段代码展示了如何利用 `mounted()` 生命周期方法调用自定义函数 `initRingChart()` 来启动并配置表实例。 #### 设置基础选项与样式 对于环形饼状图而言,重要的是调整半径参数使得形呈现为空心状态。此外,还可以设定其他视觉属性如颜色、标签位置等以增强美观度。 ```javascript option = { title: { text: '环形饼状图', subtext: '', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '访问来源', type: 'pie', radius: ['40%', '70%'], // 控制内外圈大小比例形成环形 avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderWidth: 2 }, label: { show: true, position: 'outside' }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold' } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'} ] } ] }; ``` 上述配置实现了基本的环形布局以及一些美化处理措施[^2]。 #### 添加动态更新功能 为了让表能够响应数据变化而自动刷新视,可以采用定时器或其他事件驱动机制触发重新加载操作。这里给出一种简单的方式——基于时间间隔定期更改数据源从而达到渐变过渡的效果。 ```javascript methods: { updateChartData() { setInterval(() => { // 修改原始数据集的一部分数值 const newData = [...this.seriesData]; newData[Math.floor(Math.random()*newData.length)].value += Math.round((Math.random()-0.5)*10)+1; // 更新到表配置里去 this.myChart.setOption({ series:[{ data:newData }] },true); // 启用不合并模式覆盖旧有配置 }, 2000); // 每隔两秒执行一次变更动作 } } ``` 这种方法能有效模拟出连续性的动画过程,给用户带来更生动直观的感受[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值