echarts各类配置

一、echarts更改坐标轴文字颜色及大小

X，y，轴坐标，中间刻度线都显示虚线的代码

xAxis: {
    data: anameArr,
    axisLabel: {
       show: true,
        textStyle: {
          color: '#c3dbff',  //更改坐标轴文字颜色
          fontSize : 14      //更改坐标轴文字大小
        }
     },
     axisTick: {
         show: false
     },
    axisLine:{
      lineStyle:{
        color:'#FFE8B7', //更改坐标轴颜色
        width: 1,
        type:'dashed'
      }
    },
   }
}

yAxis: [
    {
        type: 'value',
        scale : true,
        min : 0,
        splitNumber : 5,
        axisLine: {
            show: true,
            lineStyle: {
                width: 1,
                color: "#FFE8B7",
                type:'dashed'
            }
        },
        splitLine:{
            show: true,
            lineStyle: {
                width: 1,
                color:'#FFE8B7', //更改中间刻度线颜色
                type:'dashed'
            }
        }
    },

],

二、EChart图中的文字调整

1.legend 文字调整 textStyle 属性里

   "legend": {　　　　
     "orient": "vertical",　　　　
     "left": "left",　
     "textStyle": {　　　　
     "fontSize": 18　　
     }},      

2.tooltip 文字调整 textStyle 属性里

 "tooltip": {　　　
    　"trigger": "item",　　　　
     "formatter": "{a} <br\/>{b} : {c}%",　　
     "textStyle": {　　　　
     "fontSize": 18　　
     }},　

3.series 文字调整 label 属性里

"series": [{　　　　　　
        "label": {　　　　　　
        "normal": {　　　　　　　　
        "show": true,　　　　　　　　
        "textStyle": {　　　　　　　　　　
        "fontSize": 18　　　　　　　　　　　
        　}　　　　　　　　　　
         },
         },　　　　
         "lableLine": {　　　　　　
         "normal": {　　　　　　　
         　"show": true　　　　　　　　
         },　　　　　　　
         }　
         }]

三、echarts坐标轴的name属性更改位置

name: 'name',
    nameTextStyle: {
    padding: [0, 0, 0, 10]    // 四个数字分别为上右下左与原位置距离
    }

四、echarts环形图如何添加指示线指示文字

如何在环形图上添加指引线和文字呢？

在series中label：中加上

normal: {show: true,position: 'outside'},

labelLine：中加上 labelLine: { normal: {show: true, length: 20,length2: 20,lineStyle: {color: '#333' } } }

 chart07(){
        let myChart = echarts.init(document.getElementById("Circlechart"));       
        let option = {
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
              orient: 'horizontal',
              x: 'center',
              y : 'bottom',
              data:[]
          },
          series: [
              {
                  name:'访问来源',
                  type:'pie',
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                      normal: {
                          show: true,   
                          position: 'outside'
                      },
                      emphasis: {
                          show: true,
                          textStyle: {
                              fontSize: '30',
                              fontWeight: 'bold'
                          }
                      }
                  },
                  //添加指示线，长度可以自己调整，线的颜色可以不用写，会根据环形图的颜色显示现的颜色
                  labelLine: {
                      normal: {
                          show: true,
                          length: 20,
                          length2: 20,
                          lineStyle: {
                              color: '#333'
                          }
                      }
                  },
                  data:[]
              }
          ]
        };
      myChart.setOption(option);
      }，

五、解决echarts图形由于label过长导致文字显示不全问题

字符串模板

模板变量：

｛a｝:系列名

｛b｝:数据名

｛c｝:数据值

｛d｝:百分比

正常直接会写成 formatter: '{b|{b}}\n{c}\n{per|{d}%} ',

问题：当指示线处的文字过长的时候我们就需要做处理，进行折行操作

label: {
    normal: {
      formatter(v) {
        let text = v.name;
        let value_format = v.value;
        let percent_format = Math.round(v.percent) + '%';
        if (text.length <= 6) {
          return `${text}\n${value_format}\n${percent_format}`;
        } else if (text.length > 6 && text.length <= 12) {
          return text = `${text.slice(0, 6)}\n${text.slice(6)}\n${value_format}\n${percent_format}`
        } else if (text.length > 12 && text.length <= 18) {
          return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12)}\n${value_format}\n${percent_format}`
        } else if (text.length > 18 && text.length <= 24) {
          return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18)}\n${value_format}\n${percent_format}`
        } else if (text.length > 24 && text.length <= 30) {
          return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24)}\n${value_format}\n${percent_format}`
        } else if (text.length > 30) {
          return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18, 24)}\n${text.slice(24, 30)}\n${text.slice(30)}\n${value_format}\n${percent_format}`
        }
      },
      textStyle: {
        fontSize: 14
      }
    }
  },

六、从后台拿到echarts的数据值，求出百分比

legend: {
    orient: 'vertical',
    icon:"circle",
    x:'left',      //可设定图例在左、右、居中
    y:'bottom',     //可设定图例在上、下、居中
    padding:[80,50,15,30],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
    formatter(name) {
        let totals = oneNew + oneRepeat + light;
        switch (name) {
            case '新':
                return  '新'+ ' ' +(Math.round(oneNew/totals * 10000) / 100.00 + '%');
            case '重':
                return  '重'+ ' ' +(Math.round(oneRepeat/totals * 10000) / 100.00 + '%');
            case '轻':
                return  '轻'+ ' ' +(Math.round(light/totals * 10000) / 100.00 + '%'); 
        }
        return  name + "({d}%)"
    },
    textStyle: {
        color: "#FFE8B7", // 文字的颜色。
        fontSize: this.getW(30), // 文字的字体大小。
    }
},

series：[
label:{
    normal:{
        show : false,
        formatter(v) {
            let text = v.name;
            let value_format = v.value;
            let percent_format = Math.round(v.percent) + '%';
            return `${percent_format}\n${text}`;
        },
        textStyle:{
            fontSize:this.getW(24),
            color:'#FFE8B7'
        },
    }
}
]

七、echarts图上当鼠标移入显示内容名称后加上冒号

getecharts(){
  let chart3 = echarts.init(document.getElementById('echarts'))
  let option3 = {
    tooltip: {
      trigger: 'axis',
      axisPointer : {
        type : 'shadow'
      }

    },
    toolbox: {

    },
    legend: {
      show:true,
      x: 'right', //居右显示
      data: ['直接访问','邮件营销', '联盟广告','视频广告','搜索引擎','百度'],
      textStyle: {
        fontSize: 12,
        color:'#999999',
      }
    },
    grid: {
      top:'13%',
      left: '0',
      right: '4%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: '年龄',
        data: this.ageList,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '人数',
        // min: 0,
        // max: 250,
        // interval: 50,
        minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '邮件营销',
        type: 'bar',
        barWidth : 20,//柱图宽度
        data: this.agedata1List,
        itemStyle:{
          normal:{color:'#E93F33'}
        }
      },
      {
        name: '联盟广告',
        type: 'bar',
        barWidth : 20,//柱图宽度
        data: this.agedata2List,
        itemStyle:{
          normal:{color:'#FF9900'}
        }
      },
      {
        name: '视频广告',
        type: 'bar',
        barWidth : 20,//柱图宽度
        data: this.agedata3List,
        itemStyle:{
          normal:{color:'#FFD500'}
        }
      },
      {
        name: '搜索引擎',
        type: 'bar',
        barWidth : 20,//柱图宽度
        data: this.agedata4List,
        itemStyle:{
          normal:{color:'#95C81A'}
        }
      },
      {
        name: '百度',
        type: 'bar',
        barWidth : 20,//柱图宽度
        data: this.agedata5List,
        itemStyle:{
          normal:{color:'#46A2FF'}
        }
      },
      {
        name: '直接访问',
        type: 'line',
        data: this.agedata6List,
        itemStyle:{
          normal:{color:'#FFBF51'}
        }
      }
    ]

  }
  chart3.setOption(option3,true)
},