echarts记录篇(六)：象形图记录

(data) => {
    console.log(data);
    var categories1 = [];
    var name = [];
    var data1 = [];
    var data2 = [];    
    for (var i = 0; i < data.length; i++) {
      name.push(data[i]["pur_yr"]);
    }
    for (var i = 0; i < data.length; i++) {
      categories1.push(data[i]["pur_org_no"]);
      data1.push(data[i]["pur_mth_amt"]);
    }
    
    if(data && data.length>0){
      let maxValue = Math.max(...data1.map(item =>{return item}));
      for(let i = 0; i < data1.length; i++) {
        data2.push(maxValue)
      }
      return {
        grid: {
          top: "1%",
          right: "0",
          left: "0",
          bottom: "0%",
          containLabel: true,
        },
    
        tooltip: {
          show: true,
        },
        legend: {
          show: true,
          data: name,
          textStyle: {
            fontWeight: "normal",
            color: "#fff",
          },
          itemWidth: 10, // 图例标记的图形宽度。
          itemHeight: 10,
        },
        xAxis: {
          // offset: -50,
          show: false,
          axisLabel: {
            show: false,
            fontSize: 18,
            color: "#5DB3DC",
            rotate: 0, // 文本旋转角度
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            //修改背景线条样式
            show: false,
          },
        },
        yAxis: [
          {
            //左侧Y轴数据
            inverse: true, //如果数据数组倒置排序，加上此代码
            data: categories1,
            // 时间越长动画越慢
            animationDuration: 2000,
            animationEasing: "cubicInOut",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              //修改背景线条样式
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "16",
              },
              formatter: (value) => {
                for(let i = 0; i < 5; i++ ) { // 按照”50岁及以上” 字符量 11控制所有图表label
                  value += '\u0020'
                }
                return [`{a|${value}}`]
              },
              rich: {
                a: {
                  color: "#fff",
                  fontSize: '16px',
                  align: 'left',
                  width: 90
                }
              }
            },
          },
          {
             //右侧Y轴数据
             inverse: true, //如果数据数组倒置排序，加上此代码
             data: data1,
             position: 'right',//数据居右显示
             // 时间越长动画越慢
             animationDuration: 2000,
             animationEasing: "cubicInOut",
             axisLine: {
               show: false,
             },
             axisTick: {
               show: false,
             },
             splitLine: {
               //修改背景线条样式
               show: false,
             },
             axisLabel: {
               textStyle: {
                 color: "#fff",
                 fontSize: "16",
               },
               //padding:[0,30,0, 30],
               position: "right",
               formatter: (value) => {
                 return `{a|${(value * 1).toLocaleString()}}`;
               },
               rich: {
                  a: {
                    color: "#fff",
                    fontSize: '16px',
                    width: 70,
                    backgroundColor:'rgba(0,0,0,0)',
                    align:'right',
                  },
                }
             },
          },
        ],
        series: [
          {
            name: name[0],
            type: "pictorialBar",
            symbolRepeat: true,
            z: 2,
            symbolMargin: 5, //图形的两边间隔
            symbol: "roundRect",
            symbolClip: true, //是否裁剪图形
            symbolSize: [12, 35],
            symbolPosition: "start", //图形的定位位置。
            //symbolOffset: [-2, 0], //图形相对于原本位置的偏移。
    
            //stack: "total",
            data: data1,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "#3C7DF9",
              },
            },
          },
          {
            // full data
            type: 'pictorialBar',
            itemStyle: {
              opacity: 1
            },
            label: {
              show: false,
            },
            color: "#06114b",
            symbolMargin: 5, //图形的两边间隔
            symbol: "roundRect",//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            // symbolClip: true, //是否裁剪图形
            symbolSize: [12, 35],
            // symbolPosition: "start", //图形的定位位置。
            symbolOffset: [0,-1], //图形相对于原本位置的偏移。
            //stack: "total",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            symbolRepeat: 'fixed',
            data: data2,
            z: 1
          }
        ],
      };
    }else{
      return {
        title: {
            text: '无相关数据',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: 16,
              fontWeight: 'normal',
              color: "#fff"
            }
          },
          series: [
            {
              data: null
            }
          ] 
    }
    }
  };