在echart中添加多个字段，作比较来显示不同的五角星

 

 

1   data1: ['104', '61', '60', '43', '31', '29', '27', '12', '11', '11', '10', '5', '4', '3', '1', '1', '1', '1'],
    
    data2:['91', '40', '42', '30', '23', '15', '24', '8', '6', '15', '8', '4', '6', '3', '3', '2', '0', '2'],

  drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
       let myChart = echarts.init(document.getElementById("main"));
       this.data1=  this.data1.map(Number)//将字符串转换数字
       this.data2 = this.data2.map(Number)
       this.data3 = this.data1.map((num1, index) => {
        return this.data2[index]>num1 ? num1/2 : '' ;
          });
       this.data4 = this.data1.map((num2, index) => {
       return this.data2[index]>num2 ?  '':num2/2 ;
      });
 console.log( '浅色',this.data3,'蓝色',this.data4,this.data1,this.data2);
      this.data1.forEach(item => item * 1.2)  // 区间范围最大值、最小值
      this.array1 = this.data1.reduce((a,b) => a>b?a:b);
      10:30:5510:30:57this.array2 = this.data1.reduce((a,b) => a<b?a:b);
        // console.log(op1);
      // 指定图表的配置项和数据
      let option = {
         backgroundColor:"#6d979d",
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {
          show: true,
          // textStyle: { color: "#fff", fontSize: 22 },
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
   
        //  valueFormatter: (value) => '$'+value
        },
        legend: {
          data: ["销量"],
        },
        xAxis: [
          {
        // max: 80, //设置最大值 y轴数值 （不设置默认）
        // min: 0,  //设置最小值 y轴数值（不设置默认）
            //  nameGap: 20,
            // boundaryGap: false,
            // splitNumber : 13,
        // interval:5, // 步长
        min:0, // 起始
        max:this.array1, // 终止
            axisLabel: {
              // show:false,
              borderWidth: 1,
              margin: 2,    // 刻度标签与轴线之间的距离
            // fontSize : 5,
            formatter: function (val) {//百分比显示
                            return val + '%';
                        }
            },
          }
        ],
        yAxis: [{
          type:'category',
          axisLine: { //y轴
            show: false
          },
          axisTick: {
            show: false
          },
          inverse: true,
          "data":    ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子",'11','22','33','44','55','66','77','88','99','10','101','102'],
          axisLabel: {
            color: '#fff',
            fontSize: 14,
          },
         splitLine: {
                            show: false,
                        },
                    
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#ccc'
                            }
                        },
        },
        ],
        series: [{
          tooltip: {
            trigger: 'axis',
            show:false
          },
          name: '标准化',
          type: 'bar',
          barWidth: 15, // 柱子宽度
          label: {
            show: true,
            position: 'right', // 位置
            // color: '#00DEFF',
                   color:'rgb(255,255,255)',
            fontSize: 14,
            distance: 8, // 距离
            formatter: '{c} ' // 这里是数据展示的时候显示的数据
          },
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 10, 10],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#23c2d7'
              },
              {
                offset: 1,
                color: '#35e8df'
              }
              ])
            }
          },
          z :1,
          data: this.data1,
         

        },
          {//这里是作比较超出
              tooltip: {
            trigger: 'axis',
                show:false
          },
               name: 'duo',
               type: 'scatter',
               color: 'blue',
               symbolSize: 20,
                // symbolOffset :[-50, '50%'],
                symbol:  'path://M 200 200 l-40 100 100 -80 -120 0 100 80 -40 -120 -40 120z',//相当于是type
               z :3,//好像没用
            data: this.data4,      
          },
          {//这里是作比较未超出
         tooltip: {
            trigger: 'axis',
            show:false
                  },
            name: 'shao',
            type: 'scatter',
            color: '#23c2d7',
            symbolSize: 20,
                  z :2,
           symbol:  'path://M 200 200 l-40 100 100 -80 -120 0 100 80 -40 -120 -40 120z',//相当于是type
    
            data: this.data3,      
          },
           {//显示任务数
        tooltip: {
               trigger: 'axis',
        axisPointer: {
              type:'shadow'
            }
                },
         label: {
          show:false
               },
         symbol:'none',
       
            name: '66',
            type: 'scatter',
          data:this.data2    
    }

    
        ],
      

      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },