2 lines
2.9 KiB
JavaScript
2 lines
2.9 KiB
JavaScript
|
import{c as e,e as t,l as a,d as o,r,o as i,bO as l,bp as s,m as n,w as d,$ as c,n as m,O as f,N as p,ap as h,b4 as u}from"./index.Bz9M-RWj.js";import{E as g}from"./el-card.D8SNwTp8.js";import{L as y,i as x}from"./index.BICyyLb3.js";const v={viewBox:"0 0 1024 1024",width:"1.2em",height:"1.2em"};const b={name:"ep-download",render:function(o,r){return t(),e("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)]))}},w={class:"title"},L=["id"],S=u(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(e){const o=e,u={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 y(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 y(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(x(document.getElementById(o.id))),S.value.setOption(u),window.addEventListener("resize",()=>{S.value.resize()})}),s(()=>{S.value&&S.value.resize()}),(o,r)=>{const i=b,l=h,s=g;return t(),n(s,null,{header:d(()=>[a("div",w,[r[0]||(r[0]=f(" 业绩柱状图 ")),p(l,{effect:"dark",content:"点击试试下载",placement:"bottom"},{default:d(()=>[p(i,{class:"download",onClick:v})]),_:1})])]),default:d(()=>[a("div",{id:e.id,class:m(e.className),style:c({height:e.height,width:e.width})},null,14,L)]),_:1})}}}),[["__scopeId","data-v-0b34e13d"]]);export{S as default};
|