自定义柱状图（水滴图）的填坑之路

桃扇骨 2021-12-23 08:47 314阅读 0赞

先放一张水滴图的效果图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZXJyeUxlZV8xMjEw_size_16_color_FFFFFF_t_70]  
当然也可以是其它的形状，参考demo链接如下  
https://gallery.echartsjs.com/editor.html?c=xV8ro54T3i

我所做的水滴图就是参考这个demo来的，这个demo中，涉及到两个问题点：  
**1、就是如何应用你想要的形状。**  
demo中是在img中分别引入两种不同颜色深浅的图片。  
在series的data中以symbol的形式引入。  
这里引用的链接格式应该是如下文代码所示：

'image://'+你文件所在项目地址。
    // 例如我这个是webstorm中运行的项目。
    
    var apiDataServerBaseUrl = 'http://localhost:63342/zz-microservice-base-FE/';// 服务器地址
    let imgPath = 'image://' + apiDataServerBaseUrl + 'html/portal';
    img1: { 
      a: imgPath + "/style/bigScreenImg/drip/o.png",
      b: imgPath + "/style/bigScreenImg/drip/o-t.png"
    },

路径这个地方切记一定要找对。

**2、展示的数量，后台给的数据必须是数字，不能是字符串。**  
在这个地方我自己写的json，模拟的假数据。  
开始的时候直接写来一个数组。

datax:["86个", "38个", "67个", "100个", "40个"]

但是这里出现的问题是，无法绑定数据。  
所以还是**通过formatter的方式进行字符串格式化**。

//雨滴形成的横向柱状图
    let allYearRainDaysCharts = function (data) { 
    let waterDropElement = echarts.init(document.getElementById("jyts-charts"));
    let imgPath = 'image://' + apiDataServerBaseUrl + 'html/portal';
    let imgUrl = { 
      img1: { 
        a: imgPath + "/style/bigScreenImg/drip/o.png",
        b: imgPath + "/style/bigScreenImg/drip/o-t.png"
      },
      img2: { 
        a: imgPath + "/style/bigScreenImg/drip/g.png",
        b: imgPath + "/style/bigScreenImg/drip/g-t.png"
      },
      img3: { 
        a: imgPath + "/style/bigScreenImg/drip/y.png",
        b: imgPath + "/style/bigScreenImg/drip/y-t.png"
      },
      img4: { 
        a: imgPath + "/style/bigScreenImg/drip/b.png",
        b: imgPath + "/style/bigScreenImg/drip/b-t.png"
      },
      img5: { 
        a: imgPath + "/style/bigScreenImg/drip/p.png",
        b: imgPath + "/style/bigScreenImg/drip/p-t.png"
      }
    };
    
    let value = 1; // >0
    
    let color = ['#e77c16', '#48ffbc', '#03cafc', '#03cafc', '#b531ff'];
    
    let dataDrop = [];
    
    for (let i = 0; i < data.dataY.length; i++) { 
      let img = "img" + (i + 1);
    
      let dropItem = { 
        value: data.dataY[i],
        symbol: imgUrl[img].a,
        itemStyle: { 
          color: color[i]
        }
      };
    
      dataDrop.push(dropItem);
    }
    
    let option = { 
      title: { 
        textStyle: { 
          color: "#fff",
          fontSize: 16
        },
        left: '4.5%',
        top: "25%"
      },
      grid: { 
        left: "3%",
        top: "5%",
        bottom: "5%",
        right: "10%",
        containLabel: true
      },
      tooltip: { 
        trigger: "item",
        formatter: '{b}:{c}天'
      },
      xAxis: { 
        splitLine: { 
          show: false
        },
        axisLine: { 
          show: false
        },
        axisLabel: { 
          show: false
        },
        axisTick: { 
          show: false
        }
      },
      yAxis: [{ 
        type: "category",
        inverse: false,
        data: data.dataX,
        axisLine: { 
          show: false
        },
        axisTick: { 
          show: false
        },
        splitLine: { 
          show: false,
          lineStyle: { 
            type: "dashed",
            color: "#3e86dd"
          }
        },
        axisLabel: { 
          margin: 35,
          textStyle: { 
            color: "#fff",
            fontSize: fsz20,
          }
        }
      }
      ],
      series: [
        { 
          tooltip: { 
            show: false
          },
          z: 4,
          type: "pictorialBar",
          symbolSize: ['30', '30'],
          symbolRepeat: "fixed",
          data: [
            { 
              value: value,
              symbol: imgUrl.img1.b,
            },
            { 
              value: value,
              symbol: imgUrl.img2.b,
            },
            { 
              value: value,
              symbol: imgUrl.img3.b,
            },
            { 
              value: value,
              symbol: imgUrl.img4.b,
            },
            { 
              value: value,
              symbol: imgUrl.img5.b,
            }
          ]
        },
        { 
          z: 6,
          type: "pictorialBar",
          symbolSize: ['30', '30'],
          animation: true,
          symbolRepeat: "fixed",
          symbolClip: true,
          symbolPosition: "start",
          symbolOffset: [0, 0],
          data: dataDrop,
          label: { 
            normal: { 
              show: true,
              textStyle: { 
                fontSize: fsz30
              },
              formatter: function (series) { 
                return series.value + '天';
              },
              position: "right",
              offset: [35, 0]
            }
          },
        },
        { 
          type: "bar"
        }
      ]
    };

另附json

{ 
      "success": true,
      "code": 0,
      "count": 0,
      "totalNum": 1,
      "nowPage": 1,
      "data": { 
        "dataX": ["2015年", "2016年", "2017年", "2018年", "2019年"],
        "dataY": [40, 100, 67, 38, 86]
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZXJyeUxlZV8xMjEw_size_16_color_FFFFFF_t_70]: /images/20211223/cfb86de8fe4e4f9b9a13169ae04728b6.png