echarts配置踩坑

1、legend出不来
legend中data的值要对应series中的name,或者data中对应name

legend:{
    data: ["新增环境健康数","新增人数"],
},
series: [{
    data: [30, 25, 15, 20],
    type: 'line',
    name:'新增环境健康数',
},{
    data: [200, 100, 90, 100],
    type: 'line',
    name:'新增人数',
}]

2、双Y轴设置，Y轴数组存放两个对象，series中的yAxisIndex属性对应Y轴

yAxis: [
{
    name: "单位：(人)",
    type: 'value',
    min:5,
    max:30,
    interval:5,
},
{
    type: 'value',
    min:50,
    max:300,
    interval:50,// 间隔
}
],
series: [{
    data: [30, 25, 15, 20],
    type: 'line',
    yAxisIndex: '0',// 指定Y轴
},{
    data: [200, 100, 90, 100],
    type: 'line',
    yAxisIndex: '1',
}]

3、legend宽高属性

itemWidth: 15,//图例宽高
itemHeight: 5,

4、grid可以调整图表上下左右距离盒子距离
（比如Y轴上面的name没出来，可以将top调大，x轴name没出来可以将right调大）

grid: {
    left: '6%',
    right: '0%',
    bottom: '20%',
    top:'20%',
    containLabel: true
},

5、数据渐变色

series: [
{
   name: '献血人口数',
   type: 'bar',
   data: [3, 2, 1.8, 2.1, 3.9, 2.1, 1.5, 1, 2.1, 3.9],
   barWidth:'6px',// 柱状图，柱宽
   itemStyle:{
       normal:{
           color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [{
                       offset: 0,
                       color: 'rgba(29,245,110,1)' //  0%  处的颜色
                   },
                   {
                       offset: 1,
                       color: 'rgba(29,252,192,0)' //  100%  处的颜色
                   }
               ],
               global: false //  缺省为  false
           }
           barBorderRadius: 11,
       },
       
   }
}
]

6、X轴文字显示不全，三个字换行

axisLabel: {
   textStyle: {
       color: '#CBCBCB',
       fontSize: 10
   },
   formatter:function(value)  
       {  
           var ret = "";//拼接加\n返回的类目项  
           var maxLength = 3;//每项显示文字个数  
           var valLength = value.length;//X轴类目项的文字个数  
           var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
           if (rowN > 1)//如果类目项的文字大于3,  
           {  
               for (var i = 0; i < rowN; i++) {  
                   var temp = "";//每次截取的字符串  
                   var start = i * maxLength;//开始截取的位置  
                   var end = start + maxLength;//结束截取的位置  
                   //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                   temp = value.substring(start, end) + "\n";  
                   ret += temp; //凭借最终的字符串  
               }  
               return ret;  
           }  
           else {  
               return value;  
           }  
       }  
}

7、轴线、轴刻度隐藏

axisLine: {
   show: false, //隐藏轴线
},
axisTick:{       
   show:false //隐藏刻度线
},

8、legend自定义图例图标，react中需要以变量形式引入拼接在image://后面

import SexImg from '../../../assets/basicInfo/man.png'
import SexImg1 from '../../../assets/basicInfo/woman.png'
legend: [
	data:[{
	       name: "男",
	       textStyle: {
	           color: '#1C8FDE'
	       },
	       icon: 'image://' + SexImg  //引用自定义的图片
	   },{
	       name: "女",
	       textStyle: {
	           color: '#F51178'
	       },
	       icon: 'image://' + SexImg1  //引用自定义的图片
	}],
]

9、富文本

textStyle:{
      rich: {
          a0: {
              color: '#1C8FDE',
              fontSize:13,
          },
          a1: {
              color: '#F51178',
              fontSize:13,
          },
      }
  },
  formatter:function(name){
      let target;
      for(let i=0;i<sexData.length;i++){
          if(sexData[i].name===name){
              target=sexData[i].value
              return '{a'+i+'|' + target+ '%}'
          }
      }
  }