UNPKG

@v-charts2/scatter

Version:

echarts 散点图

8 lines (7 loc) 17 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,i,a,s,o,n,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(i),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"],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([a.TitleComponent,a.TooltipComponent,a.GridComponent,a.DatasetComponent,a.TransformComponent,o.LabelLayout,o.UniversalTransition,n.SVGRenderer,n.CanvasRenderer,a.LegendComponent]);const b=(e,i,a,s="-")=>{if(isNaN(e))return s;if(!i)return e;if(t.isFunction(i))return i(e,p.default);a=isNaN(a)?0:++a;const o=`.[${new Array(a).join(0)}]`;let n=i;switch(i){case"KMB":n=a?`0,0${o}a`:"0,0a";break;case"normal":n=a?`0,0${o}`:"0,0";break;case"percent":n=a?`0,0${o}%`:"0,0.[00]%"}return p.default(e,n)};function f(e){const{rows:t,axisSite:i,metrics:a,area:s,stack:o,nullAddZero:n,labelMap:r,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 a.forEach((e=>{y[e]=[]})),t.forEach((e=>{a.forEach((t=>{let i=null;null!=e[t]?i=e[t]:n&&(i=0),y[t].push([e[h[0]],i])}))})),a.forEach((e=>{const t={name:null!=r[e]?r[e]:e,type:"line",data:y[e]};s&&(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,a,s)=>{i=t.isArray(i)?i:[],e=t.isArray(e)?e:[];const{axisSite:o={},yAxisType:n=["normal","normal"],xAxisType:r="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:_,itemStyle:j,lineStyle:S,areaStyle:T}=a,{tooltipVisible:k,legendVisible:w,tooltipFormatter:E}=s;let P=e.slice();o.left&&o.right?P=o.left.concat(o.right):o.left&&!o.right?P=o.left:a.metrics?P=a.metrics:P.splice(e.indexOf(c[0]),1);const N=w&&function(e){const{metrics:t,legendName:i,labelMap:a}=e;return i||a?{data:a?t.map((e=>null==a[e]?e:a[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:a,digit:s,labelMap:o,tooltipFormatter:n}=e,r=i.right||[],l=o?r.map((e=>void 0===o[e]?e:o[e])):r;return{trigger:"axis",formatter(e){if(n)return n.apply(null,arguments);const i=[],{name:o,axisValueLabel:r}=e[0],c=o||r;return i.push(`${c}<br>`),e.forEach((({seriesName:e,data:o,marker:n})=>{let r=null;const c=~l.indexOf(e)?a[1]:a[0],p=t.isArray(o)?o[1]:o;r=b(p,c,s),i.push(n),i.push(`${e}: ${r}`),i.push("<br>")})),i.join("")}}}({axisSite:o,yAxisType:n,digit:v,labelMap:A,xAxisType:r,tooltipFormatter:E}),z=function(e){const{dimension:t,rows:i,xAxisName:a,axisVisible:s,xAxisType:o}=e;return t.map(((e,t)=>({type:o,nameLocation:"middle",nameGap:22,name:a[t]||"",axisTick:{show:!0,lineStyle:{color:"#eee"}},data:i.map((t=>t[e])),show:s})))}({dimension:c,rows:i,xAxisName:p,axisVisible:d,xAxisType:r}),C=function(e){const{yAxisName:t,yAxisType:i,axisVisible:a,scale:s,min:o,max:n,digit: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],r)}}):c[p]=Object.assign({},l),c[p].name=t[p]||"",c[p].scale=s[p]||!1,c[p].min=o[p]||null,c[p].max=n[p]||null;return c}({yAxisName:l,yAxisType:n,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:_,itemStyle:j,lineStyle:S,areaStyle:T,xAxisType:r,dimension:c}),yAxis:C,tooltip:$}};function x(e,t){const{labelMap:i,columns:a,dataType:s,digit:o}=t,n=[],{color:r,seriesName:l,data:{value:c}}=e;return n.push(`${(e=>['<span style="',`background-color:${e};`,"display: inline-block;","width: 10px;","height: 10px;","border-radius: 50%;","margin-right:2px;",'"></span>'].join(""))(r)} ${l}<br>`),c.forEach(((e,t)=>{const r=i[a[t]]||a[t],l=isNaN(e)?e:b(e,s[a[t]],o);n.push(`${r}: ${l}<br>`)})),n.join("")}const v=(e,i,a,s)=>{const{dimension:o=e[0],metrics:n=[e[1],e[2]],dataType:r={},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:_,cursor:j,min:S,max:T,scale:k,label:w,itemStyle:E}=a;if(t.isArray(i)){const t=Object.assign({},a,{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}),n=g(e,i,t,s);return n&&n.series?(n.series.forEach((e=>{Object.assign(e,{type:"scatter",symbol:v,symbolSize:O||10,symbolRotate:A,symbolOffset:_,cursor:j,label:w,itemStyle:E})})),n):{}}const{tooltipVisible:P,legendVisible:N}=s,$=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:r,digit:d}),L=function(e){const{xAxisName:t,axisVisible:i,xAxisType:a,rows:s,dataLabels:o,dimension:n}=e,r=[];return o.forEach((e=>{s[e].forEach((e=>{const t=e[n];t&&!~r.indexOf(t)&&r.push(t)}))})),[{type:a,show:i,name:t,data:r}]}({xAxisName:c,axisVisible:m,xAxisType:l,dataLabels:$,dimension:o,rows:i}),V=function(e){const{min:t,max:i,scale:a,yAxisName:s,dataType:o,metrics:n,digit:r,axisVisible:l}=e;return{type:"value",show:l,scale:a,min:t,max:i,axisTick:{show:!1},name:s,axisLabel:{formatter:e=>b(e,o[n[0]],r)}}}({min:S,max:T,scale:k,yAxisName:p,dataType:r,metrics:n,digit:d,axisVisible:m}),M=function(e){const{rows:t,dataLabels:i,columns:a,metrics:s,dimension:o,label:n,itemStyle:r,symbol:l,symbolSizeMax:c,symbolSize:p,symbolRotate:d,symbolOffset:h,cursor:u}=e,y=a.filter((e=>!~s.indexOf(e)&&e!==o)),m=[];i.forEach((e=>{t[e].forEach((e=>{m.push(e[s[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[s[0]],e[s[1]]),y.forEach((i=>{t.value.push(e[i])})),t.symbolSize=p||e[s[1]]/b*c,i.push(t)})),f.push({type:"scatter",data:i,name:e,label:n,itemStyle:r,symbol:l,symbolRotate:d,symbolOffset:h,cursor:u})})),f}({rows:i,dataLabels:$,columns:e,metrics:n,dimension:o,label:w,itemStyle:E,symbol:v,symbolSizeMax:f,symbolSize:O,symbolRotate:A,symbolOffset:_,cursor:j});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 _=({echarts:e,props:t,canvas:i,options:a}={})=>{if(e)return;const{registeredEvents:s,_once:o,el:n}=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)&&j({props:t,options:a,echarts:e}),T({registeredEvents:s,echarts:e,props:t}),(null==t?void 0:t.resizeable)&&k({_once:o,props:t,el:n,echarts:e}),{echarts:e}},j=({props:e,options:i,echarts:a}={})=>t.debounce(E({props:e,options:i,echarts:a}),null==e?void 0:e.changeDelay),S=({props:e,el:i,echarts:a}={})=>t.debounce($({props:e,el:i,echarts:a}),null==e?void 0:e.resizeDelay),T=({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))})))}))},k=({_once:e,props:t,el:i,echarts:a})=>{window.addEventListener("resize",(()=>S({props:t,el:i,echarts:a}))),e.onresize=!0},w=({_once:e})=>{window.removeEventListener("resize",S),e.onresize=!1},E=({props:e,options:t,echarts:i}={})=>{const{chartHandler:a,chartColor:s,_once:o}=t;if(!a)return;let n=null==e?void 0:e.data;const{columns:r=[],rows:l=[]}=n,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:o};(null==e?void 0:e.beforeConfig)&&(n=null==e?void 0:e.beforeConfig(n));const p=a(r,l,null==e?void 0:e.settings,c);p&&("function"==typeof p.then?p.then((a=>{P({chartOptions:a,props:e,options:t,echarts:i})})):P({chartOptions:p,props:e,options:t,echarts:i}))},P=({chartOptions:e,props:i,options:a,echarts:s,nextTick:o})=>{const{chartColor:n,_store:r,_once:l,el:c,readyCallback:p,readyOnceCallback:h}=a;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=n,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 a={markArea:null==i?void 0:i.markArea,markLine:null==i?void 0:i.markLine,markPoint:null==i?void 0:i.markPoint},s=e.series;t.isArray(s)?s.forEach((e=>{A(e,a)})):t.isObject(s)&&A(s,a)}(null==i?void 0:i.extend)&&function(e,i){Object.keys(i).forEach((a=>{const s=i[a];~a.indexOf(".")?t.set(e,a,s):"function"==typeof s?e[a]=s(e[a]):t.isArray(e[a])&&t.isObject(e[a][0])?e[a].forEach(((t,i)=>{e[a][i]=Object.assign({},t,s)})):t.isObject(e[a])?e[a]=Object.assign({},e[a],s):e[a]=s}))}(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 a=e[i];a&&(t.isEqual(a,r[i])?e[i]=void 0:r[i]=t.cloneDeep(a))})),t.isObject(u)?u.notMerge=!1:u=!1),null==i||i.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==i?void 0:i.judgeWidth)&&N({props:i,el:c,nextTick:o,echarts:s}),(null==i?void 0:i.afterSetOption)&&(null==i||i.afterSetOption(s,e,d)),(null==i?void 0:i.afterSetOptionOnce)&&!l.afterSetOptionOnce&&(l.afterSetOptionOnce=!0,null==i||i.afterSetOptionOnce(s,e,d))},N=({props:e,el:t,nextTick:i,echarts:a})=>{t.clientWidth||t.clientHeight?$({props:e,el:t,echarts:a}):i((()=>{t.clientWidth||t.clientHeight?$({props:e,el:t,echarts:a}):setTimeout((()=>{$({props:e,el:t,echarts:a}),!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:a}}=e;L({echarts:i,props:t,_once:a}),i=null,_(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&&j({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],j({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:a,echarts:s})=>{e&&!t.onresize&&k({_once:t,props:i,el:a,echarts:s}),!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:a,chartHandler:s,_once:o,_store:n,$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:o,_store:n,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}=_(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,(()=>{j({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([r.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"}(this["@v-charts2/scatter"]=this["@v-charts2/scatter"]||{},utilsLite,numerify,echarts/components,echartsLib,echarts/features,echarts/renderers,echarts/charts);