遇到的各种echarts属性—难找：写一篇博客长期记录

第一部分：echarts柱状图 调节柱子间间距

以 官网图为例：

 

 第二部分：折线图-点击legend,折线图宽度会发生改变

造成后果：Y轴显示不全

• 设定grid下的containLabel值为true即可
• 官方文档的解释是这样的

containLabel 为 false 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。
containLabel 为 true 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件

修改前的效果：左侧紧凑，下方显示不全

 修改后的效果： 

第三部分：柱状图上方显示数值

代码如下

 
itemStyle: {
   normal: {
     label: {
        show: true, //开启显示
        position: 'top', //在上方显示
        textStyle: {
        //数值样式
            color: 'black',
            fontSize: 12,
          },
       },
     },
  },复制

第四部分：提示框组件样式调整

tooltip: {
     backgroundColor: '#fff',
     borderColor: '#ddd',
     textStyle: { 'color': '#666' },
     color: ['#9799f3', '#0fd0b7', '#ffd351', '#6ebffb', '#f56b6d','#40c057','#6a89e2', '#ff8e43'],
     // 自定义添加单位
     formatter: function(params) {
        var relVal = params[0].name
        for (var i = 0, l = params.length; i < l; i++) {
         relVal += '<br/>' + params[i].marker + params[i].seriesName + ' &nbsp;&nbsp;' + params[i].value + '%'
         }
         return relVal
       }
       // valueFormatter: (value) => value + '%'  //直接加单位
 
       }复制

第五部分：环形图基础样式调整

option1: {
        tooltip: {
        bgColor: '#fff', //背景色
        formatter: '{b}: {c}个'
        },
 
        toolbox: {
              show: false
        },
        series: [
            {
             label: { show: true, formatter: '{b}:{d}%' },
             radius: ['20%', '35%'],
             center: ['50%', '50%']
            }
         ]
      },复制

 饼图与圆环图radius

 代码如下

series: [
    {
      radius: '50%',
      label: {
          fontSize: 20,
          show: true,
          formatter: '{b}:{d}%'
             }
       // radius: ['20%', '35%']
       // center: ['60%', '50%']
      }
  ]复制

 饼图label样式自定义设置

 代码如下

label: {
      fontSize: 14,
      formatter: function(param) {
         let text = param.data.name;
        if (text.length < 15) {
            return (
                   text +'\n' + param.data.value +'个' +'(' +param.percent +'%)');
         } else {
              return (
                  text.substring(0, 15) + '...' +'\n' + param.data.value +'个' +'(' +param.percent +'%)'
                   );
               }
          }
       }复制

饼图图例属性legend,工具栏属性toolbox

  代码如下

legend: {
        top: '1%',
        left: 'center',
        show: true,
        textStyle: { color: '#fff', fontSize: 20 }
      },复制

 第六部分：柱状图字体变大

图例变大

 代码如下

legend: {
   top: 10,
   itemWidth: 24,
   itemHeight: 24,
   icon: 'rect',
   left: 'center',
   padding: 0,
  
   textStyle: { color: '#fff', fontSize: 32, padding: [2, 0, 0, 0] },
   selectedMode: true,
   data: null
 },复制

样式调整：图例提示显示省略号

 

 代码如下

 legend: {
     top: '7%',
     formatter(name) {
     // const maxLen = 3
     // if (name.length > maxLen) {
     //   return name.substr(0, 3) + '...'
     // }
          return echarts.format.truncateText(name, 40, '12px Microsoft Yahei', '…')
     },
     tooltip: {
          show: true
     }
  },复制

 

X轴坐标字体大小

xAxis: {
   nameTextStyle: { color: '#fff', padding: [0, 0, -10, 0], fontSize: 16 },
   axisLabel: { color: '#fff', fontSize: 32 },
   axisTick: { show: false },
   splitLine: { show: false },
   axisLine: { lineStyle: { color: '#6785a3', width: 1 }, show: true },
   type: 'category',
   data: ['2022-10-30', '2022-10-29', '2022-10-28', '2022-10-27', '2022-10-26']
 },复制

y轴坐标字体变大

yAxis: {
   nameTextStyle: { padding: [0, 20, 2, 0] },
   axisLabel: { color: '#fff', fontSize: 16 },
   axisTick: { show: false },
   splitLine: {
     show: true,
     lineStyle: { color: '#6785a3', width: 1, type: 'dashed' }
   },
   axisLine: { show: false },
   type: 'value',
   name: ''
 },复制

提示框字体变大

 tooltip: {
    backgroundColor: 'rgba(2, 115, 194, 0.8)',
    borderColor: '#0bb2ff',
    textStyle: { color: '#fff',fontSize:32 },
    trigger: 'axis'
  }复制

y轴上单位间距与字体样式调整

yAxis: [
    {
      name: '单位：条',
      nameTextStyle: { fontSize: 32, padding: [0, 0, 30, 0] },
      axisLabel: { color: '#fff', fontSize: 32 },
      splitLine: { show: false }
    },
    // {
    //   name: '单位：条',
    //   nameTextStyle: { fontSize: 32, padding: [0, 0, 30, 0] },
    //   axisLabel: { color: '#fff', fontSize: 32 },
    //   splitLine: { show: false },
    // }
  ],复制

 柱状图双y轴

第一步：新增y轴

 代码入戏

 yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      // type: 'value',
      // name: 'Temperature',
      // //min: 0,
      // //max: 25,
      // //interval: 5, //间距
      // axisLabel: {
      //   formatter: '{value} °C'
      // }
    }
  ],复制

第二步：设置series折线数据对齐y轴右侧展示

 代码如下

series: [
    {
      name: 'Precipitation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]复制

echarts图形距离边框距离

 

 代码如下

grid: {
     top: '3%',
     left: '1%',
     right: '1%',
     bottom: '1%',
     containLabel: true
  },复制

第七部分：自定义图例 ：在methods中设置处理图例的函数

 函数如下

legend: {
     top: '1%',
     left: 'center',
     show: true,
     textStyle: { color: '#fff', fontSize: 20 },
     formatter: function(name) {
          return 'Legend ' + name; //在methods设置处理数据的函数
     }
},复制

第八部分：y轴属性分析

第一部分：隐藏y轴

 代码如下

yAxis: {
   show: true,
   axisLine: {
      show: false
    },
 },复制

 第二部分：y轴分割线样式调整

 代码如下

yAxis: [
         {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', // 分割线的类型：点阵：dotted，虚线dashed，直线solid
              color: 'rgba(255, 255, 255,0.1)'
            }
          }
       }],复制