vue 双y轴echarts x轴显示省略号 鼠标滑入显示提示窗

需求：鼠标移入x轴显示全部文字并且是悬浮窗的形式

效果图

上代码 cv直接用 

html代码

<div id="histogramEchart" style="margin-top:20px;height:200px;width:100%"></div>

js代码

悬浮窗核心代码`

 reminder(myChart) {
 // params.componentType == 'xAxis'或者 params.componentType == 'yAxis' 看你需求是x还是y
 // 显示悬浮窗 获取div 有就不创建没有创建
 var divData = document.getElementById("extensionId");
    if (!divData) {
        var div = document.createElement("div");
        div.setAttribute("id", "extensionId");
        div.style.display = "block";
        document.querySelector("html").appendChild(div);
    }
    // 鼠标移入事件
    myChart.on("mouseover", function(params) {
        if (params.componentType == "xAxis") {
            var divData = document.querySelector("#extensionId");
            //显示的样式 自己写就行
            var elementStyle =
            "position: absolute;z-index: 99999;color: #000;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #fff;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px;border:1px solid #000";
            divData.style.cssText = elementStyle;
            divData.innerHTML = params.value;
            document.querySelector("html").onmousemove = function(event) {
            var divData = document.querySelector("#extensionId");
            var xx = event.pageX + 40; //x位置 自己调整
            var yy = event.pageY - 20; //y位置 自己调整
            divData.style.top = yy + "px";
            divData.style.left = xx + "px";
        };
    }
    });
    // 鼠标移出事件
    myChart.on("mouseout", function(params) {
       if (params.componentType == "xAxis") {
            var divData = document.querySelector("#extensionId");
            divData.style.cssText = "display:none";
        }
    });
},

柱状图核心代码

在下面得到echarts之后 传入这个方法 当然也可以写到一起

柱状图完整代码

柱状图 评价标准echarts

barEchartData() {
var data = [
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
{
evaluation: "安全管理体系建设与安全责任制落实",
pointcount: 50,
unitcount: 14
},
];
var xData =[];
var yProductNum = [];
var yNumber = [];
var myChart = echarts.init(document.getElementById("histogramEchart"));
myChart.clear();
data.forEach(it => {
xData.push(it.evaluation);
if (!it.pointcount) {
it.pointcount = 0;
}
if (!it.unitcount) {
it.unitcount = 0;
}
yProductNum.push(it.unitcount);
yNumber.push(it.pointcount);
});
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,0)", // 提示框浮层的背景颜色。
position: function(point, params, dom, rect, size) {
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];

// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = pointX + 10;
} else {
// 左边放的下
x = pointX - boxWidth - 10;
}

// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else {
// 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},

formatter: function(params) {
var res = "";
res += `
<div  
style="  
width: 180px;  
min-height: 60px;  
padding-bottom:5px;  
background: #fff;  
box-shadow: 0px 0px 6px 1px rgba(106, 106, 106, 0.16);  
border-radius: 5px 5px 5px 5px;  
"  
>  
<div  
style="  
width: 140px;  
font-size: 14px;  
font-weight: 500;  
color: #333333;  
line-height: 20px;  
padding-top: 15px;  
margin-left: 20px;  
margin-right: 20px;  
margin-bottom: 6px;  
"  
>  
${String(params[0].name).replace(/(.{10})/g, "$1<br/>")}  
</div>  
<div  
style="  
margin-top: 6px;  
margin-bottom: 6px;  
margin-left: 20px;  
margin-right: 20px;  
display: flex;  
align-items: center;  
justify-content: space-between;  
"  
>  
<div style="display: flex; align-items: center">  
<div  
style="  
width: 8px;  
height: 8px;  
background: linear-gradient(181deg, #1887ef 0%, #62b0f9 100%);  
border-radius: 0px 0px 0px 0px;  
"  
></div>  
<div  
style="  
font-size: 14px;  
width: 84px;  
font-weight: 400;  
color: #333333;  
margin-right: 6px;  
margin-left: 6px;  
"  
>  
总单位选择  
</div>  
</div>  
<div style="font-size: 14px; font-weight: 400; color: #333333">${  
params[0].value  
}</div>  
</div>  
<div  
style="  
margin-top: 6px;  
margin-bottom: 6px;  
margin-left: 20px;  
margin-right: 20px;  
display: flex;  
align-items: center;  
justify-content: space-between;  
"  
>  
<div style="display: flex; align-items: center">  
<div  
style="  
width: 8px;  
height: 8px;  
background: linear-gradient(180deg, #00b09a 0%, #27ddc6 100%);  
border-radius: 0px 0px 0px 0px;  
"  
></div>  
<div  
style="  
font-size: 14px;  
width: 84px;  
font-weight: 400;  
color: #333333;  
margin-right: 6px;  
margin-left: 6px;  
"  
>  
总扣分  
</div>  
</div>  
<div style="font-size: 14px; font-weight: 400; color: #333333">  
${params[1].value}  
</div>  
</div>  
</div>  
`;  
return res;  
}  
},  
grid: {  
//调整统计图上下左右边距  
top: 30,  
    right: 30,  
    left: 30,  
    bottom: 40  
    },  
    legend: {  
    orient: "horizontal",  
    x: "center",  
    y: "top",  
    textStyle: {  
    color: "#989898"  
},  
    itemWidth: this.$fontChart(0.12),  
    itemHeight: this.$fontChart(0.12),  
    align: "left"  
},  
dataZoom: [  
{  
    id: "dataZoomX",  
    show: true,  
    showDetail: false,  
    height: this.$fontChart(0.1),  
    xAxisIndex: [0],  
    bottom: 3,  
    startValue: 0,  
    endValue: 15,  
    handleStyle: {  
    color: "#d3dee5"  
   },  
textStyle: {  
color: "#fff"  
},  
    borderColor: "#90979c"  
    }  
],  
xAxis: [  
{  
    type: "category",  
    data: xData,  
    axisPointer: {  
    type: "shadow"  
    },  
    triggerEvent: true,  
    axisLabel: {  
    show: true,  
    textStyle: {  
    color: "#333",  
    fontSize: this.$fontChart(0.14)  
    },  
    interval: 0,  

    formatter: function(value) {
        if (value) {
            if (value.length >= 4) {
            return `${value.slice(0, 4)}...`;
        } else {
            return value;
    }
}
}
},
    axisLine: {
        // X轴线的颜色
        lineStyle: {
        color: "#979797",
        width: 1
        }
    }
}
],
yAxis: [
{
    splitLine: {
        //控制刻度横线的显示
        show: false
    },
    type: "value",
    name: "数量",
    nameTextStyle: {
        ameLocation: "start",
        fontSize: this.$fontChart(0.14)  
    },  
    axisLabel: {  
        formatter: "{value}",  
        show: true,  
        textStyle: {  
        color: "#333",  
        fontSize: this.$fontChart(0.14)
    }
},
    axisLine: {
        // Y轴线的颜色、和轴线的宽度
        lineStyle: {
        color: "#979797",
        width: 1
    }
}
},
{
    splitLine: {
        show: false
    },
    name: "扣分",
    type: "value",
    nameTextStyle: {
        fontSize: this.$fontChart(0.14)  
    },  
    axisLabel: {  
        formatter: "{value}",  
        show: true,  
        textStyle: {  
        color: "#333",  
        fontSize: this.$fontChart(0.14)
        }
    },
    axisLine: {
        lineStyle: {
        color: "#979797",
        width: 1
        }
    }
}
],
series: [
    {
    name: "选择",
    type: "bar",
    barWidth: this.$fontChart(0.15),
    yAxisIndex: 0,
    data: yProductNum,
    itemStyle: {
        //双Y轴B柱的柱体颜色
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#1887EF" },
            { offset: 1, color: "#62B0F9" }
            ])
    }
   }
},

{
    name: "扣分",
    type: "bar",
    barWidth: this.\$fontChart(0.15),
    yAxisIndex: 1,
    data: yNumber,
itemStyle: {
    //双Y轴A柱的柱体颜色
    normal: {
        // 颜色渐变
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#00B09A" },
        { offset: 1, color: "#27DDC6" }
        ])
    }
}
}
]
};
    myChart.setOption(option);
    this.reminder(myChart);
    myChart.off("click");
    myChart.on("click", params => {
    //点击事件
    });
    myChart.resize();
    window.addEventListener("resize", function() {
    myChart.resize();
    });
}

echarts自定义legend样式

pie() {
    let chartDom = document.getElementById("pie1");
    let myChart = this.$echarts.init(chartDom);

    let option;
    let data = [
        {
            value: 1048,
            name: "Search Engine",
            num: 100,
        },
        {
            value: 735,
            name: "Direct",
            num: 110,
        },
        {
            value: 580,
            name: "Email",
            num: 10,
        },
        {
            value: 484,
            name: "Union Ads",
            num: 101,
        },
        {
            value: 300,
            name: "Video Ads",
            num: 101,
        },
    ];
    option = {
        title: {
            text: "设备开关机时长占比",
            // subtext: "Data from: Heinz 2003",
            textStyle: {
            color: "#fff",
            fontSize: 14, //文字字号
            fontWeight: "normal",
        },
    },
    //饼图中间显示文字
    tooltip: {
        trigger: "item",
    },
    grid: {
        left: "3%",
        right: "7%",
        bottom: "11%",
        top: "11%",
        containLabel: true,
    },
    //开始legend样式
    legend: {
        //对图形的解释部分
        //类型位置配置
        // data: ["Email1", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        // orient: "vertical",
        // left: "left",
        // top: "10%",
        // textStyle: {
        //   color: "#fff",
        // },
        type: "scroll",
        orient: "vertical",
        right: "5%",
        top: "center",
        itemWidth: 8, // 设置宽度
        itemHeight: 8, // 设置高度
        selectedMode: true,
        icon: "circle", //图标默认是长方形，而需求是小圆点。//添加
        textStyle: {
        color: "#fff",
    },
    formatter: function (name) {
        //添加
        let total = 0;
        let target;
        for (let i = 0; i < data.length; i++) {
        total += data[i].value;
        if (data[i].name === name) {
        target = data[i].value;
        }
    }
        var arr = [
         `{a|${name}}`, 
         `{b|${((target / total) * 100).toFixed(2)}%}`, 
         `{c|$${target}}`, 
        ];
    return arr.join(" ");
},


//结束legend样式

textStyle: {
    //添加
    padding: [8, 0, 0, 0],
    rich: {
    a: {
        fontSize: 15,
        width: 110,
    },
    b: {
        fontSize: 15,
        width: 70,
        color: "#fff",
    },
    c: {
        fontSize: 15,
    },
},
},
},
series: [
    
    {
        // name: "Access From",
        type: "pie",`
        radius: ["60%", "80%"],
        center: ['30%', '50%'],//饼图位置 第一个数值表示左右位置，第二个数值表示上下位置，
        avoidLabelOverlap: false,
        itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,`
    },
    label: {
        show: false,
        position: "center",
    },
// emphasis: {
//   label: {
//     show: true,
//     fontSize: "18",
//     fontWeight: "bold",
//   },
// },
    labelLine: {
        show: false,
    },
     data: data,
   },
],
};
option && myChart.setOption(option);
},