UNPKG

@v-charts2/scatter

Version:

echarts 散点图

8 lines (7 loc) 17.5 kB
/* eslint-disable */ /** * name: @v-charts2/scatter * 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("utils-lite"),require("numerify"),require("echarts/components"),require("echarts/core"),require("echarts/features"),require("echarts/renderers"),require("echarts/charts")):"function"==typeof define&&define.amd?define(["exports","utils-lite","numerify","echarts/components","echarts/core","echarts/features","echarts/renderers","echarts/charts"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@v-charts2/scatter"]=e["@v-charts2/scatter"]||{},e.utilsLite,e.numerify,e["echarts/components"],e.echartsLib,e["echarts/features"],e["echarts/renderers"],e["echarts/charts"])}(this,(function(e,t,i,s,a,o,r,n){"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 s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var p=l(i),d=c(a);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"],y=["initOptions","loading","dataEmpty","judgeWidth","widthChangeDelay"],m=["grid","dataZoom","visualMap","toolbox","title","legend","xAxis","yAxis","radar","tooltip","axisPointer","brush","geo","timeline","graphic","series","backgroundColor","textStyle"];d.use([s.TitleComponent,s.TooltipComponent,s.GridComponent,s.DatasetComponent,s.TransformComponent,o.LabelLayout,o.UniversalTransition,r.SVGRenderer,r.CanvasRenderer,s.LegendComponent]);const b=(e,i,s,a="-")=>{if(isNaN(e))return a;if(!i)return e;if(t.isFunction(i))return i(e,p.default);s=isNaN(s)?0:++s;const o=`.[${new Array(s).join(0)}]`;let r=i;switch(i){case"KMB":r=s?`0,0${o}a`:"0,0a";break;case"normal":r=s?`0,0${o}`:"0,0";break;case"percent":r=s?`0,0${o}%`:"0,0.[00]%"}return p.default(e,r)};function f(e){const{rows:t,axisSite:i,metrics:s,area:a,stack:o,nullAddZero:r,labelMap:n,label:l,itemStyle:c,lineStyle:p,areaStyle:d,dimension:h}=e,u=[],y={},m=o&&(e=>{const t={};return Object.keys(e).forEach((i=>{e[i].forEach((e=>{t[e]=i}))})),t})(o);return s.forEach((e=>{y[e]=[]})),t.forEach((e=>{s.forEach((t=>{let i=null;null!=e[t]?i=e[t]:r&&(i=0),y[t].push([e[h[0]],i])}))})),s.forEach((e=>{const t={name:null!=n[e]?n[e]:e,type:"line",data:y[e]};a&&(t.areaStyle={}),i.right&&(t.yAxisIndex=~i.right.indexOf(e)?1:0),o&&m[e]&&(t.stack=m[e]),l&&(t.label=l),c&&(t.itemStyle=c),p&&(t.lineStyle=p),d&&(t.areaStyle=d),u.push(t)})),u}const g=(e,i,s,a)=>{i=t.isArray(i)?i:[],e=t.isArray(e)?e:[];const{axisSite:o={},yAxisType:r=["normal","normal"],xAxisType:n="category",yAxisName:l=[],dimension:c=[e[0]],xAxisName:p=[],axisVisible:d=!0,area:h,stack:u,scale:y=[!1,!1],min:m=[null,null],max:g=[null,null],nullAddZero:x=!1,digit:v=2,legendName:O={},labelMap:A={},label:j,itemStyle:_,lineStyle:S,areaStyle:T}=s,{tooltipVisible:k,legendVisible:w,tooltipFormatter:E}=a;let P=e.slice();o.left&&o.right?P=o.left.concat(o.right):o.left&&!o.right?P=o.left:s.metrics?P=s.metrics:P.splice(e.indexOf(c[0]),1);const N=w&&function(e){const{metrics:t,legendName:i,labelMap:s}=e;return i||s?{data:s?t.map((e=>null==s[e]?e:s[e])):t,formatter:e=>null!=i[e]?i[e]:e}:{data:t}}({metrics:P,legendName:O,labelMap:A}),$=k&&function(e){const{axisSite:i,yAxisType:s,digit:a,labelMap:o,tooltipFormatter:r}=e,n=i.right||[],l=o?n.map((e=>void 0===o[e]?e:o[e])):n;return{trigger:"axis",formatter(e){if(r)return r.apply(null,arguments);const i=[],{name:o,axisValueLabel:n}=e[0],c=o||n;return i.push(`${c}<br>`),e.forEach((({seriesName:e,data:o,marker:r})=>{let n=null;const c=~l.indexOf(e)?s[1]:s[0],p=t.isArray(o)?o[1]:o;n=b(p,c,a),i.push(r),i.push(`${e}: ${n}`),i.push("<br>")})),i.join("")}}}({axisSite:o,yAxisType:r,digit:v,labelMap:A,xAxisType:n,tooltipFormatter:E}),z=function(e){const{dimension:t,rows:i,xAxisName:s,axisVisible:a,xAxisType:o}=e;return t.map(((e,t)=>({type:o,nameLocation:"middle",nameGap:22,name:s[t]||"",axisTick:{show:!0,lineStyle:{color:"#eee"}},data:i.map((t=>t[e])),show:a})))}({dimension:c,rows:i,xAxisName:p,axisVisible:d,xAxisType:n}),C=function(e){const{yAxisName:t,yAxisType:i,axisVisible:s,scale:a,min:o,max:r,digit:n}=e,l={type:"value",axisTick:{show:!1},show:s},c=[];for(let p=0;p<2;p++)i[p]?c[p]=Object.assign({},l,{axisLabel:{formatter:e=>b(e,i[p],n)}}):c[p]=Object.assign({},l),c[p].name=t[p]||"",c[p].scale=a[p]||!1,c[p].min=o[p]||null,c[p].max=r[p]||null;return c}({yAxisName:l,yAxisType:r,axisVisible:d,scale:y,min:m,max:g,digit:v});return{legend:N,xAxis:z,series:f({rows:i,axisSite:o,metrics:P,area:h,stack:u,nullAddZero:x,labelMap:A,label:j,itemStyle:_,lineStyle:S,areaStyle:T,xAxisType:n,dimension:c}),yAxis:C,tooltip:$}};function x(e,t){const{labelMap:i,columns:s,dataType:a,digit:o}=t,r=[],{color:n,seriesName:l,data:{value:c}}=e;return r.push(`${(e=>['<span style="',`background-color:${e};`,"display: inline-block;","width: 10px;","height: 10px;","border-radius: 50%;","margin-right:2px;",'"></span>'].join(""))(n)} ${l}<br>`),c.forEach(((e,t)=>{const n=i[s[t]]||s[t],l=isNaN(e)?e:b(e,a[s[t]],o);r.push(`${n}: ${l}<br>`)})),r.join("")}const v=(e,i,s,a)=>{const{dimension:o=e[0],metrics:r=[e[1],e[2]],dataType:n={},xAxisType:l="category",xAxisName:c,yAxisName:p,digit:d=2,legendName:h={},labelMap:u={},tooltipTrigger:y="item",axisVisible:m=!0,symbolSizeMax:f=50,symbol:v,symbolSize:O,symbolRotate:A,symbolOffset:j,cursor:_,min:S,max:T,scale:k,label:w,itemStyle:E}=s;if(t.isArray(i)){const t=Object.assign({},s,{xAxisName:c?[c]:void 0,yAxisName:p?[p]:void 0,scale:k?[k]:void 0,min:S?[S]:void 0,max:T?[T]:void 0,dimension:o?[o]:void 0}),r=g(e,i,t,a);return r&&r.series?(r.series.forEach((e=>{Object.assign(e,{type:"scatter",symbol:v,symbolSize:O||10,symbolRotate:A,symbolOffset:j,cursor:_,label:w,itemStyle:E})})),r):{}}const{tooltipVisible:P,legendVisible:N}=a,$=Object.keys(i),z=N&&function(e,t){return{data:e,formatter:e=>null!=t[e]?t[e]:e}}($,h),C=P&&function(e){const{tooltipTrigger:i}=e;return{trigger:i,formatter:i=>t.isArray(i)?i.map((t=>x(t,e))).join(""):x(i,e)}}({tooltipTrigger:y,labelMap:u,columns:e,dataType:n,digit:d}),L=function(e){const{xAxisName:t,axisVisible:i,xAxisType:s,rows:a,dataLabels:o,dimension:r}=e,n=[];return o.forEach((e=>{a[e].forEach((e=>{const t=e[r];t&&!~n.indexOf(t)&&n.push(t)}))})),[{type:s,show:i,name:t,data:n}]}({xAxisName:c,axisVisible:m,xAxisType:l,dataLabels:$,dimension:o,rows:i}),V=function(e){const{min:t,max:i,scale:s,yAxisName:a,dataType:o,metrics:r,digit:n,axisVisible:l}=e;return{type:"value",show:l,scale:s,min:t,max:i,axisTick:{show:!1},name:a,axisLabel:{formatter:e=>b(e,o[r[0]],n)}}}({min:S,max:T,scale:k,yAxisName:p,dataType:n,metrics:r,digit:d,axisVisible:m}),M=function(e){const{rows:t,dataLabels:i,columns:s,metrics:a,dimension:o,label:r,itemStyle:n,symbol:l,symbolSizeMax:c,symbolSize:p,symbolRotate:d,symbolOffset:h,cursor:u}=e,y=s.filter((e=>!~a.indexOf(e)&&e!==o)),m=[];i.forEach((e=>{t[e].forEach((e=>{m.push(e[a[1]])}))}));const b=Math.max.apply(null,m),f=[];return i.forEach((e=>{const i=[];t[e].forEach((e=>{const t={value:[]};t.value.push(e[o],e[a[0]],e[a[1]]),y.forEach((i=>{t.value.push(e[i])})),t.symbolSize=p||e[a[1]]/b*c,i.push(t)})),f.push({type:"scatter",data:i,name:e,label:r,itemStyle:n,symbol:l,symbolRotate:d,symbolOffset:h,cursor:u})})),f}({rows:i,dataLabels:$,columns:e,metrics:r,dimension:o,label:w,itemStyle:E,symbol:v,symbolSizeMax:f,symbolSize:O,symbolRotate:A,symbolOffset:j,cursor:_});return{legend:z,tooltip:C,xAxis:L,yAxis:V,series:M}},O={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 A(e,t){Object.keys(t).forEach((i=>{t[i]&&(e[i]=t[i])}))}const j=({echarts:e,props:t,canvas:i,options:s}={})=>{if(e)return;const{registeredEvents:a,_once:o,el:r}=s,n=(null==t?void 0:t.themeName)||(null==t?void 0:t.theme)||h;return e=d.init(i,n,__spreadValues({renderer:null==t?void 0:t.renderer},null==t?void 0:t.initOptions)),(null==t?void 0:t.data)&&_({props:t,options:s,echarts:e}),T({registeredEvents:a,echarts:e,props:t}),(null==t?void 0:t.resizeable)&&k({_once:o,props:t,el:r,echarts:e}),{echarts:e}},_=({props:e,options:i,echarts:s}={})=>t.debounce(E({props:e,options:i,echarts:s}),null==e?void 0:e.changeDelay),S=({props:e,el:i,echarts:s}={})=>t.debounce($({props:e,el:i,echarts:s}),null==e?void 0:e.resizeDelay),T=({registeredEvents:e,echarts:t,props:i})=>{const s=Object.keys((null==i?void 0:i.events)||{});s.length&&s.forEach((s=>{var a;-1===e.indexOf(s)&&(e.push(s),t.on(s,(a=s,function(...e){a in i.events&&(null==i||i.events[a].apply(null,e))})))}))},k=({_once:e,props:t,el:i,echarts:s})=>{window.addEventListener("resize",(()=>S({props:t,el:i,echarts:s}))),e.onresize=!0},w=({_once:e})=>{window.removeEventListener("resize",S),e.onresize=!1},E=({props:e,options:t,echarts:i}={})=>{const{chartHandler:s,chartColor:a,_once:o}=t;if(!s)return;let r=null==e?void 0:e.data;const{columns:n=[],rows:l=[]}=r,c={tooltipVisible:null==e?void 0:e.tooltipVisible,legendVisible:null==e?void 0:e.legendVisible,echarts:i,color:a,tooltipFormatter:null==e?void 0:e.tooltipFormatter,_once:o};(null==e?void 0:e.beforeConfig)&&(r=null==e?void 0:e.beforeConfig(r));const p=s(n,l,null==e?void 0:e.settings,c);p&&("function"==typeof p.then?p.then((s=>{P({chartOptions:s,props:e,options:t,echarts:i})})):P({chartOptions:p,props:e,options:t,echarts:i}))},P=({chartOptions:e,props:i,options:s,echarts:a,nextTick:o})=>{const{chartColor:r,_store:n,_once:l,el:c,readyCallback:p,readyOnceCallback:h}=s;if((null==i?void 0:i.legendPosition)&&e.legend&&(e.legend[null==i?void 0:i.legendPosition]=10,~["left","right"].indexOf(null==i?void 0:i.legendPosition)&&(e.legend.top="middle",e.legend.orient="vertical")),e.color=r,m.forEach((t=>{(null==i?void 0:i[t])&&(e[t]=null==i?void 0:i[t])})),(null==i?void 0:i.animation)&&function(e,t){Object.keys(t).forEach((i=>{e[i]=t[i]}))}(e,null==i?void 0:i.animation),(null==i?void 0:i.markArea)||(null==i?void 0:i.markLine)||(null==i?void 0:i.markPoint)){const s={markArea:null==i?void 0:i.markArea,markLine:null==i?void 0:i.markLine,markPoint:null==i?void 0:i.markPoint},a=e.series;t.isArray(a)?a.forEach((e=>{A(e,s)})):t.isObject(a)&&A(a,s)}(null==i?void 0:i.extend)&&function(e,i){Object.keys(i).forEach((s=>{const a=i[s];~s.indexOf(".")?t.set(e,s,a):"function"==typeof a?e[s]=a(e[s]):t.isArray(e[s])&&t.isObject(e[s][0])?e[s].forEach(((t,i)=>{e[s][i]=Object.assign({},t,a)})):t.isObject(e[s])?e[s]=Object.assign({},e[s],a):e[s]=a}))}(e,null==i?void 0:i.extend),(null==i?void 0:i.afterConfig)&&(e=null==i?void 0:i.afterConfig(e));let u=null==i?void 0:i.setOptionOpts;!(null==i?void 0:i.settings.bmap)&&!(null==i?void 0:i.settings.amap)||t.isObject(u)||(u=!1),(null==i?void 0:i.notSetUnchange)&&(null==i?void 0:i.notSetUnchange.length)&&(null==i||i.notSetUnchange.forEach((i=>{const s=e[i];s&&(t.isEqual(s,n[i])?e[i]=void 0:n[i]=t.cloneDeep(s))})),t.isObject(u)?u.notMerge=!1:u=!1),null==i||i.log,a.setOption(e,u),p instanceof Function&&p(a,e,d),l["ready-once"]||(l["ready-once"]=!0,h instanceof Function&&h(a,e,d)),(null==i?void 0:i.judgeWidth)&&N({props:i,el:c,nextTick:o,echarts:a}),(null==i?void 0:i.afterSetOption)&&(null==i||i.afterSetOption(a,e,d)),(null==i?void 0:i.afterSetOptionOnce)&&!l.afterSetOptionOnce&&(l.afterSetOptionOnce=!0,null==i||i.afterSetOptionOnce(a,e,d))},N=({props:e,el:t,nextTick:i,echarts:s})=>{t.clientWidth||t.clientHeight?$({props:e,el:t,echarts:s}):i((()=>{t.clientWidth||t.clientHeight?$({props:e,el:t,echarts:s}):setTimeout((()=>{$({props:e,el:t,echarts:s}),!t.clientWidth||t.clientHeight}),null==e?void 0:e.widthChangeDelay)}))},$=({props:e,el:t,echarts:i}={})=>{((null==e?void 0:e.cancelResizeCheck)||t&&t.clientWidth&&t.clientHeight)&&z(i)},z=e=>{e&&e.resize()},C=(e,t)=>{let{echarts:i,option:{_once:s}}=e;L({echarts:i,props:t,_once:s}),i=null,j(e)},L=({echarts:e,props:t,_once:i})=>{(null==t?void 0:t.resizeable)&&w({_once:i}),e&&e.dispose()};var V={render(e){return e("div",{class:[t.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:O,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&&_({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],_({props:this.$props,options:this.initPayload.options,echarts:this.echarts})}},width:"nextTickResize",height:"nextTickResize",events:{deep:!0,handler(){T({registeredEvents:this.registeredEvents,echarts:this.echarts,props:this.$props})}},theme:{deep:!0,handler(e){C(this.initPayload,O)}},themeName:e=>{C(globalThis.initPayload,O)},resizeable:e=>{globalThis.$nextTick((()=>{(({resizeable:e,_once:t,props:i,el:s,echarts:a})=>{e&&!t.onresize&&k({_once:t,props:i,el:s,echarts:a}),!e&&t.onresize&&w({_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:s,chartHandler:a,_once:o,_store:r,$nextTick:n,_watchers:l}=this,c={echarts:e,props:t,canvas:this.$refs.canvas,options:{el:i,registeredEvents:s,chartHandler:a,chartColor:this.chartColor,_once:o,_store:r,readyCallback:(e,t,i)=>{this.$emit("ready",e,t,i)},readyOnceCallback:(e,t,i)=>{this.$emit("ready-once",e,t,i)}},nextTick:n},{echarts:p}=j(c);this.echarts=p,this.initPayload=c,this.addWatchToProps({_watchers:l,props:t,options:c.options,echarts:this.echarts})},beforeDestroy(){L({echarts:this.echarts,props:this.$props,_once:this._once})},methods:{addWatchToProps(){const e=this._watchers.map((e=>e.expression));Object.keys(this.$props).forEach((i=>{if(!~e.indexOf(i)&&!~y.indexOf(i)){const e={};~["[object Object]","[object Array]"].indexOf(t.getType(this.$props[i]))&&(e.deep=!0),this.$watch(i,(()=>{_({props:this.$props,options:this.initPayload.options,echarts:this.echarts})}),e)}}))},nextTickResize(){this.$nextTick($({props:this.$props,el:this.$el,echarts:this.echarts}))}},_numerify:p.default};d.use([n.ScatterChart]);const M=Object.assign({},V,{name:"VeScatter",data(){return this.chartHandler=v,{}}});M.install=e=>{e.component(M.name,M)},e.default=M,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));