该博客展示了如何使用Echarts库创建一个带有动画效果的饼图（环形图）。作者首先导入了必要的组件和库，然后在Vue组件中定义了数据和方法。在`drawLine`方法中，初始化Echarts实例并设置图表配置，包括tooltip、legend和series属性。数据从API获取并动态更新到图表中，实现了合格率的可视化展示。饼图的每个扇区代表合格和未合格的次数，颜色和标签可以根据数据自定义。同时，图表能够根据窗口大小自动调整。
import api from '@/server/userConfig';
import { Empty } from 'vant';
import Vue from 'vue';
Vue.use(Empty);
export default {
name: 'qualifiedRateRingEchart',
data () {
return {
legendDataByQuality:[],
seriesDataByQuality:[],
}
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
let chartByQuality = this.$echarts.init(document.getElementById('myChartByQuality'))
// 绘制图表
chartByQuality.setOption({
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: ({d}%)'
},
itemStyle : {
label : {
show : false /*标注不显示*/
},
labelLine : {
show : false /*标注的指向线不显示*/
}
最低0.47元/天 解锁文章
9751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
