HTML
<div class="appealSignQuantityBox">? ? ? ? ? ?
? ? ? ? ? ? ? <button class="exportClass" @click="department_exportFigure">導(dǎo)出統(tǒng)計(jì)圖</button>
? ? ? ? ? ? <div class="AppealToStatisticsA e-box" id="AppealToStatisticsA"></div>
? ? ? ? </div>
JavaScript
import echarts from "echarts";
return{
}
getEchartsA(x,s,d,max) { //(名稱,統(tǒng)計(jì)1,統(tǒng)計(jì)2,最大值)
? ? ? let myChartA = echarts.init(document.getElementById("AppealToStatisticsA"));
? ? ? let option = {
? ? ? ? title: {
? ? ? ? ? // text: "按部門統(tǒng)計(jì)",
? ? ? ? ? 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: {//強(qiáng)制顯示所有
? ? ? ? ? ? interval: 0,
? ? ? ? ? },
? ? ? ? ? // axisLabel: {
? ? ? ? ? //? rotate: 320,
? ? ? ? ? //? interval: 0
? ? ? ? ? // }
? ? ? ? },
? ? ? ? yAxis: [
? ? ? ? ? {
? ? ? ? ? ? type: "value",
? ? ? ? ? ? min: 0,
? ? ? ? ? ? // max: max,
? ? ? ? ? ? ?minInterval: 1,
? ? ? ? ? }
? ? ? ? ],
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? name: "簽收統(tǒng)計(jì)",
? ? ? ? ? ? type: "bar",
? ? ? ? ? ? barGap: "30%",
? ? ? ? ? ? barWidth: "12",
? ? ? ? ? ? data: s
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "辦結(jié)統(tǒng)計(jì)",
? ? ? ? ? ? type: "bar",
? ? ? ? ? ? // barGap: "30%",
? ? ? ? ? ? barWidth: "12",
? ? ? ? ? ? data: d
? ? ? ? ? },
? ? ? ? ],
? ? ? };
? ? ? myChartA.setOption(option);
? ? ? //建議加上以下這一行代碼，不加的效果圖如下（當(dāng)瀏覽器窗口縮小的時(shí)候）
? ? ? 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;
? ? }
個(gè)人覺得很簡(jiǎn)單? 如果不懂請(qǐng)留言 , 看到了就會(huì)回哈 !
