echarts自定义鼠标移上去显示,自定义图例,自定义x轴显示

 提示：记录一下echarts常用配置,以免后期忘记

1.自定义鼠标移上去效果

tooltip: {

            show: true,

            trigger: "axis",

            axisPointer: {

                type: "shadow",//默认自定义效果

            },

            // //自定义鼠标移上去效果

            formatter: (v) => {

                console.log("打印一下====", v);

                const value1 = v[0].data;

                const value2 = v[1].data;

                const value3 = v[2].data;

                return `

                物资数量: ${value1}

                用户量: ${value2}

                闭环率: ${value3}%

           

`;

            },

        },

2.自定义图例

代码如下：

 legend: {

            textStyle: { fontSize: 16, color: "#fff" },

            itemWidth: 25,

            itemHeight: 15,

            itemGap: 15,

            right: "5%", //位置

            selectedMode: false,

            data: [

                {

                    name: "物资数量",

                    //icon: "triangle", //官方默认的形状可选择  'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

                    icon: `image://${tips2}`, //自定义图片图例

                    itemStyle: {

                        color: "#64D8D8",

                    },

                    textStyle: {

                        color: "#A9C0FF",

                    },

                },

                {

                    name: "用户量",

                    // icon: 'rect',

                    icon: `image://${tips3}`,

                    itemStyle: {

                        color: "#FFAE37",

                    },

                    textStyle: {

                        color: "#A9C0FF",

                    },

                },

                {

                    name: "闭环率",

                    // icon: 'rect',

                    icon: `image://${tips1}`,

                    itemStyle: {

                        color: "red",

                    },

                    textStyle: {

                        color: "#A9C0FF",

                    },

                },

            ],

        },

3.自定义X轴样式

 xAxis: {

            type: "category",

            data: xData,

            axisLine: {

                show: true, // 显示/隐藏X轴轴线

                lineStyle: {

                    color: "#CBCDDD", //x线距离

                    shadowColor: "#CBCDDD", //阴影颜色

                    shadowOffsetX: "20", //阴影水平方向上的偏移距离

                },

            },

            splitLine: {

                show: false,

            },

            axisTick: {

                show: false, // 显示/隐藏X轴刻度

            },

            axisLabel: {

                margin: 10, //距离x轴线的距离

                fontSize: 16,

                textStyle: {

                    color: "#89C3DD", //X轴文字颜色

                },

            },

        },

4.Y轴数值刻度自定义 

  yAxis: {

            type: 'value',

            scale: true, //根据数据自适应最大值最小值

            //min: 0,//设置最小值

            // max: 100,//设置最大值

            // interval: 20,//设置间隔

            // nameTextStyle: {

            //   color: '#122167',

            //   fontSize: 12,

            // }

          },

5.监听屏幕大小变化 ,echarts适配

// echarts适配

const echartResize = () => {

    chart.resize(); // 适配窗口大小

};

 // 监听事件

    window.addEventListener("resize", echartResize);

// 解绑事件

    window.removeEventListener("resize", echartResize); 

具体代码: