Echarts会遇到的功能（不定时更新）

本文链接：https://blog.csdn.net/qq_40386177/article/details/121923574

背景网格线颜色设置

yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#0B2C57'], // 这里设置网格颜色
        width: 1,
        type: 'solid'
      }
    },
    axisLine: {
      show: true, // 是否显示轴线
       lineStyle: {
          color: '#234F88',//刻度线的颜色
        }
    },
  },

柱形图渐变颜色和柱体大小

  series: [
    {
      name: '直接访问',
      type: 'bar',
      data: [],
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: '#00EDFD' }, // 颜色渐变
              { offset: 1, color: '#165DE8' }
            ]
          )

        },
      },
      barWidth: '20%' // 柱体大小
    },

  ]

X轴字体颜色和大小的更改，解决X轴内容过多会隐藏部分内容的问题，取消刻度

  xAxis: [
    {
      type: 'category',
      axisTick: { show: false }, // 取消刻度
      data: ['福州', '厦门', '宁德', '莆田', '泉州', '漳州', '龙岩', '三明', '南平', '平潭'],
      axisLabel: {
       interval: 0, // x轴内容过多会隐藏部分内容，这样可以显示隐藏掉的内容
        inside: false,
        textStyle: {
          color: '#fff', // 字体颜色
          fontSize: '10', // 字体大小
        }
      },
    }
  ],

Y轴内容显示不全的解决方法

 option = {
 grid: {
    left: 55
  }
  },

饼图和环形图文字大小

series: [
    itemStyle: {
        normal: {
          label: {
            textStyle: {
              color: 'white', // 字体颜色
              fontSize: 10, // 字体大小
              fontWeight: 'bolder' // 字体粗细
            }
          },
        }
      },
]

echarts附近空白位置太多

// 调整grid属性
  grid: {
    top: '5%',
    left: '8%',
    right: '5%',
    bottom: '11%'
  },

自定义鼠标移入显示的浮窗内容时，前面的圆点会消失

  tooltip: {
        // 加上params[0].marker就可以显示小圆点了
          formatter: function (params) {
            return params[0].marker + params[0].name + ': ' + params[0].value + '%';
          }
        },

柱状图头部显示数据

   series: [
          {
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                    fontSize: 10,
                  },
                  formatter: '\n{c}%',
                }

              },
            },
            barWidth: '20%'
          },

        ]

饼图自定义显示的数值格式，开启空心圆

  series: [
          {
            type: 'pie',
            radius: [30, 50], // 开启空心圆
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color: 'white',
                    fontSize: 10,
                  },
                  formatter: '{b}:{c}%', // 自定义格式
                },
              },
            },
          }
        ]

Y轴末尾添加单位

  yAxis: {
     name: '人数',// 在末尾添加单位
     nameTextStyle: {//y轴上方单位的颜色
       color: '#4160AE'
    },
  }

折线图折线点的大小、颜色、边框颜色，折线颜色

series:[
  symbol: 'circle',
  symbolSize: 7,   //设定实心点的大小
      itemStyle: {
        normal: {
          color: "ffffff", //改变折线点的颜色.
          borderColor: '#ffffff49', // 点边框颜色
          borderWidth: 8,
          lineStyle: {
            color: "#12C8EF", //改变折线颜色
          },
        },
      },
]