2 lines
1.4 KiB
JavaScript
2 lines
1.4 KiB
JavaScript
import{a as m,r as u,s as _,H as g,cG as y,o as b,h as D,i as l,t as n}from"./index.e8334860.js";import{u as L}from"./useECharts.5a7ae481.js";import{c}from"./colors.69d1b0cd.js";const w={class:"bg-[#1D2D35] p-10px"},C={class:"text-base"},j=m({__name:"LineCharts",props:{loading:Boolean,data:{type:Object,default:()=>{}}},setup(f){const t=f,i=u(null),{setOptions:x}=L(i),o=_({x_axis:[],series:[]});function p(e){const s={legendData:[],series:[]};return e.series.forEach(({name:a,data:d},h)=>{const r=c[h%c.length];s.legendData.push(a+""),s.series.push({name:a,data:d,type:"line",smooth:!1,itemStyle:{color:r.itemColor},areaStyle:{color:r.areaColor}})}),s}return g(()=>t.data,e=>{if(e){e.x_axis,e.series,o.x_axis=e.x_axis,o.series=e.series;const s=p({x_axis:e.x_axis,series:e.series});x({grid:{left:"2%",right:"20px",top:"10%",bottom:"2%",containLabel:!0},legend:{data:s.legendData,top:"0%",right:"0",textStyle:{color:"#ffffff"}},tooltip:{trigger:"axis",axisPointer:{lineStyle:{width:1,color:"#019680"}}},xAxis:{type:"category",data:o.x_axis.map(a=>y(a).format("HH:mm")),axisTick:{show:!1},axisLine:{show:!1},axisLabel:{color:"#fff"}},yAxis:[{type:"value",axisTick:{show:!1},axisLine:{show:!1},axisLabel:{color:"#fff"},splitLine:{lineStyle:{type:"dashed"}}}],series:s.series})}},{immediate:!0}),(e,s)=>(b(),D("div",w,[l("div",C,n(t.data.name)+"\uFF08"+n(t.data.unit)+"\uFF09",1),l("div",{ref_key:"chartRef",ref:i,class:"w-full h-300px"},null,512)]))}});export{j as default};
|