UNPKG

@v-charts2/histogram

Version:

echarts 柱状图

8 lines (7 loc) 16.7 kB
/* 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("echarts/charts")):"function"==typeof define&&define.amd?define(["exports","numerify","utils-lite","echarts/components","echarts/core","echarts/features","echarts/renderers","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["echarts/charts"])}(this,(function(e,t,i,a,s,n,o,r){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 a=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,a.get?a:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var p=l(t),d=c(s);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}},u=["#19d4ae","#5ab1ef","#fa6e86","#ffb980","#0067a6","#c4b4e4","#d87a80","#9cbbff","#d9d0c7","#87a997","#d49ea2","#5b4947","#7ba3a8"],m=["initOptions","loading","dataEmpty","judgeWidth","widthChangeDelay"],y=["grid","dataZoom","visualMap","toolbox","title","legend","xAxis","yAxis","radar","tooltip","axisPointer","brush","geo","timeline","graphic","series","backgroundColor","textStyle"];d.use([a.TitleComponent,a.TooltipComponent,a.GridComponent,a.DatasetComponent,a.TransformComponent,n.LabelLayout,n.UniversalTransition,o.SVGRenderer,o.CanvasRenderer,a.LegendComponent]);const b=(e,t,a,s="-")=>{if(isNaN(e))return s;if(!t)return e;if(i.isFunction(t))return t(e,p.default);a=isNaN(a)?0:++a;const n=`.[${new Array(a).join(0)}]`;let o=t;switch(t){case"KMB":o=a?`0,0${n}a`:"0,0a";break;case"normal":o=a?`0,0${n}`:"0,0";break;case"percent":o=a?`0,0${n}%`:"0,0.[00]%"}return p.default(e,o)};function f(e){const{innerRows:t,dimAxisName:i,dimension:a,axisVisible:s,dimAxisType:n,dims:o}=e;return a.map((e=>({type:"category",name:i,nameLocation:"middle",nameGap:22,data:"value"===n?g(o):t.map((t=>t[e])),axisLabel:{formatter:e=>String(e)},show:s})))}function g(e){const t=Math.max.apply(null,e),i=[];for(let a=Math.min.apply(null,e);a<=t;a++)i.push(a);return i}function x(e){const{meaAxisName:t,meaAxisType:i,axisVisible:a,digit:s,scale:n,min:o,max:r}=e,l={type:"value",axisTick:{show:!1},show:a},c=[];for(let p=0;p<2;p++)i[p]?c[p]=Object.assign({},l,{axisLabel:{formatter:e=>b(e,i[p],s)}}):c[p]=Object.assign({},l),c[p].name=t[p]||"",c[p].scale=n[p]||!1,c[p].min=o[p]||null,c[p].max=r[p]||null;return c}function v(e){const{axisSite:t,isHistogram:i,meaAxisType:a,digit:s,labelMap:n}=e;let o=i?t.right||[]:t.top||[];return n&&(o=o.map((e=>void 0===n[e]?e:n[e]))),{trigger:"axis",formatter(e){const t=[];return t.push(`${e[0].name}<br>`),e.forEach((e=>{const i=e.seriesName,n=~o.indexOf(i)?a[1]:a[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(b(e.value,n,s)),t.push("<br>")})),t.join("")}}}function O(e){const{innerRows:t,metrics:a,stack:s,axisSite:n,isHistogram:o,labelMap:r,itemStyle:l,label:c,showLine:p=[],dimAxisType:d,barGap:h,opacity:u,dims:m}=e;let y=[];const b={},f=o?n.right||[]:n.top||[],g=o?"yAxisIndex":"xAxisIndex",x=s&&(e=>{const t={};return Object.keys(e).forEach((i=>{e[i].forEach((e=>{t[e]=i}))})),t})(s);return a.forEach((e=>{b[e]=[]})),t.forEach((e=>{a.forEach((t=>{b[t].push(e[t])}))})),y=Object.keys(b).map(((e,t)=>{const a="value"===d?function(e,t){const i=Math.max.apply(null,t),a=[];for(let s=Math.min.apply(null,t);s<=i;s++){const i=t.indexOf(s);~i?a.push(e[i]):a.push(null)}return a}(b[e],m):b[e],n={name:null!=r[e]?r[e]:e,type:~p.indexOf(e)?"line":"bar",data:a,[g]:~f.indexOf(e)?"1":"0"};s&&x[e]&&(n.stack=x[e]),c&&(n.label=c),l&&(n.itemStyle=l);let o=u||i.get(n,"itemStyle.opacity");return"value"===d&&(n.barGap=h,n.barCategoryGap="1%",null==o&&(o=.5)),null!=o&&i.set(n,"itemStyle.opacity",o),n})),!!y.length&&y}function _(e){const{metrics:t,labelMap:i,legendName:a}=e;if(!a&&!i)return{data:t};return{data:i?t.map((e=>null==i[e]?e:i[e])):t,formatter:e=>null!=a[e]?a[e]:e}}function j(e,t){return e.map((e=>e[t[0]]))}const A=(e,t,a,s)=>{const n=i.cloneDeep(t),{axisSite:o={},dimension:r=[e[0]],stack:l={},axisVisible:c=!0,digit:p=2,dataOrder:d=!1,scale:h=[!1,!1],min:u=[null,null],max:m=[null,null],legendName:y={},labelMap:b={},label:g,itemStyle:A,showLine:k,barGap:w="-100%",opacity:S}=a,{tooltipVisible:T,legendVisible:P}=s;let E=e.slice();o.top&&o.bottom?E=o.top.concat(o.bottom):o.bottom&&!o.right?E=o.bottom:a.metrics?E=a.metrics:E.splice(e.indexOf(r[0]),1);const C=a.xAxisType||["normal","normal"],$=a.yAxisType||"category",N=a.xAxisName||[],L=a.yAxisName||"";if(d){const{label:e,order:t}=d;e&&t&&n.sort(((i,a)=>"desc"===t?i[e]-a[e]:a[e]-i[e]))}const M=j(n,r),V=P&&_({metrics:E,labelMap:b,legendName:y}),z=f({innerRows:n,dimAxisName:L,dimension:r,axisVisible:c,dimAxisType:$,dims:M}),H=x({meaAxisName:N,meaAxisType:C,axisVisible:c,digit:p,scale:h,min:u,max:m});return{legend:V,yAxis:z,series:O({innerRows:n,metrics:E,stack:l,axisSite:o,isHistogram:false,labelMap:b,itemStyle:A,label:g,showLine:k,dimAxisType:$,dimension:r,barGap:w,opacity:S,dims:M}),xAxis:H,tooltip:T&&v({axisSite:o,isHistogram:false,meaAxisType:C,digit:p,labelMap:b})}},k=(e,t,a,s)=>{const n=i.cloneDeep(t),{axisSite:o={},dimension:r=[e[0]],stack:l={},axisVisible:c=!0,digit:p=2,dataOrder:d=!1,scale:h=[!1,!1],min:u=[null,null],max:m=[null,null],labelMap:y={},legendName:b={},label:g,itemStyle:A,showLine:k,barGap:w="-100%",opacity:S}=a;if(d){const{label:e,order:t}=d;e&&t&&n.sort(((i,a)=>"desc"===t?i[e]-a[e]:a[e]-i[e]))}const{tooltipVisible:T,legendVisible:P}=s;let E=e.slice();o.left&&o.right?E=o.left.concat(o.right):o.left&&!o.right?E=o.left:a.metrics?E=a.metrics:E.splice(e.indexOf(r[0]),1);const C=a.yAxisType||["normal","normal"],$=a.xAxisType||"category",N=a.yAxisName||[],L=a.xAxisName||"",M=j(n,r),V=P&&_({metrics:E,labelMap:y,legendName:b}),z=f({innerRows:n,dimAxisName:L,dimension:r,axisVisible:c,dimAxisType:$,dims:M});return{legend:V,yAxis:x({meaAxisName:N,meaAxisType:C,axisVisible:c,digit:p,scale:h,min:u,max:m}),series:O({innerRows:n,metrics:E,stack:l,axisSite:o,isHistogram:true,labelMap:y,itemStyle:A,label:g,showLine:k,dimAxisType:$,dimension:r,barGap:w,opacity:S,dims:M}),xAxis:z,tooltip:T&&v({axisSite:o,isHistogram:true,meaAxisType:C,digit:p,labelMap:y})}},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 S(e,t){Object.keys(t).forEach((i=>{t[i]&&(e[i]=t[i])}))}const T=({echarts:e,props:t,canvas:i,options:a}={})=>{if(e)return;const{registeredEvents:s,_once:n,el:o}=a,r=(null==t?void 0:t.themeName)||(null==t?void 0:t.theme)||h;return e=d.init(i,r,__spreadValues({renderer:null==t?void 0:t.renderer},null==t?void 0:t.initOptions)),(null==t?void 0:t.data)&&P({props:t,options:a,echarts:e}),C({registeredEvents:s,echarts:e,props:t}),(null==t?void 0:t.resizeable)&&$({_once:n,props:t,el:o,echarts:e}),{echarts:e}},P=({props:e,options:t,echarts:a}={})=>i.debounce(L({props:e,options:t,echarts:a}),null==e?void 0:e.changeDelay),E=({props:e,el:t,echarts:a}={})=>i.debounce(z({props:e,el:t,echarts:a}),null==e?void 0:e.resizeDelay),C=({registeredEvents:e,echarts:t,props:i})=>{const a=Object.keys((null==i?void 0:i.events)||{});a.length&&a.forEach((a=>{var s;-1===e.indexOf(a)&&(e.push(a),t.on(a,(s=a,function(...e){s in i.events&&(null==i||i.events[s].apply(null,e))})))}))},$=({_once:e,props:t,el:i,echarts:a})=>{window.addEventListener("resize",(()=>E({props:t,el:i,echarts:a}))),e.onresize=!0},N=({_once:e})=>{window.removeEventListener("resize",E),e.onresize=!1},L=({props:e,options:t,echarts:i}={})=>{const{chartHandler:a,chartColor:s,_once:n}=t;if(!a)return;let o=null==e?void 0:e.data;const{columns:r=[],rows:l=[]}=o,c={tooltipVisible:null==e?void 0:e.tooltipVisible,legendVisible:null==e?void 0:e.legendVisible,echarts:i,color:s,tooltipFormatter:null==e?void 0:e.tooltipFormatter,_once:n};(null==e?void 0:e.beforeConfig)&&(o=null==e?void 0:e.beforeConfig(o));const p=a(r,l,null==e?void 0:e.settings,c);p&&("function"==typeof p.then?p.then((a=>{M({chartOptions:a,props:e,options:t,echarts:i})})):M({chartOptions:p,props:e,options:t,echarts:i}))},M=({chartOptions:e,props:t,options:a,echarts:s,nextTick:n})=>{const{chartColor:o,_store:r,_once:l,el:c,readyCallback:p,readyOnceCallback:h}=a;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=o,y.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 a={markArea:null==t?void 0:t.markArea,markLine:null==t?void 0:t.markLine,markPoint:null==t?void 0:t.markPoint},s=e.series;i.isArray(s)?s.forEach((e=>{S(e,a)})):i.isObject(s)&&S(s,a)}(null==t?void 0:t.extend)&&function(e,t){Object.keys(t).forEach((a=>{const s=t[a];~a.indexOf(".")?i.set(e,a,s):"function"==typeof s?e[a]=s(e[a]):i.isArray(e[a])&&i.isObject(e[a][0])?e[a].forEach(((t,i)=>{e[a][i]=Object.assign({},t,s)})):i.isObject(e[a])?e[a]=Object.assign({},e[a],s):e[a]=s}))}(e,null==t?void 0:t.extend),(null==t?void 0:t.afterConfig)&&(e=null==t?void 0:t.afterConfig(e));let u=null==t?void 0:t.setOptionOpts;!(null==t?void 0:t.settings.bmap)&&!(null==t?void 0:t.settings.amap)||i.isObject(u)||(u=!1),(null==t?void 0:t.notSetUnchange)&&(null==t?void 0:t.notSetUnchange.length)&&(null==t||t.notSetUnchange.forEach((t=>{const a=e[t];a&&(i.isEqual(a,r[t])?e[t]=void 0:r[t]=i.cloneDeep(a))})),i.isObject(u)?u.notMerge=!1:u=!1),null==t||t.log,s.setOption(e,u),p instanceof Function&&p(s,e,d),l["ready-once"]||(l["ready-once"]=!0,h instanceof Function&&h(s,e,d)),(null==t?void 0:t.judgeWidth)&&V({props:t,el:c,nextTick:n,echarts:s}),(null==t?void 0:t.afterSetOption)&&(null==t||t.afterSetOption(s,e,d)),(null==t?void 0:t.afterSetOptionOnce)&&!l.afterSetOptionOnce&&(l.afterSetOptionOnce=!0,null==t||t.afterSetOptionOnce(s,e,d))},V=({props:e,el:t,nextTick:i,echarts:a})=>{t.clientWidth||t.clientHeight?z({props:e,el:t,echarts:a}):i((()=>{t.clientWidth||t.clientHeight?z({props:e,el:t,echarts:a}):setTimeout((()=>{z({props:e,el:t,echarts:a}),!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:a}}=e;D({echarts:i,props:t,_once:a}),i=null,T(e)},D=({echarts:e,props:t,_once:i})=>{(null==t?void 0:t.resizeable)&&N({_once:i}),e&&e.dispose()};var R={render(e){return e("div",{class:[i.camelToKebab(this.$options.name||this.$options._componentTag)],style:this.canvasStyle},[e("div",{style:this.canvasStyle,class:{"v-charts-mask-status":this.dataEmpty||this.loading},ref:"canvas"}),e("div",{class:"v-charts-data-empty",style:{display:this.dataEmpty?"":"none"}},"暂无数据"),e("div",{style:{display:this.loading?"":"none"},class:"v-charts-component-loading"},[e("div",{class:"loader"},[e("div",{class:"loading-spinner"},[e("svg",{class:"circular",attrs:{viewBox:"25 25 50 50"}},[e("circle",{class:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})])])])]),this.$slots.default])},props:w,created(){this.echarts=null,this.registeredEvents=[],this._once={},this._store={},this._watchers=[],this.initPayload={}},data:()=>({chartLib:null,echarts:null,registeredEvents:[],_once:{},_store:{},_watchers:[],initPayload:{}}),watch:{data:{deep:!0,handler(e){e&&P({props:this.$props,options:this.initPayload.options,echarts:this.echarts})}},settings:{deep:!0,handler(e){e.type&&this.chartLib&&(this.chartHandler=this.chartLib[e.type]),this.initPayload.options.chartHandler=this.chartLib[e.type],P({props:this.$props,options:this.initPayload.options,echarts:this.echarts})}},width:"nextTickResize",height:"nextTickResize",events:{deep:!0,handler(){C({registeredEvents:this.registeredEvents,echarts:this.echarts,props:this.$props})}},theme:{deep:!0,handler(e){B(this.initPayload,w)}},themeName:e=>{B(globalThis.initPayload,w)},resizeable:e=>{globalThis.$nextTick((()=>{(({resizeable:e,_once:t,props:i,el:a,echarts:s})=>{e&&!t.onresize&&$({_once:t,props:i,el:a,echarts:s}),!e&&t.onresize&&N({_once:t})})({resizeable:globalThis.resizeable,_once:globalThis._once,props:globalThis.$props,el:globalThis.$el,echarts:globalThis.echarts})}))}},computed:{canvasStyle(){return{width:this.width,height:this.height,position:"relative"}},chartColor(){return this.colors||this.theme&&this.theme.color||u}},mounted(){const{echarts:e,$props:t,$el:i,registeredEvents:a,chartHandler:s,_once:n,_store:o,$nextTick:r,_watchers:l}=this,c={echarts:e,props:t,canvas:this.$refs.canvas,options:{el:i,registeredEvents:a,chartHandler:s,chartColor:this.chartColor,_once:n,_store:o,readyCallback:(e,t,i)=>{this.$emit("ready",e,t,i)},readyOnceCallback:(e,t,i)=>{this.$emit("ready-once",e,t,i)}},nextTick:r},{echarts:p}=T(c);this.echarts=p,this.initPayload=c,this.addWatchToProps({_watchers:l,props:t,options:c.options,echarts:this.echarts})},beforeDestroy(){D({echarts:this.echarts,props:this.$props,_once:this._once})},methods:{addWatchToProps(){const e=this._watchers.map((e=>e.expression));Object.keys(this.$props).forEach((t=>{if(!~e.indexOf(t)&&!~m.indexOf(t)){const e={};~["[object Object]","[object Array]"].indexOf(i.getType(this.$props[t]))&&(e.deep=!0),this.$watch(t,(()=>{P({props:this.$props,options:this.initPayload.options,echarts:this.echarts})}),e)}}))},nextTickResize(){this.$nextTick(z({props:this.$props,el:this.$el,echarts:this.echarts}))}},_numerify:p.default};d.use([r.BarChart]);const F=Object.assign({},R,{name:"VeBar",data(){return this.chartHandler=A,{}}});F.install=e=>{e.component(F.name,F)},d.use([r.BarChart]);const G=Object.assign({},R,{name:"VeHistogram",data(){return this.chartHandler=k,{}}});G.install=e=>{e.component(G.name,G)},e.default=G,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));