3.24日echart里rader提示框点每个角展示不同的附加数据

 setEchart() {
      const source = {
        data: this.resDataPie,
        data2: this.resDataPie2,
        indicator: [
          { name: '参与学校', max: 100 },
          { name: '参与教师', max: 100 },
          { name: '参与学生', max: 100 },
        ],
      };
const buildSeries = function (data) {
  const helper = data.map((item, index) => {
    const arr = new Array(data.length);
    arr.splice(index, 1, item);
    return arr;
  });

  return [data, ...helper].map((item, index) => {
    return {
      type: 'radar',
      symbol: index === 0 ? 'circle' : 'none',
      symbolSize: 6,
      itemStyle: {
        color: '#26339E',
      },
      lineStyle: {
        color: index === 0 ? '#26339E' : 'transparent',
      },
      areaStyle: {
        color: index === 0 ? '#26339E' : 'transparent',
        opacity: 0.3,
      },
      tooltip: {
        show: index === 0 ? false : true,
      },
      z: index === 0 ? 1 : 2,
      data: [item],
    };
  });
};
      (() => {
        this.elStudentObj.myEcharts.setOption(
          this.elStudentObj.optionMerge(this.elStudentObj.option, {
            title: {
              text: '个性化作业与辅导参与情况',
              x: 'left',
              textStyle: {
                color: '#222',
                fontWeight: 'normal',
                fontSize: 18,
              },
            },

            radar: {
              radius: '50%',
              nameGap: 30,
              indicator: source.indicator,
            },
            tooltip: {
              // show: index === 0 ? false : true,
              borderColor: '#fff',
              formatter: function(v) {
                return (
                  source.indicator[v.seriesIndex - 1].name +
                  '<br>' +
                  v.marker +
                  '参与度' +
                  `<b style="float: right;">${source.data[v.seriesIndex - 1]}%</b>` +
                  '<br>' +
                  v.marker +
                  '参与学校数' +
                  ` &nbsp&nbsp <b style="float: right;">${source.data2[v.seriesIndex - 1]}所</b>`
                );
              },
            },
            series: buildSeries(source.data),
          })
        );
      })();
    },

  

posted @ 2022-03-24 14:46  丸子家的小樱子77  阅读(140)  评论(0)    收藏  举报