可视化echarts的一些常用设置

写过好几次echarts的可视化了，但是每次写的时候还是百度和翻官方文档，效率比较低，现在记录一下一些常用的一些设置，以便以后的翻阅。

1. 在图表中添加一行文字

    var option = {
                graphic:{
           	        type:'text',
           	        left:'75%',
           	        top:'12%',
           	        z:2,
           	        zlevel:100,
           	        style:{
           	           text: '我是文字',
           	           textAlign:'center',
           	           fill:'rgb(224, 224, 224)',
           	           fontSize:'12'
           	        }
           	    },
       }
   
   

2. x轴文本内容太长
   （1）对文本进行倾斜

     xAxis: {
               data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111"],//x轴中的数据
               axisLabel : {//坐标轴刻度标签的相关设置。
                   interval:0,
                   rotate:"45"
               }
           },
   

   （2）x轴文字竖直显示

   axisLabel: {  
          interval: 0,  
          formatter:function(value)  
           {  
            return value.split("").join("\n");  
            }  
         }  
   

3. 折线图y轴标签值太长时显示不全

   grid: {
           left: 35
       },
   

4. 点击时候的阴影效果

   tooltip: {
             trigger: "axis",
             //  formatter: "{c}",
             axisPointer: {
               type: "shadow",
               shadowStyle: {
                 color: "rgba(103, 219, 255,0.15)"//阴影颜色
               }
             }
           },
   

5. x轴y轴、刻度线、轴的值

   axisLine: { show: false },//轴
   axisTick: { show: false },//刻度线
   axisLabel: {show: false },//刻度值
   

6. 饼图标示线

    labelLine: {
                 normal: {
                   length: 3, // 改变标示线的长度
                   lineStyle: {
                     color: "rgb(94, 109, 212)",
                     type: "dashed"
                   }
                 }
               },
    label: {//标示线的文字
                 normal: {
                   formatter: "{b}, {d}%",
                   textStyle: {
                     color: "#000"
                   }
                 }
               },
   

7. 定义新数组截取要显示的部分

   var Montedkeys = [];
   this.SendtoMontedkeys.forEach(item => {
           Montedkeys.push(item.substring(3, 6));
         });
   

8. map键值映射

   var AreasDistribute = this.allianceArea.proList.map(item => {
           return { name: item._id, value: item.allsum };
         });