@v-charts2/histogram
Version:
echarts 柱状图
8 lines (7 loc) • 16.3 kB
JavaScript
/* eslint-disable */
/**
* name: @v-charts2/histogram
* version: v1.0.1-alpha.4
* author: vxhly <pengchengou@gmail.com>
*/
var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,i)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,__spreadValues=(e,t)=>{for(var i in t||(t={}))__hasOwnProp.call(t,i)&&__defNormalProp(e,i,t[i]);if(__getOwnPropSymbols)for(var i of __getOwnPropSymbols(t))__propIsEnum.call(t,i)&&__defNormalProp(e,i,t[i]);return e};!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("numerify"),require("utils-lite"),require("echarts/components"),require("echarts/core"),require("echarts/features"),require("echarts/renderers"),require("vue"),require("echarts/charts")):"function"==typeof define&&define.amd?define(["exports","numerify","utils-lite","echarts/components","echarts/core","echarts/features","echarts/renderers","vue","echarts/charts"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@v-charts2/histogram"]=e["@v-charts2/histogram"]||{},e.numerify,e.utilsLite,e["echarts/components"],e.echartsLib,e["echarts/features"],e["echarts/renderers"],e.Vue,e["echarts/charts"])}(this,(function(e,t,i,n,o,a,r,l,s){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function p(e){if(e&&e.__esModule)return e;var t={__proto__:null,[Symbol.toStringTag]:"Module"};return e&&Object.keys(e).forEach((function(i){if("default"!==i){var n=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,n.get?n:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var d=c(t),u=p(o);const h={categoryAxis:{axisLine:{show:!1},axisTick:{show:!1},splitLine:{show:!1}},valueAxis:{axisLine:{show:!1}},line:{smooth:!0},legend:{top:20},grid:{containLabel:!0,top:100,left:20,right:20,bottom:20}},m=["#19d4ae","#5ab1ef","#fa6e86","#ffb980","#0067a6","#c4b4e4","#d87a80","#9cbbff","#d9d0c7","#87a997","#d49ea2","#5b4947","#7ba3a8"],y=["initOptions","loading","dataEmpty","judgeWidth","widthChangeDelay"],b=["grid","dataZoom","visualMap","toolbox","title","legend","xAxis","yAxis","radar","tooltip","axisPointer","brush","geo","timeline","graphic","series","backgroundColor","textStyle"];u.use([n.TitleComponent,n.TooltipComponent,n.GridComponent,n.DatasetComponent,n.TransformComponent,a.LabelLayout,a.UniversalTransition,r.SVGRenderer,r.CanvasRenderer,n.LegendComponent]);const f=(e,t,n,o="-")=>{if(isNaN(e))return o;if(!t)return e;if(i.isFunction(t))return t(e,d.default);n=isNaN(n)?0:++n;const a=`.[${new Array(n).join(0)}]`;let r=t;switch(t){case"KMB":r=n?`0,0${a}a`:"0,0a";break;case"normal":r=n?`0,0${a}`:"0,0";break;case"percent":r=n?`0,0${a}%`:"0,0.[00]%"}return d.default(e,r)};function g(e){const{innerRows:t,dimAxisName:i,dimension:n,axisVisible:o,dimAxisType:a,dims:r}=e;return n.map((e=>({type:"category",name:i,nameLocation:"middle",nameGap:22,data:"value"===a?v(r):t.map((t=>t[e])),axisLabel:{formatter:e=>String(e)},show:o})))}function v(e){const t=Math.max.apply(null,e),i=[];for(let n=Math.min.apply(null,e);n<=t;n++)i.push(n);return i}function x(e){const{meaAxisName:t,meaAxisType:i,axisVisible:n,digit:o,scale:a,min:r,max:l}=e,s={type:"value",axisTick:{show:!1},show:n},c=[];for(let p=0;p<2;p++)i[p]?c[p]=Object.assign({},s,{axisLabel:{formatter:e=>f(e,i[p],o)}}):c[p]=Object.assign({},s),c[p].name=t[p]||"",c[p].scale=a[p]||!1,c[p].min=r[p]||null,c[p].max=l[p]||null;return c}function O(e){const{axisSite:t,isHistogram:i,meaAxisType:n,digit:o,labelMap:a}=e;let r=i?t.right||[]:t.top||[];return a&&(r=r.map((e=>void 0===a[e]?e:a[e]))),{trigger:"axis",formatter(e){const t=[];return t.push(`${e[0].name}<br>`),e.forEach((e=>{const i=e.seriesName,a=~r.indexOf(i)?n[1]:n[0];t.push(['<span style="',`background-color:${e.color};`,"display: inline-block;","width: 10px;","height: 10px;","border-radius: 50%;","margin-right:2px;",'"></span>'].join("")),t.push(`${i}: `),t.push(f(e.value,a,o)),t.push("<br>")})),t.join("")}}}function j(e){const{innerRows:t,metrics:n,stack:o,axisSite:a,isHistogram:r,labelMap:l,itemStyle:s,label:c,showLine:p=[],dimAxisType:d,barGap:u,opacity:h,dims:m}=e;let y=[];const b={},f=r?a.right||[]:a.top||[],g=r?"yAxisIndex":"xAxisIndex",v=o&&(e=>{const t={};return Object.keys(e).forEach((i=>{e[i].forEach((e=>{t[e]=i}))})),t})(o);return n.forEach((e=>{b[e]=[]})),t.forEach((e=>{n.forEach((t=>{b[t].push(e[t])}))})),y=Object.keys(b).map(((e,t)=>{const n="value"===d?function(e,t){const i=Math.max.apply(null,t),n=[];for(let o=Math.min.apply(null,t);o<=i;o++){const i=t.indexOf(o);~i?n.push(e[i]):n.push(null)}return n}(b[e],m):b[e],a={name:null!=l[e]?l[e]:e,type:~p.indexOf(e)?"line":"bar",data:n,[g]:~f.indexOf(e)?"1":"0"};o&&v[e]&&(a.stack=v[e]),c&&(a.label=c),s&&(a.itemStyle=s);let r=h||i.get(a,"itemStyle.opacity");return"value"===d&&(a.barGap=u,a.barCategoryGap="1%",null==r&&(r=.5)),null!=r&&i.set(a,"itemStyle.opacity",r),a})),!!y.length&&y}function A(e){const{metrics:t,labelMap:i,legendName:n}=e;if(!n&&!i)return{data:t};return{data:i?t.map((e=>null==i[e]?e:i[e])):t,formatter:e=>null!=n[e]?n[e]:e}}function _(e,t){return e.map((e=>e[t[0]]))}const w={data:{type:[Object,Array],default:()=>({})},settings:{type:Object,default:()=>({})},width:{type:String,default:"auto"},height:{type:String,default:"400px"},beforeConfig:{type:Function},afterConfig:{type:Function},afterSetOption:{type:Function},afterSetOptionOnce:{type:Function},events:{type:Object},grid:{type:[Object,Array]},colors:{type:Array},tooltipVisible:{type:Boolean,default:!0},legendVisible:{type:Boolean,default:!0},legendPosition:{type:String},markLine:{type:Object},markArea:{type:Object},markPoint:{type:Object},visualMap:{type:[Object,Array]},dataZoom:{type:[Object,Array]},toolbox:{type:[Object,Array]},initOptions:{type:Object,default:()=>({})},title:[Object,Array],legend:[Object,Array],xAxis:[Object,Array],yAxis:[Object,Array],radar:Object,tooltip:Object,axisPointer:[Object,Array],brush:[Object,Array],geo:[Object,Array],timeline:[Object,Array],graphic:[Object,Array],series:[Object,Array],backgroundColor:[Object,String],textStyle:[Object,Array],animation:Object,theme:Object,themeName:String,loading:Boolean,dataEmpty:Boolean,extend:Object,judgeWidth:{type:Boolean,default:!1},widthChangeDelay:{type:Number,default:300},tooltipFormatter:{type:Function},resizeable:{type:Boolean,default:!0},resizeDelay:{type:Number,default:200},changeDelay:{type:Number,default:0},setOptionOpts:{type:[Boolean,Object],default:!0},cancelResizeCheck:Boolean,notSetUnchange:Array,log:Boolean,renderer:{type:String,default:"canvas",validator:e=>["svg","canvas"].indexOf(e)>-1}};function k(e,t){Object.keys(t).forEach((i=>{t[i]&&(e[i]=t[i])}))}const S=({echarts:e,props:t,canvas:i,options:n}={})=>{if(e)return;const{registeredEvents:o,_once:a,el:r}=n,l=(null==t?void 0:t.themeName)||(null==t?void 0:t.theme)||h;return e=u.init(i,l,__spreadValues({renderer:null==t?void 0:t.renderer},null==t?void 0:t.initOptions)),(null==t?void 0:t.data)&&T({props:t,options:n,echarts:e}),C({registeredEvents:o,echarts:e,props:t}),(null==t?void 0:t.resizeable)&&N({_once:a,props:t,el:r,echarts:e}),{echarts:e}},T=({props:e,options:t,echarts:n}={})=>i.debounce(L({props:e,options:t,echarts:n}),null==e?void 0:e.changeDelay),E=({props:e,el:t,echarts:n}={})=>i.debounce(z({props:e,el:t,echarts:n}),null==e?void 0:e.resizeDelay),C=({registeredEvents:e,echarts:t,props:i})=>{const n=Object.keys((null==i?void 0:i.events)||{});n.length&&n.forEach((n=>{var o;-1===e.indexOf(n)&&(e.push(n),t.on(n,(o=n,function(...e){o in i.events&&(null==i||i.events[o].apply(null,e))})))}))},N=({_once:e,props:t,el:i,echarts:n})=>{window.addEventListener("resize",(()=>E({props:t,el:i,echarts:n}))),e.onresize=!0},P=({_once:e})=>{window.removeEventListener("resize",E),e.onresize=!1},L=({props:e,options:t,echarts:i}={})=>{const{chartHandler:n,chartColor:o,_once:a}=t;if(!n)return;let r=null==e?void 0:e.data;const{columns:l=[],rows:s=[]}=r,c={tooltipVisible:null==e?void 0:e.tooltipVisible,legendVisible:null==e?void 0:e.legendVisible,echarts:i,color:o,tooltipFormatter:null==e?void 0:e.tooltipFormatter,_once:a};(null==e?void 0:e.beforeConfig)&&(r=null==e?void 0:e.beforeConfig(r));const p=n(l,s,null==e?void 0:e.settings,c);p&&("function"==typeof p.then?p.then((n=>{M({chartOptions:n,props:e,options:t,echarts:i})})):M({chartOptions:p,props:e,options:t,echarts:i}))},M=({chartOptions:e,props:t,options:n,echarts:o,nextTick:a})=>{const{chartColor:r,_store:l,_once:s,el:c,readyCallback:p,readyOnceCallback:d}=n;if((null==t?void 0:t.legendPosition)&&e.legend&&(e.legend[null==t?void 0:t.legendPosition]=10,~["left","right"].indexOf(null==t?void 0:t.legendPosition)&&(e.legend.top="middle",e.legend.orient="vertical")),e.color=r,b.forEach((i=>{(null==t?void 0:t[i])&&(e[i]=null==t?void 0:t[i])})),(null==t?void 0:t.animation)&&function(e,t){Object.keys(t).forEach((i=>{e[i]=t[i]}))}(e,null==t?void 0:t.animation),(null==t?void 0:t.markArea)||(null==t?void 0:t.markLine)||(null==t?void 0:t.markPoint)){const n={markArea:null==t?void 0:t.markArea,markLine:null==t?void 0:t.markLine,markPoint:null==t?void 0:t.markPoint},o=e.series;i.isArray(o)?o.forEach((e=>{k(e,n)})):i.isObject(o)&&k(o,n)}(null==t?void 0:t.extend)&&function(e,t){Object.keys(t).forEach((n=>{const o=t[n];~n.indexOf(".")?i.set(e,n,o):"function"==typeof o?e[n]=o(e[n]):i.isArray(e[n])&&i.isObject(e[n][0])?e[n].forEach(((t,i)=>{e[n][i]=Object.assign({},t,o)})):i.isObject(e[n])?e[n]=Object.assign({},e[n],o):e[n]=o}))}(e,null==t?void 0:t.extend),(null==t?void 0:t.afterConfig)&&(e=null==t?void 0:t.afterConfig(e));let h=null==t?void 0:t.setOptionOpts;!(null==t?void 0:t.settings.bmap)&&!(null==t?void 0:t.settings.amap)||i.isObject(h)||(h=!1),(null==t?void 0:t.notSetUnchange)&&(null==t?void 0:t.notSetUnchange.length)&&(null==t||t.notSetUnchange.forEach((t=>{const n=e[t];n&&(i.isEqual(n,l[t])?e[t]=void 0:l[t]=i.cloneDeep(n))})),i.isObject(h)?h.notMerge=!1:h=!1),null==t||t.log,o.setOption(e,h),p instanceof Function&&p(o,e,u),s["ready-once"]||(s["ready-once"]=!0,d instanceof Function&&d(o,e,u)),(null==t?void 0:t.judgeWidth)&&V({props:t,el:c,nextTick:a,echarts:o}),(null==t?void 0:t.afterSetOption)&&(null==t||t.afterSetOption(o,e,u)),(null==t?void 0:t.afterSetOptionOnce)&&!s.afterSetOptionOnce&&(s.afterSetOptionOnce=!0,null==t||t.afterSetOptionOnce(o,e,u))},V=({props:e,el:t,nextTick:i,echarts:n})=>{t.clientWidth||t.clientHeight?z({props:e,el:t,echarts:n}):i((()=>{t.clientWidth||t.clientHeight?z({props:e,el:t,echarts:n}):setTimeout((()=>{z({props:e,el:t,echarts:n}),!t.clientWidth||t.clientHeight}),null==e?void 0:e.widthChangeDelay)}))},z=({props:e,el:t,echarts:i}={})=>{((null==e?void 0:e.cancelResizeCheck)||t&&t.clientWidth&&t.clientHeight)&&H(i)},H=e=>{e&&e.resize()},B=(e,t)=>{let{echarts:i,option:{_once:n}}=e;D({echarts:i,props:t,_once:n}),i=null,S(e)},D=({echarts:e,props:t,_once:i})=>{(null==t?void 0:t.resizeable)&&P({_once:i}),e&&e.dispose()},F=({name:e,chartHandler:t,chartLib:n})=>({name:e,props:w,setup(o,{slots:a,emit:r}){let s=null;const c=[],p={},d=[];let u=null;u=T||n[o.settings.type];const h=l.computed((()=>({width:null==o?void 0:o.width,height:null==o?void 0:o.height,position:"relative"}))),b=l.computed((()=>(null==o?void 0:o.colors)||(null==o?void 0:o.theme)&&(null==o?void 0:o.theme.color)||m)),f=l.h("div",{class:"v-charts-data-empty"},"暂无数据"),g=l.h("div",{class:"v-charts-component-loading"},[l.h("div",{class:"loader"},[l.h("div",{class:"loading-spinner"},[l.h("svg",{class:"circular",viewBox:"25 25 50 50"},[l.h("circle",{class:"path",cx:"50",cy:"50",r:"20",fill:"none"})])])])]),v=l.h("div",{style:h.value,class:{"v-charts-mask-status":(null==o?void 0:o.dataEmpty)||(null==o?void 0:o.loading)}}),x=l.h("div",{class:[i.camelToKebab(e)],style:h.value},[v,l.h(f,{style:{display:(null==o?void 0:o.dataEmpty)?"":"none"}}),l.h(g,{style:{display:(null==o?void 0:o.loading)?"":"none"}}),a.default]),O={echarts:s,props:o,canvas:v.el,options:{el:x.el,registeredEvents:c,chartHandler:t,chartColor:b.value,_once:p,_store:{},readyCallback:(e,t,i)=>{r("ready",e,t,i)},readyOnceCallback:(e,t,i)=>{r("ready-once",e,t,i)}},nextTick:l.nextTick},j=()=>{l.nextTick(z({props:o,el:x.el,echarts:s}))};l.watch((()=>null==o?void 0:o.data),(e=>{e&&u({props:o,options:O.options,echarts:s})}),{deep:!0}),l.watch((()=>null==o?void 0:o.settings),(e=>{e.type&&n&&(t=n[e.type]),O.options.chartHandler=n[e.type],u({props:o,options:O.options,echarts:s})}),{deep:!0}),l.watch((()=>null==o?void 0:o.width),(()=>j())),l.watch((()=>null==o?void 0:o.height),(()=>j())),l.watch((()=>null==o?void 0:o.events),(()=>C({registeredEvents:c,echarts:s,props:o})),{deep:!0}),l.watch((()=>null==o?void 0:o.theme),(()=>{l.nextTick((()=>{O.canvas=v.el,O.options.el=x.el,B(O,o)}))}),{deep:!0}),l.watch((()=>null==o?void 0:o.themeName),(()=>{l.nextTick((()=>{O.canvas=v.el,O.options.el=x.el,B(O,o)}))})),l.watch((()=>null==o?void 0:o.resizeable),(e=>{l.nextTick((()=>{(({resizeable:e,_once:t,props:i,el:n,echarts:o})=>{e&&!t.onresize&&N({_once:t,props:i,el:n,echarts:o}),!e&&t.onresize&&P({_once:t})})({resizeable:e,_once:p,props:o,el:x.el,echarts:s})}))}));return l.onMounted((()=>{O.canvas=v.el,O.options.el=x.el;const{echarts:e}=S(O);s=e,(({_watchers:e,props:t,options:n,echarts:o})=>{const a=e.map((e=>e.expression));Object.keys(t).forEach((e=>{if(!~a.indexOf(e)&&!~y.indexOf(e)){const a={};~["[object Object]","[object Array]"].indexOf(i.getType(t[e]))&&(a.deep=!0),l.watch((()=>e),(()=>u({props:t,options:n,echarts:o})),a)}}))})({_watchers:d,props:o,options:O.options,echarts:s})})),l.onBeforeUnmount((()=>{D({echarts:s,props:o,_once:p})})),()=>x}});u.use([s.BarChart]);const G=F({name:"VeBar",chartHandler:(e,t,n,o)=>{const a=i.cloneDeep(t),{axisSite:r={},dimension:l=[e[0]],stack:s={},axisVisible:c=!0,digit:p=2,dataOrder:d=!1,scale:u=[!1,!1],min:h=[null,null],max:m=[null,null],legendName:y={},labelMap:b={},label:f,itemStyle:v,showLine:w,barGap:k="-100%",opacity:S}=n,{tooltipVisible:T,legendVisible:E}=o;let C=e.slice();r.top&&r.bottom?C=r.top.concat(r.bottom):r.bottom&&!r.right?C=r.bottom:n.metrics?C=n.metrics:C.splice(e.indexOf(l[0]),1);const N=n.xAxisType||["normal","normal"],P=n.yAxisType||"category",L=n.xAxisName||[],M=n.yAxisName||"";if(d){const{label:e,order:t}=d;e&&t&&a.sort(((i,n)=>"desc"===t?i[e]-n[e]:n[e]-i[e]))}const V=_(a,l),z=E&&A({metrics:C,labelMap:b,legendName:y}),H=g({innerRows:a,dimAxisName:M,dimension:l,axisVisible:c,dimAxisType:P,dims:V}),B=x({meaAxisName:L,meaAxisType:N,axisVisible:c,digit:p,scale:u,min:h,max:m});return{legend:z,yAxis:H,series:j({innerRows:a,metrics:C,stack:s,axisSite:r,isHistogram:false,labelMap:b,itemStyle:v,label:f,showLine:w,dimAxisType:P,dimension:l,barGap:k,opacity:S,dims:V}),xAxis:B,tooltip:T&&O({axisSite:r,isHistogram:false,meaAxisType:N,digit:p,labelMap:b})}}});G.install=e=>{e.component(G.name,G)},u.use([s.BarChart]);const R=F({name:"VeHistogram",chartHandler:(e,t,n,o)=>{const a=i.cloneDeep(t),{axisSite:r={},dimension:l=[e[0]],stack:s={},axisVisible:c=!0,digit:p=2,dataOrder:d=!1,scale:u=[!1,!1],min:h=[null,null],max:m=[null,null],labelMap:y={},legendName:b={},label:f,itemStyle:v,showLine:w,barGap:k="-100%",opacity:S}=n;if(d){const{label:e,order:t}=d;e&&t&&a.sort(((i,n)=>"desc"===t?i[e]-n[e]:n[e]-i[e]))}const{tooltipVisible:T,legendVisible:E}=o;let C=e.slice();r.left&&r.right?C=r.left.concat(r.right):r.left&&!r.right?C=r.left:n.metrics?C=n.metrics:C.splice(e.indexOf(l[0]),1);const N=n.yAxisType||["normal","normal"],P=n.xAxisType||"category",L=n.yAxisName||[],M=n.xAxisName||"",V=_(a,l),z=E&&A({metrics:C,labelMap:y,legendName:b}),H=g({innerRows:a,dimAxisName:M,dimension:l,axisVisible:c,dimAxisType:P,dims:V});return{legend:z,yAxis:x({meaAxisName:L,meaAxisType:N,axisVisible:c,digit:p,scale:u,min:h,max:m}),series:j({innerRows:a,metrics:C,stack:s,axisSite:r,isHistogram:true,labelMap:y,itemStyle:v,label:f,showLine:w,dimAxisType:P,dimension:l,barGap:k,opacity:S,dims:V}),xAxis:H,tooltip:T&&O({axisSite:r,isHistogram:true,meaAxisType:N,digit:p,labelMap:y})}}});R.install=e=>{e.component(R.name,R)},e.default=R,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));