HTML
<div class="appealSignQuantityBox">
<button class="exportClass" @click="department_exportFigure">导出统计图</button>
<div class="AppealToStatisticsA e-box" id="AppealToStatisticsA"></div>
</div>
JavaScript
import echarts from "echarts";
return{
}
getEchartsA(x,s,d,max) { //(名称,统计1,统计2,最大值)
let myChartA = echarts.init(document.getElementById("AppealToStatisticsA"));
let option = {
title: {
// text: "按部门统计",
textStyle: {
fontSize: "16px",
color: "#000"
}
},
grid: {
x: 50,
y: 30,
x2: 20,
y2: 50,
// y2: 65,
},
legend: {
// orient: "vertical",
// x: "right",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
xAxis: {
type: "category",
data: x,
axisTick: {
alignWithLabel: true,
boundaryGap: true,
show: true
// interval: 0,
},
axisLabel: {//强制显示所有
interval: 0,
},
// axisLabel: {
// rotate: 320,
// interval: 0
// }
},
yAxis: [
{
type: "value",
min: 0,
// max: max,
minInterval: 1,
}
],
series: [
{
name: "签收统计",
type: "bar",
barGap: "30%",
barWidth: "12",
data: s
},
{
name: "办结统计",
type: "bar",
// barGap: "30%",
barWidth: "12",
data: d
},
],
};
myChartA.setOption(option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）
window.addEventListener("resize", function() {
myChartA.resize();
});
},
department_exportFigure(){
let mycanvas = $("#AppealToStatisticsA").find("canvas")[0];
let image = mycanvas.toDataURL("image/png");
let $a = document.createElement('a');
$a.setAttribute("href", image);
$a.setAttribute("download", "");
$a.click();
$a.setAttribute("download", "echarts图片下载");
},
CSS
.exportClass {
float: right;
height: 28px;
color: #fff;
margin-left: 5px;
border-radius: 5px;
padding: 0px 10px;
background-color: #169bd5;
}
个人觉得很简单 如果不懂请留言 , 看到了就会回哈 !
