Echarts常见效果积累

1、

          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            borderColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC",
              },
            },
            textStyle: {
              color: "white",
            },
          },

如果只想显示一个属性，注释掉trigger:"axis"即可

2、

        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255,255,255,0)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255,255,255,1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        },

调整图表内部间距

grid: {
          x: 30, //左侧间距
          y: 15, //顶部间距
          x2: 20, //右部间距
          y2: 25 //底部间距,
          containLabel: true//防止标签看不见。最好添上这一行
        }

工具盒

 toolbox: {
            //可视化的工具箱
            show: true,
            feature: {
              magicType: {
                //动态类型切换
                type: ['bar', 'line']
              }
            }
          },

最大值，平均值

series: [
            {
              markPoint: {
                data: [
                  {
                    type: 'max',
                    name: '最大值'
                  }
                ]
              },
              markLine: {
                // 平均值
                data: [
                  {
                    type: 'average',
                    name: '平均值'
                  }
                ]
              }
            }
          ],

x轴标签不覆盖

xAxis: [
            {
              axisLabel: {
                interval: 0,//标签间距
                hideOverlap: true//标签覆盖隐藏
              }
            }
          ],

防止tooltip超出显示范围-confine: true

        tooltip: {
          confine: true //防止tooltip超出显示范围
        },