import{i as m}from"./echarts.72dc8373.js";import{d as v,r as S,j as x,Y as b,w as k,o as w,c as R}from"./vue.adf17aba.js";const q=v({__name:"column-chart",props:{rowData:{type:Object,required:!0}},setup(h){const t=h,n=S(null);let e=null,o=null;x(()=>{d()}),b(()=>{o&&o.disconnect(),e&&(e.dispose(),e=null)}),k(()=>t.rowData,()=>{i()},{immediate:!0,deep:!0});function i(){if(!e||!t.rowData)return;const s=Object.keys(t.rowData.searchFrequencyRank[0]),l=Object.values(t.rowData.searchFrequencyRank[0]),f=Object.values(t.rowData.clickShare[0]),y=Object.values(t.rowData.conversionShare[0]),p={xAxis:{type:"category",data:s,axisLabel:{rotate:45,interval:0}},yAxis:[{id:0,type:"value",name:"Search Frequency Rank",nameTextStyle:{fontWeight:"bold",fontSize:14,color:"#333"},splitLine:{show:!0}},{id:1,type:"value",name:"Share Rate",nameTextStyle:{fontWeight:"bold",fontSize:14,color:"#333"},position:"right",splitLine:{show:!1},axisLabel:{formatter:"{value}%"}}],series:[{name:"Search Frequency Rank",data:l,type:"bar",barWidth:"18px",itemStyle:{color:"",borderRadius:[4,4,4,4]},yAxisIndex:0},{name:"Click Share",data:f,type:"line",yAxisIndex:1},{name:"Conversion Share",data:y,type:"line",yAxisIndex:1}],tooltip:{trigger:"axis",formatter:function(c){let u=c[0].axisValueLabel+"<br/>";return c.forEach(a=>{let r=a.value;a.seriesName==="Click Share"||a.seriesName==="Conversion Share"?r=r+"%":a.seriesName==="Search Frequency Rank"&&(r=r.toLocaleString()),u+=a.marker+" "+a.seriesName+": "+r+"<br/>"}),u}},legend:{data:["Search Frequency Rank","Click Share","Conversion Share"]}};e.setOption(p)}function d(){n.value&&(e=m(n.value),i(),o=new ResizeObserver(()=>{e==null||e.resize()}),o.observe(n.value))}return(s,l)=>(w(),R("div",{ref_key:"chartRef",ref:n,style:{width:"100%",height:"300px"}},null,512))}});export{q as _};
