echarts环形图的图例引导线水平加圆点

最新推荐文章于 2024-08-27 16:28:33 发布

学会沉淀呀

最新推荐文章于 2024-08-27 16:28:33 发布

阅读量2.4k

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_45372418/article/details/128380548

版权

本文介绍了如何在Echarts环形图中实现水平引导线，通过调整length属性使第一段引导线长度为0，然后调试length2以达到水平效果。同时讲解了在引导线末端添加圆点的方法，建议在Echarts实例编辑器中进行调试以获得理想效果。

摘要由CSDN通过智能技术生成

什么是引导线?

引导线就是label(文本标签)链接的线

在这里插入图片描述

引导线分两段

在这里插入图片描述

从拐弯的地方开始分，接近圆的是length(引导线1)，接近label的是length2(引导线2)

需求一：要求水平引导线

在这里插入图片描述

让第一段引导线长度为0，第二段自己调试长度

 let data = [
    {
    name: "业务1", value: 10 },
    {
    name: "业务2", value: 15 },
    {
    name: "业务3", value: 15 },
    {
    name: "业务4", value: 25 },
    {
    name: "业务5", value: 10 },
    {
    name: "业务6", value: 25 },
  ];
  let color = ["#fec101", "#D1C76B ", "#ff6226", "#f60000", "#2cc78f", "#2ca7f9"];
  // 这步主要是为了让小圆点的颜色和饼状图的块对应，如果圆点的颜色是统一的，只需要把itemStyle写在series里面
  let setLabel = (data) => {
   
    let opts = [];
    for (let i = 0; i < data.length; i++) {
   
      let item = {
   };
      item.name = data[i].name;
      item.value = data[i].value;
      item.label = {
   
        normal: {
   
          //控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
          show: true,
          //a和b来识别不同的文字区域
          formatter: [
            "{a|{b}}", //引导线上面文字
            "{b|}", //引导线下面文字
            // '{c|{c}}', //引导线下面文字
            // "{d}",
          ].join("\n"), //用\n来换行
          // formatter:'{d}',
          rich: {
   
            a: {
   
              left: 10,
              // padding: [0, -50, 20, -50],
              padding: [0, 0, 0, 2],
              color: color[i],
            },
            b: {
   
              height