static/js/BarChart.BhtXtCgr.js

import{c as e,e as t,k as a,d as o,r,o as i,bg as l,bh as s,l as n,w as d,a4 as c,a0 as m,n as p,G as f}from"./index.9PHSMUIB.js";import{E as h}from"./el-card.DWbysKpS.js";import"./el-tooltip.l0sNRNKZ.js";import{E as u}from"./el-popper.e9kr8u9Q.js";import{L as g,i as y}from"./index.DNYq9Wso.js";import{_ as x}from"./_plugin-vue_export-helper.BCo6x5W8.js";import"./index.D6nSmJHY.js";import"./isUndefined.DgmxjSXK.js";const v={viewBox:"0 0 1024 1024",width:"1.2em",height:"1.2em"};const w={name:"ep-download",render:function(o,r){return e(),t("svg",v,r[0]||(r[0]=[a("path",{fill:"currentColor",d:"M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696l236.288-236.352l45.248 45.248L508.8 704L192 387.2l45.248-45.248L480 584.704V128h64z"},null,-1)]))}},b={class:"title"},L=["id"],S=x(o({__name:"BarChart",props:{id:{type:String,default:"barChart"},className:{type:String,default:""},width:{type:String,default:"200px",required:!0},height:{type:String,default:"200px",required:!0}},setup(t){const o=t,x={grid:{left:"2%",right:"2%",bottom:"10%",containLabel:!0},tooltip:{trigger:"axis",axisPointer:{type:"cross",crossStyle:{color:"#999"}}},legend:{x:"center",y:"bottom",data:["收入","毛利润","收入增长率","利润增长率"],textStyle:{color:"#999"}},xAxis:[{type:"category",data:["浙江","北京","上海","广东","深圳"],axisPointer:{type:"shadow"}}],yAxis:[{type:"value",min:0,max:1e4,interval:2e3,axisLabel:{formatter:"{value} "}},{type:"value",min:0,max:100,interval:20,axisLabel:{formatter:"{value}%"}}],series:[{name:"收入",type:"bar",data:[7e3,7100,7200,7300,7400],barWidth:20,itemStyle:{color:new g(0,0,0,1,[{offset:0,color:"#83bff6"},{offset:.5,color:"#188df0"},{offset:1,color:"#188df0"}])}},{name:"毛利润",type:"bar",data:[8e3,8200,8400,8600,8800],barWidth:20,itemStyle:{color:new g(0,0,0,1,[{offset:0,color:"#25d73c"},{offset:.5,color:"#1bc23d"},{offset:1,color:"#179e61"}])}},{name:"收入增长率",type:"line",yAxisIndex:1,data:[60,65,70,75,80],itemStyle:{color:"#67C23A"}},{name:"利润增长率",type:"line",yAxisIndex:1,data:[70,75,80,85,90],itemStyle:{color:"#409EFF"}}]},v=()=>{const e=new Image;e.src=S.value.getDataURL({type:"png",pixelRatio:1,backgroundColor:"#fff"}),e.onload=()=>{const t=document.createElement("canvas");t.width=e.width,t.height=e.height;const a=t.getContext("2d");if(a){a.drawImage(e,0,0,e.width,e.height);const o=document.createElement("a");o.download="业绩柱状图.png",o.href=t.toDataURL("image/png",.9),document.body.appendChild(o),o.click(),o.remove()}}},S=r("");return i((()=>{S.value=l(y(document.getElementById(o.id))),S.value.setOption(x),window.addEventListener("resize",(()=>{S.value.resize()}))})),s((()=>{S.value&&S.value.resize()})),(o,r)=>{const i=w,l=u,s=h;return e(),n(s,null,{header:d((()=>[a("div",b,[r[0]||(r[0]=c(" 业绩柱状图 ")),m(l,{effect:"dark",content:"点击试试下载",placement:"bottom"},{default:d((()=>[m(i,{class:"download",onClick:v})])),_:1})])])),default:d((()=>[a("div",{id:t.id,class:p(t.className),style:f({height:t.height,width:t.width})},null,14,L)])),_:1})}}}),[["__scopeId","data-v-0b34e13d"]]);export{S as default};