vue实现 【echarts中 “9种” Pie饼图图例】的组件封装及调用

已于 2024-11-21 15:28:06 修改
阅读量1.2w 收藏 62
点赞数 8
分类专栏： echarts 文章标签： echarts vue.js elementui
于 2022-01-11 09:31:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50450473/article/details/122424201
版权
本文提供了多个ECharts图表配置实例，涵盖不同类型的饼状图配置项，包括单层、双层及多层饼图，并展示了如何通过丰富的配置选项实现个性化图表展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

echarts组件使用参考：https://blog.youkuaiyun.com/weixin_50450473/article/details/121510438

目录

图例一

图例二

图例三

图例四

图例五

图例六

图例七

图例八

图例九

图例十

图例十一

图例一：

 

图例二：

 图例三：

图例四：

图例五：

图例六：

图例七：自定义显示内容

图例八：

图例九：

图例十：

图例十一：value为0时，legend 初始化 “不选中”

图例一

let datas = [
  { value: 6.8, name: '预习反思' },
  { value: 4.2, name: '预习认知' },
  { value: 5.8, name: '预习任务' },
  { value: 5.6, name: '预习方法' }
];
let sum = 0;
datas.forEach((s) => {
  sum += s.value;
});
let avgNum = (sum / datas.length).toFixed(1);

option = {
  color: ['#326092', '#2c7eeb', '#d5f1ff', '#3dc6c8', '#becae0', '#4d8fc6'],
  title: {
    text: '综合得分：' + avgNum + '分',
    left: 'center'
  },
  grid: {
    top: '0',
    left: '0%',
    right: '0%',
    bottom: '0%',
    containLabel: true
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    show: false
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      labelLine: {
        length: 50, // 改变标示线的长度
        lineStyle: {
          color: '#333' // 改变标示线的颜色
        }
      },
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{c} 分}',
        edgeDistance: 10,
        lineHeight: 30,
        fontSize: 20,
        rich: {
          time: {
            fontSize: 16,
            color: '#999'
          }
        },
        textStyle: {
          color: '#333'
        }
      },
      data: datas
    }
  ]
};

图例二

let datas = [
  { Score: 10, AveScore: 6.6, Name: '策略认知' },
  { Score: 8.2, AveScore: 6.4, Name: '计划策略' },
  { Score: 8.4, AveScore: 6.1, Name: '监控策略' },
  { Score: 8.8, AveScore: 6.4, Name: '调节策略' }
];
let nameList = [];
datas.forEach((fa) => {
  nameList.push({ name: fa.Name, value: fa.Score, ave: fa.AveScore });
});

option = {
  color: ['#326092', '#2c7eeb', '#d5f1ff', '#3dc6c8', '#becae0', '#4d8fc6'],
  title: {
    text: '元认知策略',
    left: 'center',
    top: 'center'
  },
  grid: {
    top: '0',
    left: '0%',
    right: '0%',
    bottom: '0%',
    containLabel: true
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    show: false
  },
  series: [
    {
      type: 'pie',
      radius: ['30%', '70%'],
      label: {
        alignTo: 'edge',
        position: 'inner',
        formatter: '{b}',
        fontSize: 20,
        textStyle: {
          fontWeight: 'bold',
          textShadowColor: '(0,0,0,.1)', // 文字阴影
          textShadowBlur: 1,
          textShadowOffsetX: 1
        }
      },
      data: nameList
    },
    {
      type: 'pie',
      radius: ['30%', '70%'],
      labelLine: {
        length: 40, // 改变标示线的长度
        lineStyle: {
          color: '#333' // 改变标示线的颜色
        }
      },
      label: {
        formatter: function (params) {
          return (
            '我的得分：' +
            params.data.value +
            '分\n平均得分：' +
            params.data.ave +
            '分'
          );
        },
        lineHeight: 30,
        fontSize: 14,
        textStyle: {
          color: '#999',
          borderColor: '#999',
          padding: [5, 10],
          borderWidth: 1
        }
      },
      data: nameList
    }
  ]
};

图例三

let datas = [
  {
    Name: '过程监控',
    DivideScore: 7.2,
    UserScore: 6,
    Children: [
      { Name: '监控行为', DivideScore: 5, UserScore: 5 },
      { Name: '监控结果', DivideScore: 6.7, UserScore: 6.7 }
    ]
  },
  {
    Name: '参照价值',
    DivideScore: 7,
    UserScore: 5.5,
    Children: [
      { Name: '监控过去', DivideScore: 5, UserScore: 5 },
      { Name: '监控未来', DivideScore: 6.7, UserScore: 6.7 }
    ]
  },
  {
    Name: '能动性',
    DivideScore: 6.8,
    UserScore: 6,
    Children: [
      { Name: '主动监控', DivideScore: 5, UserScore: 5 },
      { Name: '被动监控', DivideScore: 6.7, UserScore: 6.7 }
    ]
  }
];
let colorList = ['#326092', '#2c7eeb', '#d5f1ff', '#3dc6c8', '#becae0', '#4d8fc6'];
let fatherName = [];
let childName = [];
datas.forEach((ma, index) => {
  fatherName.push({
    name: ma.Name,
    value: ma.UserScore,
    avg: ma.DivideScore
  });
  ma.Children.forEach((chi) => {
    childName.push({
      name: chi.Name,
      value: chi.UserScore,
      avg: chi.DivideScore
    });
  });
});

option = {
  title: {
    text: '目标监控',
    left: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: [0, '60%'],
      itemStyle: {
        normal: {
          label: {
            position: 'inner',
            formatter: function (params) {
              return (
                params.data.name +
                '\n你的得分：' +
                params.data.value +
                '\n平均得分：' +
                params.data.avg
              );
            },
            fontSize: 14,
            lineHeight: 20,
            textStyle: {
              fontWeight: 'bold',
              textShadowColor: '(0,0,0,.1)', // 文字阴影
              textShadowBlur: 1,
              textShadowOffsetX: 1
            }
          },
          // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
          color: function (params) {
            return colorList[params.dataIndex];
          }
        }
      },
      labelLine: {
        show: false
      },
      data: fatherName
    },
    {
      type: 'pie',
      radius: ['60%', '85%'],
      itemStyle: {
        normal: {
          label: {
            position: 'inner',
            formatter: '{b|{b}}',
            color: '#999',
            rich: {
              b: {
                color: '#fff',
                fontSize: 14,
                fontWeight: 'bold'
              }
            }
          }
        }
      },
      data: childName
    },
    {
      type: 'pie',
      radius: ['60%', '85%'],
      labelLine: {
        length: 30, // 改变标示线的长度
        lineStyle: {
          color: '#999' // 改变标示线的颜色
        }
      },
      itemStyle: {
        normal: {
          label: {
            formatter: function (params) {
              return (
                '你的得分：' +
                params.data.value +
                '\n平均得分：' +
                params.data.value
              );
            },
            color: '#333',
            fontSize: 12,
            lineHeight: 25,
            rich: {
              b: {
                fontSize: 16,
                fontWeight: 'bold'
              },
              c: {
                fontSize: 16
              }
            }
          },
          // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
          color: function (params) {
            return colorList[params.dataIndex];
          }
        }
      },
      data: childName
    }
  ]
};

图例四

let branch = 32, branchTotal = 146; //科数
let species = 82, speciesTotal = 608; //种数
option = {
  title: [
    {
      text: '占全国湿地维管束植物',
      textStyle: {
        fontSize: 14,
        color: '#333'
      },
      subtext: '总科数',
      subtextStyle: {
        color: '#333',
        fontSize: 14,
        fontWeight: 'bold'
      },
      left: '20%',
      top: '65%',
      textAlign: 'center'
    },
    {
      text: '占全国湿地维管束植物',
      textStyle: {
        fontSize: 14,
        color: '#333'
      },
      subtext: '总种数',
      subtextStyle: {
        color: '#333',
        fontSize: 14,
        align: 'center',
        fontWeight: 'bold'
      },
      left: '70%',
      top: '65%',
      textAlign: 'center'
    }
  ],
  series: [
    {
      name: '总科数',
      type: 'pie',
      hoverAnimation: false,
      radius: ['20%', '25%'],
      center: ['20%', '50%'],
      label: {
        show: false
      },
      data: [
        {
          value: branch,
          name: '总科数',
          label: {
            show: true,
            position: 'center',
            formatter: '{b|{b}}\n{d|{d}}%',
            rich: {
              b: {
                fontSize: 14,
                lineHeight: 30,
                color: '#333'
              },
              d: {
                fontSize: 24,
                color: '#333',
                fontWeight: 'bold'
              }
            },
            color: '#333'
          },
          itemStyle: {
            normal: {
              color: '#1890FF'
            }
          }
        },
        {
          value: branchTotal - branch,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            normal: {
              color: '#F0F2F5'
            }
          }
        }
      ]
    },
    {
      name: '总种数',
      type: 'pie',
      hoverAnimation: false,
      radius: ['20%', '25%'],
      center: ['70%', '50%'],
      label: {
        show: false
      },
      data: [
        {
          value: species, //需要显示的数据
          name: '总种数',
          label: {
            show: true,
            position: 'center',
            formatter: '{b|{b}}\n{d|{d}}%',
            rich: {
              b: {
                fontSize: 14,
                lineHeight: 30,
                color: '#333'
              },
              d: {
                fontSize: 24,
                color: '#333',
                fontWeight: 'bold'
              }
            },
            color: '#333'
          },
          itemStyle: {
            normal: {
              color: '#FAFA14'
            }
          }
        },
        {
          value: speciesTotal - species,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            normal: {
              color: '#F0F2F5'
            }
          }
        }
      ]
    }
  ]
};

图例五

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: '5%',
    top: '20%',
    icon: 'circle',
    textStyle: {
      color: '#333',
      fontSize: 20
    },
    data: ['防火四级', '防火三级', '防火二级', '防火一级']
  },
  series: [
    {
      name: '火险等级',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'center',
        color: '#333'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {
          value: 50,
          name: '防火一级',
          itemStyle: {
            normal: {
              color: 'rgba(53,130,247,0.6)',
              borderColor: 'rgba(53,130,247,0.8)',
              borderWidth: 3,
              shadowColor: 'rgba(53,130,247,0.8)',
              shadowBlur: 10
            }
          }
        },
        {
          value: 30,
          name: '防火二级',
          itemStyle: {
            normal: {
              color: 'rgba(244,201,7,0.5)',
              borderColor: 'rgba(244,201,7,0.8)',
              borderWidth: 3,
              shadowColor: 'rgba(244,201,7,0.8)',
              shadowBlur: 10
            }
          }
        },
        {
          value: 20,
          name: '防火三级',
          itemStyle: {
            normal: {
              color: 'rgba(25,236,176,0.5)',
              borderColor: 'rgba(25,236,176,0.8)',
              borderWidth: 3,
              shadowColor: 'rgba(25,236,176,0.8)',
              shadowBlur: 10
            }
          }
        },
        {
          value: 10,
          name: '防火四级',
          itemStyle: {
            normal: {
              color: 'rgba(134,66,255,0.6)',
              borderColor: 'rgba(134,66,255,0.8)',
              borderWidth: 3,
              shadowColor: 'rgba(134,66,255,0.8)',
              shadowBlur: 10
            }
          }
        }
      ],
      center: ['35%', '50%']
    }
  ]
};

图例六

option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    bottom: '20%',
    icon: 'circle',
    orient: 'vertical',
    left: '75%',
    textStyle: {
      color: '#333',
      fontSize: 20
    },
    data: ['电话报警', '微信报警', '移动终端报警', '探测器报警', '云端报警']
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: '55%',
      center: ['35%', '50%'],
      data: [
        {
          value: 335,
          name: '电话报警',
          itemStyle: {
            normal: {
              color: 'rgba(50,123,250,0.5)',
              borderColor: 'rgba(50,123,250,0.8)',
              borderWidth: 2,
              shadowColor: 'rgba(50,123,250,0.8)',
              shadowBlur: 10
            }
          }
        },
        {
          value: 310,
          name: '微信报警',
          itemStyle: {
            normal: {
              color: 'rgba(160,234,253,0.5)',
              borderColor: 'rgba(160,234,253,0.8)',
              borderWidth: 2,
              shadowColor: 'rgba(160,234,253,0.8)',
              shadowBlur: 10
            }
          }
        },
        {
          value: 274,
          name: '移动终端报警',
          itemStyle: {
            normal: {
              color: 'rgba(252,238,187,0.5)',
              borderColor: 'rgba(252,238,187,0.8)',
              borderWidth: 2,
              shadowColor: 'rgba(252,238,187,0.8)',
              shadowBlur: 10
            }
          }
        },
        {
          value: 235,
          name: '探测器报警',
          itemStyle: {
            normal: {
              color: 'rgba(25,236,176,0.5)',
              borderColor: 'rgba(25,236,176,0.8)',
              borderWidth: 2,
              shadowColor: 'rgba(25,236,176,0.8)',
              shadowBlur: 10
            }
          }
        },
        {
          value: 400,
          name: '云端报警',
          itemStyle: {
            normal: {
              color: 'rgba(215,102,98,0.6)',
              borderColor: 'rgba(255,169,166,0.8)',
              borderWidth: 1,
              shadowColor: 'rgba(215,102,98,0.6)',
              shadowBlur: 10
            }
          }
        }
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        formatter: '{a} {b}\n ({d}%) '
      },
      itemStyle: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },

      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};

图例七

let datas = [
  {
    Name: '教育观念',
    Title: '',
    Score: null,
    SumAvgScore: null,
    Children: [
      { Score: 0.0, SumAvgScore: 0.0, Name: '发展观', Title: '主张环境' },
      { Score: 69.0, SumAvgScore: 69.0, Name: '期望观' },
      { Score: 70.0, SumAvgScore: 75.0, Name: '父母观' },
      { Score: 0.0, SumAvgScore: 0.0, Name: '亲子观', Title: '主张奖励' }
    ]
  },
  {
    Name: '家长学习力',
    Title: '',
    Score: null,
    SumAvgScore: null,
    Children: [{ Score: 31.0, SumAvgScore: 75.0 }]
  },
  {
    Name: '管教风格',
    Title: '',
    Score: null,
    SumAvgScore: null,
    Children: [
      { Score: 0.0, SumAvgScore: 0.0, Title: '专制型', Name: '您的管教风格：' }
    ]
  }
];
let fatherName = [];
let childName = [];
datas.forEach((ma, index) => {
  if (ma.Name === '教育观念') {
    ma.Children.map((m) => {
      childName.push({
        name: m.Name,
        value: 1,
        SumAvgScore: m.SumAvgScore,
        Score: m.Score,
        Title: m.Title
      });
    });
  } else {
    ma.Children.map((m) => {
      childName.push({
        name: ma.Name,
        value: 4,
        SumAvgScore: m.SumAvgScore,
        Score: m.Score,
        Title: m.Title
      });
    });
  }
  fatherName.push({
    name: ma.Name,
    value: 1,
    SumAvgScore: ma.SumAvgScore
  });
});
option = {
  color: ['#326092', '#2c7eeb', '#d5f1ff', '#3dc6c8', '#becae0', '#4d8fc6'],
  series: [
    {
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '45%'],
      label: {
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: fatherName
    },
    {
      type: 'pie',
      radius: ['45%', '65%'],
      labelLine: {
        length: 55, // 改变标示线的长度
        lineStyle: {
          color: '#333' // 改变标示线的颜色
        }
      },
      label: {
        formatter: function (params) {
          if (params.data.Title) {
            return params.data.name + '\n' + params.data.Title;
          } else {
            return (
              params.data.name +
              '\n你的得分：' +
              params.data.Score +
              '\n平均得分：' +
              params.data.SumAvgScore
            );
          }
        },
        lineHeight: 25,
        fontSize: 14,
        textStyle: {
          color: '#999',
          borderColor: '#999',
          padding: [5, 10],
          borderWidth: 1
        },
        rich: {
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          }
        }
      },
      data: childName
    }
  ]
};

图例八

let branchTotal = 100;
let press = 30;
let colorType = 0;
option = {
  backgroundColor: '#000',
  series: [
    {
      type: 'pie',
      clockwise: false, // 逆时针
      hoverAnimation: false,
      radius: ['80%', '100%'],
      label: {
        show: false
      },
      itemStyle: {
        color: function (params) {
          let colorList1 = ['#47C9E5', '#47E4E5'];
          let colorList2 = ['#832BF3', '#2B8EF3'];
          return new echarts.graphic.LinearGradient(0, 0, 0.5, 1, [
            { offset: 0, color: colorList1[colorType] },
            { offset: 1, color: colorList2[colorType] }
          ]);
        },
        borderRadius: 0, // 设置所有圆角
        // barBorderRadius: [50, 50, 0, 0]
      },
      data: [
        {
          value: press,
          label: {
            show: true,
            position: 'center',
            formatter: '{d|{d}}%',
            rich: {
              d: {
                fontSize: 12,
                color: '#fff'
              }
            },
            color: '#fff'
          },
          itemStyle: {
            borderRadius: 0, // 设置当前单个占比圆角
            shadowColor: '#2a2a34'
          }
        },
        {
          value: branchTotal - press,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            normal: {
              color: '#525252'
            }
          }
        }
      ]
    }
  ]
};

图例九

option = {
  backgroundColor: '#333',
  series: [
    {
      type: 'pie',
      radius: [60, 90],
      center: ['50%', '50%'],
      itemStyle: {
        color: function (params) {
          let colorList1 = ['#0055CB', '#27B7FF', '#8CA2FF', '#ED2D98', '#27B7FF', '#ED2D98','#0055CB','#8CA2FF',];
          let colorList2 = ['#00EAD1', '#F408AB', '#4F09F3', '#FF793B', '#F408AB', '#FF793B','#00EAD1','#4F09F3',];
          return new echarts.graphic.LinearGradient(0, 0, 0.8, 1, [
            { offset: 0, color: colorList1[params.dataIndex] },
            { offset: 1, color: colorList2[params.dataIndex] }
          ]);
        },
        barBorderRadius: [50, 50, 0, 0] // 统一设置四个角的圆角大小
      },
      label: {
        normal: {
          show: true,
          color: '#fff',
          fontSize: 14,
          formatter: function (params) {
            return params.data.Name + ' ' + params.data.value + '场';
          }
        }
      },
      labelLine: {
        length: 30,
        color: '#fff',
        length2: 0
      },
      data: [
        { value: 40, name: '1', Name: '奉节一中' },
        { value: 38, name: '2', Name: '奉节一中' },
        { value: 32, name: '3', Name: '奉节一中' },
        { value: 30, name: '4', Name: '奉节一中' },
        { value: 30, name: '5', Name: '奉节一中' }
      ]
    },
    {
      type: 'pie',
      radius: [50, 51]
    }
  ]
};

图例十

let colorList1 = ['#2B8EF3', '#58CF99', '#FF9F52'];
let colorList2 = ['#ABD1FF', '#AFE8CE', '#FFDFC6'];
let colorList3 = ['#D2E6FF', '#E7FFF4', '#FFEEE0'];
let colorList4 = ['#4A9AFC', '#1DDF87', '#FFBF8B'];
let colorType = 0;
let currValue = 30;
let branchTotal = 100;
let unit = '%';
option = {
  series: [
    {
      z: 1,
      type: 'pie',
      clockwise: true, // 逆时针
      hoverAnimation: false,
      radius: ['82%', '95%'],
      label: {
        show: false
      },
      itemStyle: {
        color: colorList1[colorType],
        borderRadius: 80
      },
      data: [
        {
          value: currValue,
          label: {
            show: true,
            borderRadius: 20,
            padding: 9,
            position: 'center',
            formatter: `\n{d|{d}} {unit|${unit}}`,
            rich: {
              d: {
                fontSize: 26,
                fontWeight: 600,
                color: '#000'
              },
              unit: {
                fontSize: 20,
                fontWeight: 600,
                color: '#3C3B3B'
              }
            },
            color: '#000'
          },
          itemStyle: {
            borderRadius: 60,
            shadowColor: '#2a2a34'
          }
        },
        {
          value: branchTotal - currValue,
          //不需要显示的数据，颜色设置成和背景一样
          itemStyle: {
            normal: {
              color: colorList2[colorType]
            }
          }
        }
      ]
    },
    // 尾端小圆点 饼图
    {
      z: 2,
      type: 'pie',
      // 饼图大小跟外层极坐标系相同，需手动调试
      radius: ['76%', '90%'],
      hoverAnimation: false,
      startAngle: 180,
      endAngle: 0,
      silent: 1,
      data: [
        // 实际值，背景色透明
        {
          name: '',
          value:
            currValue > 75
              ? (25 - (100 - currValue)) / 100
              : (25 + currValue) / 100,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          itemStyle: {
            color: 'transparent'
          }
        },
        {
          // 画中间的图标
          value: 0,
          label: {
            position: 'inside',
            backgroundColor: colorList4[colorType],
            borderRadius: 20,
            padding: 9
          }
        },
        // 透明填充 angleAxis 的max相同 max : 2
        {
          value:
            currValue > 75
              ? 1 - (25 - (100 - currValue)) / 100
              : 1 - (25 + currValue) / 100,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          itemStyle: {
            color: 'transparent'
          }
        }
      ]
    },
    {
      z: 0,
      type: 'pie',
      radius: ['0', '82%'],
      data: [1],
      itemStyle: {
        normal: {
          color: colorList3[colorType]
        }
      },
      label: {
        show: false
      }
    }
  ]
};

图例十一

const nameList = [
  { name: '教师讲授', value: 2614.5999, ave: '43:34' },
  { name: '互动交流', value: 268.1297, ave: '04:28' },
  { name: '独立学习', value: 0, ave: '00:00' },
  { name: '小组合作', value: 0, ave: '00:00' },
  { name: '随堂练习', value: 0, ave: '00:00' }
];
const selectedList = {}
nameList.forEach((na) => {
  if (na.value === 0) {
    selectedList[na.name] = false;
  } else {
    selectedList[na.name] = true;
  }
});
option = {
  color: ['#0061FF', '#8FBFFB', '#F88600', '#42E4B3', '#20EEFD', '#DDE4F0'],
  title: {
    text: '48分2秒',
    textStyle: {
      fontSize: 20,
      color: '#565759'
    },
    subtext: '课程总时长',
    subtextStyle: {
      color: '#9B9C9E',
      fontSize: 14,
      fontWeight: 'bold'
    },
    left: '37.5%',
    top: '43%',
    textAlign: 'center'
  },
  grid: {
    top: '5%',
    left: '0%',
    right: '0%',
    bottom: '5%',
    containLabel: true
  },
  legend: {
    icon: 'circle',
    itemGap: 25,
    orient: 'vertical',
    right: '25%',
    top: 'center',
    textStyle: {
      fontSize: 15,
      color: '#878787'
    },
    selected: selectedList
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '80%'],
      center: ['38%', '50%'],
      labelLine: {
        length: 28, // 改变标示线的长度
        lineStyle: {
          color: '#ccc' // 改变标示线的颜色
        }
      },
      label: {
        formatter: function (params) {
          return params.data.ave;
        },
        lineHeight: 30,
        fontSize: 14
      },
      data: nameList
    }
  ]
};

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

【知识分享】Echarts饼状图封装成组件
各类程序设计成品、文档、学习资料
02-29 840
Echarts饼状图封装成组件
ECharts 饼图：深入解析与优化实践
最新发布
csbysj2020
04-23 393
ECharts 饼图是一种实用的数据可视化工具，通过本文的介绍，相信读者已经对 ECharts 饼图有了更深入的了解。在实际应用中，我们可以根据具体需求对饼图进行优化，使其更好地服务于数据展示。
Vue+Echarts: 实现饼状图的详细教程
七一
03-10 1万+
4. 在模板中绘制饼图 最后，在 Vue 组件的模板中，你需要添加一个用来呈现饼图的 div 元素，并通过 ref 属性引用它。然后，你可以在模板中使用这个 ref 来调用 ECharts 实例。1、安装 ECharts 首先，你需要在项目中安装 ECharts。2、创建一个 ECharts 实例 在 Vue 组件中，你可以通过引入 ECharts 库，然后在组件中使用。方法中，你可以为饼图配置 ECharts 配置项。例如，你可以设置饼图的颜色、大小、数据等。3、配置 ECharts 在。
Echarts——饼图的vue组件
奔跑的狮子
12-16 602
/如果鼠标移入正在高亮的数据段时，不取消高亮。//鼠标移出后从鼠标位置开始循环。'{c}个\n\n{b}'导入:data数据即可。
vue引入Echarts 画饼图 详解
懒虫的博客
09-21 8177
vue引入Echarts 画饼图 详解
柱状图多维条形图vue_Vue + Echarts封装出好用又好看的图表组件
weixin_40001634的博客
12-18 572
前言Echarts相信很多小伙伴都了解过，甚至很多都已经用到过。没有了解过的小伙伴，可以先来和我一起了解一下它的作用和历史吧。ECharts，缩写来自Enterprise Charts，商业级数据图表，是由百度公司研发的(并且是开源的)，它最初是为了满足公司商业体系里各种业务系统(如凤巢、广告管家等等)的报表需求，在2012年之前这些图表需求都是使用flash去实现的， 后来由于flash退出舞台...
vue封装echarts饼图组件
08-24
- *1* [vue实现 【echarts中 “9种” Pie饼图图例】的组件封装及调用](https://blog.csdn.net/weixin_50450473/article/details/122424201)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra...
在vue中使用vue-echarts-v3的实例代码
10-18
在Vue.js应用中集成ECharts图表库，通常我们会选择使用vue-echarts-v3这个封装库，它使得在Vue环境中使用ECharts变得更加便捷。本文将详细介绍如何在Vue项目中使用vue-echarts-v3，包括安装、配置、以及具体实例。 ...
vue中使用echarts与echarts-gl 实现3D饼图环形饼图
weixin_47336389的博客
12-29 1万+
vue脚手架中安装echarts与echarts-gl，在vue页面中引入使用，实现3d饼图 环形图，移动上去有效果的那种
VUE+ echarts图表动态获取后台数据详解---饼图与折线图
qq_44016753的博客
06-05 1万+
总结一下自己最近项目中用echarts动态获取接口数据并画图的方法。 1、对原型的理解与需求分析 话不多说，先看下原型： 这里的需求是：选取el-date-picker中的自定义时间、点击本周、本月、本年时，将数据显示在饼图中 这里的需求是：选取el-date-picker中的自定义时间、点击本周、本月、本年时，将数据显示在饼图中这里的需求是：选取el-date-picker中的自定义时间、点击本周、本月时，折线图的X轴（时间轴）返回的日期格式是每天的统计量 这里的需求是：点击本年时，折线图的X轴（时间轴）
echarts 二次封装调用
qq_33871182的博客
11-28 718
调用 //饼图 var initChart= MyeCharts.pie(echartId,datas,params); //柱状图/折线图 var initChart= MyeCharts.myChart((echartId,seriesData,xAxisData,params)); 可重写 option如下 var options = { legend : { orient: 'ver...
echarts饼图组件
流浪者°
04-17 201
echatts饼图组件
【开发】【Echarts】饼图组件
沧海一比特的博客
09-29 112
【代码】【开发】echarts饼图组件。
Vue 中使用 ECharts 饼状图
_夜渐凉
02-28 9413
一，如下命令通过 npm 安装 ECharts npm install echarts --save 二，引入 ECharts 通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中require('echarts')得到 ECharts。 如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。 var ech...
vue echarts 画饼图
懒虫的博客
04-07 647
vue echarts 画饼图
echarts饼状图共用组件
dqwdnishi的博客
10-15 236
<template> <div style="width: 100%;height:100%;text-align: center;"> <div :id="pieShowId" class="pie" style="width: 100%;height: 100%"></div> </div> </template> <script> //import NProgress from 'nprogress'
vue中使用echarts饼图
weixin_52607811的博客
06-21 467
vue中的echarts饼图
vue引入Echarts画饼图详解
热门推荐
蓑笠翁
01-15 2万+
vue引入Echarts画饼图，圆环图、设置饼图上样式据等详解
[vue]-echarts
小花生编程
02-24 367
特征： 轻量，高效，按需绑定事件 支持按需导入ECharts.js图表​​和组件 支持组件调整大小事件自动更新视图 安装： npm(推荐方式) npm install echarts --save 2.手动安装 直接下载 echarts.js并在 HTML 文件中引入： <script src="path/to/vue-echarts/dis...
echart饼图图例 布局
02-08
在 ECharts 中，设置饼图的图例布局可以通过修改 `legend` 属性来完成。ECharts 提供了非常灵活的方式来定制图例的位置、方向以及更多细节选项。接下来详细介绍如何配置这些属性，并提供一些常见的布局调整方法。 ### 饼图图例布局的基本配置 #### 位置设定 (`left`, `top`, `right`, `bottom`) 你可以通过指定 `left`, `top`, `right`, 或者 `bottom` 参数来控制图例相对于图表容器四个边缘的距离。例如： - `"left": "center"`：将图例水平居中放置。 - `"top": "middle"`：垂直居中放置（需结合宽度考虑）。 - 其他如像素值 `"10%"` 或 `"50px"` 等也可以用来精确定位。 #### 方向选择 (`orient`) `orient` 控制着图例列表是以横向排列还是纵向排列： - `"horizontal"`：默认值，表示图例项按行排布。 - `"vertical"`：图例项按列竖直排列。 #### 示例代码 ```javascript option = { legend: { orient: &#39;vertical&#39;, // 图例项垂直排列 left: &#39;left&#39;, // 图例位于左侧 top: &#39;center&#39; // 图例外观居于中部 }, ... }; ``` 这会创建一个左边对齐且上下延伸的图例栏，适合当标签较长或数目较多的情况；如果希望减少占用空间，则可以选择右上角等更紧凑的位置摆放。 ### 更高级别的自定义 除了上述简单设置外，还可以进一步微调图例组件的行为和外观，比如更改文本颜色、字体大小、是否开启分页等功能。具体可以参考官方文档中的 [Legend Component](https://echarts.apache.org/zh/option.html#legend) 部分获取更多信息和支持的所有配置项。 下面是完整的例子，展示了不同风格下的图例布置方案： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>带有不同布局样式的 ECharts 饼图</title> <!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 60%;height:400px;"></div> <script type="text/javascript"> var chartDom = document.getElementById(&#39;main&#39;); var myChart = echarts.init(chartDom); // 构建基础配置项 option = { title: { text: &#39;销售情况统计&#39;, subtext: &#39;虚构数据&#39;, x:&#39;center&#39; }, tooltip : { trigger: &#39;item&#39; }, legend: [{ // 第一组图例，采用顶部水平居中布局 orient: &#39;horizontal&#39;, left: &#39;center&#39;, top: &#39;top&#39;, data: [&#39;电子产品&#39;, &#39;食品饮料&#39;, &#39;服装鞋帽&#39;] }, { // 第二组图例，采用右侧垂直布局 orient: &#39;vertical&#39;, right: 0, bottom: &#39;20%&#39;, selectedMode: false, // 关闭多选模式 textStyle: { fontSize: 12 }, data: [&#39;家居用品&#39;, &#39;图书音像&#39;, &#39;其他&#39;] }], series: [ { name: &#39;销量占比&#39;, type: &#39;pie&#39;, radius: &#39;55%&#39;, center: [&#39;50%&#39;, &#39;50%&#39;], labelLine: { show: true }, data:[ { value:335, name:&#39;电子产品&#39; }, { value:310, name:&#39;食品饮料&#39; }, { value:234, name:&#39;服装鞋帽&#39; }, { value:135, name:&#39;家居用品&#39; }, { value:1548, name:&#39;图书音像&#39; }, { value:250, name:&#39;其他&#39; } ] } ] }; myChart.setOption(option); document.addEventListener("DOMContentLoaded", function() {}); </script> </body> </html> ``` 在这个案例里，我们同时设置了两组图例——上面是三个主要类目的横置图例，右边则是一个包含次要分类的纵置图例。这种做法可以在有限的空间内清晰地组织复杂的信息层次结构。 --- 总之，在处理实际项目时，请根据页面的具体需求及视觉效果合理规划图例的位置与样式，确保整体美观性和易读性。如果有特殊情况需要特殊展现形式的话，不妨尝试探索更多可能性！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值