echarts记录篇(五)：关于饼图及柱状图tooltip数据formater自定义;及Y轴坐标数据间隔

一.柱状图例颜色+图例名称自定义写死的写法

(data) => {
    console.log("data:")
    console.log( data);
 if(data){
    var bw = 30;
    var itemGap = 10;
    var categories1 = [];
    var categories2 = [];
    var categories3 = [];
    var categories4 = [];
    var categories5 = [];
    var categories6 = []; 
    var name = [];
    var data1 = [];
    var data2 = [];
    var data3 = [];
    var data4 = [];
    var data5 = [];
    var data6 = []; 
    for (var i = 0; i < data.length; i++) {
      if (name.indexOf(data[i]["pur_yr"]) == -1) {
        name.push(data[i]["pur_yr"]);
      }
    }
    console.log(name);
    for (var i = 0; i < data.length; i++) {
      if (name[0] == data[i]["pur_yr"]) {
        categories1.push(data[i]["pur_org_no"]);
      } else if (name[1] == data[i]["pur_yr"]) {
        categories2.push(data[i]["pur_org_no"]);
      } else if (name[2] == data[i]["pur_yr"]) {
        categories3.push(data[i]["pur_org_no"]);
      } else if (name[3] == data[i]["pur_yr"]) {
        categories4.push(data[i]["pur_org_no"]);
      } else if (name[4] == data[i]["pur_yr"]) {
        categories5.push(data[i]["pur_org_no"]);
      } 
    }
    console.log(categories1)
  console.log(categories2) 
    console.log(categories3) 
    console.log(categories4) 
    console.log(categories5)
    console.log(categories6)

    for (var i = 0; i < data.length; i++) {
      if (name[0] == data[i]["pur_yr"]) {
        data1.push(data[i]["pur_mth_amt"]);
      } else if (name[1] == data[i]["pur_yr"]) {
        data2.push(data[i]["pur_mth_amt"]);
      } else if (name[2] == data[i]["pur_yr"]) {
        data3.push(data[i]["pur_mth_amt"]);
      } else if (name[3] == data[i]["pur_yr"]) {
        data4.push(data[i]["pur_mth_amt"]);
      } else if (name[4] == data[i]["pur_yr"]) {
        data5.push(data[i]["pur_mth_amt"]);
      } 


    }
 }
  
  
  console.log("data1:"+data1);
  console.log("data2:"+data2);
  console.log("data3:"+data3);
  console.log("data4:"+data4);
  console.log("data5:"+data5);
  console.log("data6:"+data6);
      if(data && data.length>0){
        return {
            grid: {
              top: "5%",
              right: "5%",
              left: "5%",
              bottom: "15%",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "none",
                label: {
                  show: false,
                  backgroundColor: "#6a7985",
                },
              },
              formatter: function (params) {
                //console.log(params,'params')
                 console.log("params[1].data:::"+params[1].data)
                    let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`
      
                    if (params) {
                      if (params[1] && params[1].data == '0') {
                        var noData1 = ''
                        noData1 = `style='display:none'`
                      } if (params[2] && params[2].data == '0') {
                        var noData2 = ''
                        noData2 = `style='display:none'`
                      }
                      if (params[3] && params[3].data == '0') {
                        var noData3 = ''
                        noData3 = `style='display:none'`
                      }
                      if (params[4] && params[4].data == '0') {
                        var noData4 = ''
                        noData4 = `style='display:none'`
                      }
                      if (params[5] && params[5].data == '0') {
                        var noData5 = ''
                        noData5 = `style='display:none'`
                      } 
                      return `
                      <div>${params[0].name}</div>
                      <div>总数：${(params[0] ? (params[0].data * 1).toLocaleString() : '暂无数据')}</div>
                      <div class='data4' ${noData4}>${circle}#2382E9"></span>博士：${    (params[4]  &&  params[4].data != '0'? ( params[4].data * 1).toLocaleString() : '0')}</div>
                      <div class='data3' ${noData3}>${circle}#00CBB4"></span>硕士：${    (params[3]  &&  params[3].data != '0'? ( params[3].data * 1).toLocaleString() : '0')}</div>
                      <div class='data2' ${noData2}>${circle}#8CFFF0"></span>本科：${    (params[2]  &&  params[2].data != '0'? ( params[2].data * 1).toLocaleString() : '0')}</div> 
                      <div class='data1' ${noData1}>${circle}#CE769B"></span>本科以下：${(params[1] &&   params[1].data != '0' ? (params[1].data * 1).toLocaleString() : '0')}</div> 
                    `
                    } 
              },
            },
            legend: {
              itemGap: itemGap,
              data: [name[0], name[1], name[2], name[3] ],
              bottom: "bottom",
              textStyle: {
                fontWeight: "normal",
                color: "#fff",
              },
              itemWidth: 20, // 图例标记的图形宽度。
              itemHeight: 20,
            },
            xAxis: {
              data: categories1,
              axisLabel: {
                show: true,
                fontSize: 12,
                color: "#fff",
                rotate: 0, // 文本旋转角度
              },
              axisLine:{  
               show:true,
                      lineStyle:{
                          color:'#fff',
                          width:1,
                      }
                      
                  },
              axisTick: {
                show: true,
              },
              splitLine: {
                //修改背景线条样式
                show: false,
              },
            },
            yAxis: {
                            max: function (value) {//Y轴坐标轴数据间隔调整
                if(value.max<=10){
                    return 10;
                }
              },
              minInterval:1,
              axisLabel: {
                fontSize: 12,
                color: "#fff",
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                //修改背景线条样式
                show: false,
              },
            },
            series: [
              {
                name: name[4],
                type: "line",
                //stack: "y",
                data: data5,
                barWidth: bw,
                barGap: "-10%",
                symbolSize: 0, // symbol的大小设置为0让线的小圆点不显示
                label: {
                  show: true,
                  position: "top",
                  color: "#fff",
                  fontSize:12,
                  formatter: (res) => {
                    return (res.value * 1).toLocaleString();
                  },
                },
                itemStyle: {
                  normal: {
                    color: "rgba(1,1,1,0)",
                    barBorderRadius: [0, 0, 0, 0],
                  },
                },
              },
              /*{
                name: name[5],
                // type: "bar",
                //stack: "total",
                data: data6,
                barWidth: bw,
                type: "line",
                symbol: 'none', 
                symbolSize: 0, // symbol的大小设置为0让线的小圆点不显示
                showSymbol: false, // 不显示symbol不显示
                itemStyle: {
                  normal: {
                    color: "rgba(0,0,0,0)",
                    barBorderRadius: [0, 0, 0, 0],
                  },
                },
                lineStyle: {
                    width: 0, // 线宽是0不显示线
                    color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
                },
                emphasis:{ // 鼠标经过时：
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)'
                    }
              },
              */
              {
                  name: name[3],
                  type: "bar",
                  stack: "total",
                  data: data4,
                  barWidth: bw,
                  itemStyle: {
                    normal: {
                      color: "#CE769B",
                      barBorderRadius: [0, 0, 0, 0],
                    },
                  },
                },
              {
                  name: name[2],
                  type: "bar",
                  stack: "total",
                  data: data3,
                  barWidth: bw,
                  itemStyle: {
                    normal: {
                      color: "#8CFFF0",
                      barBorderRadius: [0, 0, 0, 0],
                    },
                  },
                },
              {
                  name: name[1],
                  type: "bar",
                  stack: "total",
                  data: data2,
                  barWidth: bw,
                  itemStyle: {
                    normal: {
                      color: "#00CBB4",
                      barBorderRadius: [0, 0, 0, 0],
                    },
                  },
                },
              {
                name: name[0],
                type: "bar",
                stack: "total",
                data: data1,
                barWidth: bw,
                itemStyle: {
                  normal: {
                    color: "#2382E9",
                    barBorderRadius: [0, 0, 0, 0],
                  },
                },
              } 
            ],
          };
      }else{
        return {
            title: {
                text: '无相关数据',
                x: 'center',
                y: 'center',
                textStyle: {
                  fontSize: 16,
                  fontWeight: 'normal',
                  color: "#fff"
                }
              },
              series: [
                {
                  data: null
                }
              ] 
        } 
      }
    };
    

二.柱状图例颜色+图例名称自定义动态的写法

(data)=>{
  console.log(data);
  var categories1 = [];
      var categories2 = [];
      var name = [];
      var data1 = []; 
      var data2 = []; 
      for(var i=0 ; i< data.length ; i++){ 
          if(name.indexOf(data[i]['pur_yr']) == -1){
              name.push(data[i]['pur_yr'])
          } 
      } 
      for(var i=0 ; i< data.length ; i++){ 
          if(name[0] == data[i]['pur_yr']){
              categories1.push(data[i]['pur_org_no'])
              data1.push(data[i]['pur_mth_amt'])
          }else{
              categories2.push(data[i]['pur_org_no'])
              data2.push(data[i]['pur_mth_amt'])
          }
          
      }  
      if(data && data.length>1){
        return {
          grid: {
      top: "5%",
      right: "5%",
      left: "5%",
      bottom: "15%",
      containLabel: true,
    },
           tooltip: {
                  show:true,
                  trigger: 'axis',
                   formatter: (v) => {
                  //console.log(v[0].dataIndex)
                   let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`
                  //界面显示原数值
                          let v1 = data1[v[0].dataIndex]?Number(data1[v[0].dataIndex]).toLocaleString():'-';
                          let v2 = data2[v[0].dataIndex]?Number(data2[v[0].dataIndex]).toLocaleString():'-';
                  return `<div>
                      <div>${categories1[v[0].dataIndex]}</div>
                      <div>${circle}#3C7DF9"></span>${name[0]}：${v1.indexOf('.')!=-1?v1:v1+''}</div>
                      <div>${circle}#00CBB4"></span>${name[1]}：${v2.indexOf('.')!=-1?v2:v2+''}</div>
                      </div>`;
              },
           },
          legend: {
              bottom:"bottom",
              data:name,
      textStyle: {
        fontWeight: 'normal',      
        color: '#fff'
      },
              itemWidth: 20, // 图例标记的图形宽度。
              itemHeight: 20,
          },
          xAxis: {
             // offset: -50, 
              data:categories1,
              axisLabel: {
                  fontSize: 15,
                  color: '#fff',
                  //rotate:45, // 文本旋转角度
              },
              axisTick: {
        show: true,
      },
          
              axisLine:{  
                  show:true,
                  lineStyle:{
                      color:'#fff',
                      width:1,
                  }
                  
              },
          },
          yAxis: {
              max: function (value) {
                if(value.max<=10){
                    return 10;
                }
              },
              minInterval:1,
              axisLabel: {
                  fontSize: 12,
                  color: '#fff' 
              },
              axisLine:{
                  show:false,
                  lineStyle:{
                      color:'#fff', 
                      //type:'dashed',
                      width:1
                  }
                  
              },
              splitLine:{ //修改背景线条样式
                  show:false,//是否展示 
                  lineStyle:{
                      color:'#fff', 
                      //type:'dashed',
                      width:1
                  }
              }
          },
          series: [{
              name: name[0],
              type: 'bar',
              barGap: "45%",
              data: data1,
              barWidth:30,
              label: {
                  show: true,
                  position: 'top',
                  color:'#fff',
                  fontSize:12,
                  formatter:(res)=>{
                         
                          return  (res.value*1).toLocaleString()
                      }
              },
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {  
                              offset: 0,
                              color: '#3C7DF9'
                          }, 
                          {
                              offset: 1,
                              color: '#3C7DF9'
                          }]),
                  }
              },
          },
          {
              name: name[1],
              type: 'bar',
              data: data2,
              barWidth:30,
              label: {
                  show: true,
                  position: 'top',
                  fontSize:12,
                  color:'#fff',
                  formatter:(res)=>{
                         
                          return  (res.value*1).toLocaleString()
                      }
              },
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {  
                              offset: 0,
                              color: '#00CBB4'
                          }, 
                          {
                              offset: 1,
                              color: '#00CBB4'
                          }]),
                  }
              },
          }]
      };
      }else{
        return {
          title: {
              text: '无相关数据',
              x: 'center',
              y: 'center',
              textStyle: {
                fontSize: 16,
                fontWeight: 'normal',
                color: "#fff"
              }
            },
            series: [
              {
                data: null
              }
            ] 
      }
      }
  }

三/饼图的tooltp自定义及属性记录

(data)=>{
    console.log(data);
    return {
      animation: false,
      tooltip: {
        show: true,
        trigger: 'item',
        // formatter: '{b}<br />{c}<br />{d}%',
        tooltip: {
        show: true,
        trigger: 'item',
        // formatter: '{b}<br />{c}<br />{d}%',
        formatter: function(params) {
          var name = params.name;
          var value = params.value ? (params.value*1).toLocaleString():'-';
          var percent = (params.percent).toFixed(1) + '%';
          var color = params.color;
          return `
            <div style="display: flex; align-items: left; flex-direction: row; gap: 10px;">
              <div>
                <span style="display: inline-block; width: 10px; height: 10px; border-radius: 0; background-color: ${color}; margin-right: 6px;"></span>
                ${name}：${value.indexOf('.')!=-1?value:value+'.0'}亿元
              </div>
            </div>
          `;
        }
      },
      },
      legend: {
        top: 'center',
        right: 'right',
        textStyle: {
          fontSize: '22px',
          color: '#fff'
        },
        itemWidth: 20,
        itemHeight: 20,
        itemGap: 40,
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['50%', '80%'],
          center: ['40%', '53%'],
          minAngle: 5,  // 最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
          avoidLabelOverlap: true,   // 是否启用防止标签重叠策略
          avoidLabelOverlap: false,
          label: {
            show: true,
            // formatter: '{b}\n{d}%',
            formatter: function(params) {
              return `${params.name}\n${(params.percent).toFixed(1)}%`;
            },
            textStyle: {
              fontSize: '22px',
              color: '#fff'
            }
          },
          labelLine: {
            show: true,
            length: 20,
                length2: 20
          },
          labelLayout:{//让饼图label全部显示出来
            hideOverlap:false
          },
          data,
        }
      ]
    };
    }