UNPKG

@v-charts2/scatter

Version:

echarts 散点图

8 lines (7 loc) 17.2 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,o)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,__spreadValues=(e,t)=>{for(var o in t||(t={}))__hasOwnProp.call(t,o)&&__defNormalProp(e,o,t[o]);if(__getOwnPropSymbols)for(var o of __getOwnPropSymbols(t))__propIsEnum.call(t,o)&&__defNormalProp(e,o,t[o]);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("vue"),require("echarts/charts")):"function"==typeof define&&define.amd?define(["exports","utils-lite","numerify","echarts/components","echarts/core","echarts/features","echarts/renderers","vue","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.Vue,e["echarts/charts"])}(this,(function(e,t,o,i,n,a,r,s,l){"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(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,i.get?i:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var d=c(o),u=p(n);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([i.TitleComponent,i.TooltipComponent,i.GridComponent,i.DatasetComponent,i.TransformComponent,a.LabelLayout,a.UniversalTransition,r.SVGRenderer,r.CanvasRenderer,i.LegendComponent]);const f=(e,o,i,n="-")=>{if(isNaN(e))return n;if(!o)return e;if(t.isFunction(o))return o(e,d.default);i=isNaN(i)?0:++i;const a=`.[${new Array(i).join(0)}]`;let r=o;switch(o){case"KMB":r=i?`0,0${a}a`:"0,0a";break;case"normal":r=i?`0,0${a}`:"0,0";break;case"percent":r=i?`0,0${a}%`:"0,0.[00]%"}return d.default(e,r)};function g(e){const{rows:t,axisSite:o,metrics:i,area:n,stack:a,nullAddZero:r,labelMap:s,label:l,itemStyle:c,lineStyle:p,areaStyle:d,dimension:u}=e,h=[],m={},y=a&&(e=>{const t={};return Object.keys(e).forEach((o=>{e[o].forEach((e=>{t[e]=o}))})),t})(a);return i.forEach((e=>{m[e]=[]})),t.forEach((e=>{i.forEach((t=>{let o=null;null!=e[t]?o=e[t]:r&&(o=0),m[t].push([e[u[0]],o])}))})),i.forEach((e=>{const t={name:null!=s[e]?s[e]:e,type:"line",data:m[e]};n&&(t.areaStyle={}),o.right&&(t.yAxisIndex=~o.right.indexOf(e)?1:0),a&&y[e]&&(t.stack=y[e]),l&&(t.label=l),c&&(t.itemStyle=c),p&&(t.lineStyle=p),d&&(t.areaStyle=d),h.push(t)})),h}const x=(e,o,i,n)=>{o=t.isArray(o)?o:[],e=t.isArray(e)?e:[];const{axisSite:a={},yAxisType:r=["normal","normal"],xAxisType:s="category",yAxisName:l=[],dimension:c=[e[0]],xAxisName:p=[],axisVisible:d=!0,area:u,stack:h,scale:m=[!1,!1],min:y=[null,null],max:b=[null,null],nullAddZero:x=!1,digit:v=2,legendName:O={},labelMap:A={},label:j,itemStyle:S,lineStyle:_,areaStyle:w}=i,{tooltipVisible:k,legendVisible:T,tooltipFormatter:E}=n;let N=e.slice();a.left&&a.right?N=a.left.concat(a.right):a.left&&!a.right?N=a.left:i.metrics?N=i.metrics:N.splice(e.indexOf(c[0]),1);const C=T&&function(e){const{metrics:t,legendName:o,labelMap:i}=e;return o||i?{data:i?t.map((e=>null==i[e]?e:i[e])):t,formatter:e=>null!=o[e]?o[e]:e}:{data:t}}({metrics:N,legendName:O,labelMap:A}),z=k&&function(e){const{axisSite:o,yAxisType:i,digit:n,labelMap:a,tooltipFormatter:r}=e,s=o.right||[],l=a?s.map((e=>void 0===a[e]?e:a[e])):s;return{trigger:"axis",formatter(e){if(r)return r.apply(null,arguments);const o=[],{name:a,axisValueLabel:s}=e[0],c=a||s;return o.push(`${c}<br>`),e.forEach((({seriesName:e,data:a,marker:r})=>{let s=null;const c=~l.indexOf(e)?i[1]:i[0],p=t.isArray(a)?a[1]:a;s=f(p,c,n),o.push(r),o.push(`${e}: ${s}`),o.push("<br>")})),o.join("")}}}({axisSite:a,yAxisType:r,digit:v,labelMap:A,xAxisType:s,tooltipFormatter:E}),P=function(e){const{dimension:t,rows:o,xAxisName:i,axisVisible:n,xAxisType:a}=e;return t.map(((e,t)=>({type:a,nameLocation:"middle",nameGap:22,name:i[t]||"",axisTick:{show:!0,lineStyle:{color:"#eee"}},data:o.map((t=>t[e])),show:n})))}({dimension:c,rows:o,xAxisName:p,axisVisible:d,xAxisType:s}),V=function(e){const{yAxisName:t,yAxisType:o,axisVisible:i,scale:n,min:a,max:r,digit:s}=e,l={type:"value",axisTick:{show:!1},show:i},c=[];for(let p=0;p<2;p++)o[p]?c[p]=Object.assign({},l,{axisLabel:{formatter:e=>f(e,o[p],s)}}):c[p]=Object.assign({},l),c[p].name=t[p]||"",c[p].scale=n[p]||!1,c[p].min=a[p]||null,c[p].max=r[p]||null;return c}({yAxisName:l,yAxisType:r,axisVisible:d,scale:m,min:y,max:b,digit:v});return{legend:C,xAxis:P,series:g({rows:o,axisSite:a,metrics:N,area:u,stack:h,nullAddZero:x,labelMap:A,label:j,itemStyle:S,lineStyle:_,areaStyle:w,xAxisType:s,dimension:c}),yAxis:V,tooltip:z}};function v(e,t){const{labelMap:o,columns:i,dataType:n,digit:a}=t,r=[],{color:s,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(""))(s)} ${l}<br>`),c.forEach(((e,t)=>{const s=o[i[t]]||i[t],l=isNaN(e)?e:f(e,n[i[t]],a);r.push(`${s}: ${l}<br>`)})),r.join("")}const 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((o=>{t[o]&&(e[o]=t[o])}))}const j=({echarts:e,props:t,canvas:o,options:i}={})=>{if(e)return;const{registeredEvents:n,_once:a,el:r}=i,s=(null==t?void 0:t.themeName)||(null==t?void 0:t.theme)||h;return e=u.init(o,s,__spreadValues({renderer:null==t?void 0:t.renderer},null==t?void 0:t.initOptions)),(null==t?void 0:t.data)&&S({props:t,options:i,echarts:e}),w({registeredEvents:n,echarts:e,props:t}),(null==t?void 0:t.resizeable)&&k({_once:a,props:t,el:r,echarts:e}),{echarts:e}},S=({props:e,options:o,echarts:i}={})=>t.debounce(E({props:e,options:o,echarts:i}),null==e?void 0:e.changeDelay),_=({props:e,el:o,echarts:i}={})=>t.debounce(z({props:e,el:o,echarts:i}),null==e?void 0:e.resizeDelay),w=({registeredEvents:e,echarts:t,props:o})=>{const i=Object.keys((null==o?void 0:o.events)||{});i.length&&i.forEach((i=>{var n;-1===e.indexOf(i)&&(e.push(i),t.on(i,(n=i,function(...e){n in o.events&&(null==o||o.events[n].apply(null,e))})))}))},k=({_once:e,props:t,el:o,echarts:i})=>{window.addEventListener("resize",(()=>_({props:t,el:o,echarts:i}))),e.onresize=!0},T=({_once:e})=>{window.removeEventListener("resize",_),e.onresize=!1},E=({props:e,options:t,echarts:o}={})=>{const{chartHandler:i,chartColor:n,_once:a}=t;if(!i)return;let r=null==e?void 0:e.data;const{columns:s=[],rows:l=[]}=r,c={tooltipVisible:null==e?void 0:e.tooltipVisible,legendVisible:null==e?void 0:e.legendVisible,echarts:o,color:n,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=i(s,l,null==e?void 0:e.settings,c);p&&("function"==typeof p.then?p.then((i=>{N({chartOptions:i,props:e,options:t,echarts:o})})):N({chartOptions:p,props:e,options:t,echarts:o}))},N=({chartOptions:e,props:o,options:i,echarts:n,nextTick:a})=>{const{chartColor:r,_store:s,_once:l,el:c,readyCallback:p,readyOnceCallback:d}=i;if((null==o?void 0:o.legendPosition)&&e.legend&&(e.legend[null==o?void 0:o.legendPosition]=10,~["left","right"].indexOf(null==o?void 0:o.legendPosition)&&(e.legend.top="middle",e.legend.orient="vertical")),e.color=r,b.forEach((t=>{(null==o?void 0:o[t])&&(e[t]=null==o?void 0:o[t])})),(null==o?void 0:o.animation)&&function(e,t){Object.keys(t).forEach((o=>{e[o]=t[o]}))}(e,null==o?void 0:o.animation),(null==o?void 0:o.markArea)||(null==o?void 0:o.markLine)||(null==o?void 0:o.markPoint)){const i={markArea:null==o?void 0:o.markArea,markLine:null==o?void 0:o.markLine,markPoint:null==o?void 0:o.markPoint},n=e.series;t.isArray(n)?n.forEach((e=>{A(e,i)})):t.isObject(n)&&A(n,i)}(null==o?void 0:o.extend)&&function(e,o){Object.keys(o).forEach((i=>{const n=o[i];~i.indexOf(".")?t.set(e,i,n):"function"==typeof n?e[i]=n(e[i]):t.isArray(e[i])&&t.isObject(e[i][0])?e[i].forEach(((t,o)=>{e[i][o]=Object.assign({},t,n)})):t.isObject(e[i])?e[i]=Object.assign({},e[i],n):e[i]=n}))}(e,null==o?void 0:o.extend),(null==o?void 0:o.afterConfig)&&(e=null==o?void 0:o.afterConfig(e));let h=null==o?void 0:o.setOptionOpts;!(null==o?void 0:o.settings.bmap)&&!(null==o?void 0:o.settings.amap)||t.isObject(h)||(h=!1),(null==o?void 0:o.notSetUnchange)&&(null==o?void 0:o.notSetUnchange.length)&&(null==o||o.notSetUnchange.forEach((o=>{const i=e[o];i&&(t.isEqual(i,s[o])?e[o]=void 0:s[o]=t.cloneDeep(i))})),t.isObject(h)?h.notMerge=!1:h=!1),null==o||o.log,n.setOption(e,h),p instanceof Function&&p(n,e,u),l["ready-once"]||(l["ready-once"]=!0,d instanceof Function&&d(n,e,u)),(null==o?void 0:o.judgeWidth)&&C({props:o,el:c,nextTick:a,echarts:n}),(null==o?void 0:o.afterSetOption)&&(null==o||o.afterSetOption(n,e,u)),(null==o?void 0:o.afterSetOptionOnce)&&!l.afterSetOptionOnce&&(l.afterSetOptionOnce=!0,null==o||o.afterSetOptionOnce(n,e,u))},C=({props:e,el:t,nextTick:o,echarts:i})=>{t.clientWidth||t.clientHeight?z({props:e,el:t,echarts:i}):o((()=>{t.clientWidth||t.clientHeight?z({props:e,el:t,echarts:i}):setTimeout((()=>{z({props:e,el:t,echarts:i}),!t.clientWidth||t.clientHeight}),null==e?void 0:e.widthChangeDelay)}))},z=({props:e,el:t,echarts:o}={})=>{((null==e?void 0:e.cancelResizeCheck)||t&&t.clientWidth&&t.clientHeight)&&P(o)},P=e=>{e&&e.resize()},V=(e,t)=>{let{echarts:o,option:{_once:i}}=e;L({echarts:o,props:t,_once:i}),o=null,j(e)},L=({echarts:e,props:t,_once:o})=>{(null==t?void 0:t.resizeable)&&T({_once:o}),e&&e.dispose()};u.use([l.ScatterChart]);const M=(({name:e,chartHandler:o,chartLib:i})=>({name:e,props:O,setup(n,{slots:a,emit:r}){let l=null;const c=[],p={},d=[];let u=null;u=S||i[n.settings.type];const h=s.computed((()=>({width:null==n?void 0:n.width,height:null==n?void 0:n.height,position:"relative"}))),b=s.computed((()=>(null==n?void 0:n.colors)||(null==n?void 0:n.theme)&&(null==n?void 0:n.theme.color)||m)),f=s.h("div",{class:"v-charts-data-empty"},"暂无数据"),g=s.h("div",{class:"v-charts-component-loading"},[s.h("div",{class:"loader"},[s.h("div",{class:"loading-spinner"},[s.h("svg",{class:"circular",viewBox:"25 25 50 50"},[s.h("circle",{class:"path",cx:"50",cy:"50",r:"20",fill:"none"})])])])]),x=s.h("div",{style:h.value,class:{"v-charts-mask-status":(null==n?void 0:n.dataEmpty)||(null==n?void 0:n.loading)}}),v=s.h("div",{class:[t.camelToKebab(e)],style:h.value},[x,s.h(f,{style:{display:(null==n?void 0:n.dataEmpty)?"":"none"}}),s.h(g,{style:{display:(null==n?void 0:n.loading)?"":"none"}}),a.default]),O={echarts:l,props:n,canvas:x.el,options:{el:v.el,registeredEvents:c,chartHandler:o,chartColor:b.value,_once:p,_store:{},readyCallback:(e,t,o)=>{r("ready",e,t,o)},readyOnceCallback:(e,t,o)=>{r("ready-once",e,t,o)}},nextTick:s.nextTick},A=()=>{s.nextTick(z({props:n,el:v.el,echarts:l}))};s.watch((()=>null==n?void 0:n.data),(e=>{e&&u({props:n,options:O.options,echarts:l})}),{deep:!0}),s.watch((()=>null==n?void 0:n.settings),(e=>{e.type&&i&&(o=i[e.type]),O.options.chartHandler=i[e.type],u({props:n,options:O.options,echarts:l})}),{deep:!0}),s.watch((()=>null==n?void 0:n.width),(()=>A())),s.watch((()=>null==n?void 0:n.height),(()=>A())),s.watch((()=>null==n?void 0:n.events),(()=>w({registeredEvents:c,echarts:l,props:n})),{deep:!0}),s.watch((()=>null==n?void 0:n.theme),(()=>{s.nextTick((()=>{O.canvas=x.el,O.options.el=v.el,V(O,n)}))}),{deep:!0}),s.watch((()=>null==n?void 0:n.themeName),(()=>{s.nextTick((()=>{O.canvas=x.el,O.options.el=v.el,V(O,n)}))})),s.watch((()=>null==n?void 0:n.resizeable),(e=>{s.nextTick((()=>{(({resizeable:e,_once:t,props:o,el:i,echarts:n})=>{e&&!t.onresize&&k({_once:t,props:o,el:i,echarts:n}),!e&&t.onresize&&T({_once:t})})({resizeable:e,_once:p,props:n,el:v.el,echarts:l})}))}));return s.onMounted((()=>{O.canvas=x.el,O.options.el=v.el;const{echarts:e}=j(O);l=e,(({_watchers:e,props:o,options:i,echarts:n})=>{const a=e.map((e=>e.expression));Object.keys(o).forEach((e=>{if(!~a.indexOf(e)&&!~y.indexOf(e)){const a={};~["[object Object]","[object Array]"].indexOf(t.getType(o[e]))&&(a.deep=!0),s.watch((()=>e),(()=>u({props:o,options:i,echarts:n})),a)}}))})({_watchers:d,props:n,options:O.options,echarts:l})})),s.onBeforeUnmount((()=>{L({echarts:l,props:n,_once:p})})),()=>v}}))({name:"VeScatter",chartHandler:(e,o,i,n)=>{const{dimension:a=e[0],metrics:r=[e[1],e[2]],dataType:s={},xAxisType:l="category",xAxisName:c,yAxisName:p,digit:d=2,legendName:u={},labelMap:h={},tooltipTrigger:m="item",axisVisible:y=!0,symbolSizeMax:b=50,symbol:g,symbolSize:O,symbolRotate:A,symbolOffset:j,cursor:S,min:_,max:w,scale:k,label:T,itemStyle:E}=i;if(t.isArray(o)){const t=Object.assign({},i,{xAxisName:c?[c]:void 0,yAxisName:p?[p]:void 0,scale:k?[k]:void 0,min:_?[_]:void 0,max:w?[w]:void 0,dimension:a?[a]:void 0}),r=x(e,o,t,n);return r&&r.series?(r.series.forEach((e=>{Object.assign(e,{type:"scatter",symbol:g,symbolSize:O||10,symbolRotate:A,symbolOffset:j,cursor:S,label:T,itemStyle:E})})),r):{}}const{tooltipVisible:N,legendVisible:C}=n,z=Object.keys(o),P=C&&function(e,t){return{data:e,formatter:e=>null!=t[e]?t[e]:e}}(z,u),V=N&&function(e){const{tooltipTrigger:o}=e;return{trigger:o,formatter:o=>t.isArray(o)?o.map((t=>v(t,e))).join(""):v(o,e)}}({tooltipTrigger:m,labelMap:h,columns:e,dataType:s,digit:d}),L=function(e){const{xAxisName:t,axisVisible:o,xAxisType:i,rows:n,dataLabels:a,dimension:r}=e,s=[];return a.forEach((e=>{n[e].forEach((e=>{const t=e[r];t&&!~s.indexOf(t)&&s.push(t)}))})),[{type:i,show:o,name:t,data:s}]}({xAxisName:c,axisVisible:y,xAxisType:l,dataLabels:z,dimension:a,rows:o}),M=function(e){const{min:t,max:o,scale:i,yAxisName:n,dataType:a,metrics:r,digit:s,axisVisible:l}=e;return{type:"value",show:l,scale:i,min:t,max:o,axisTick:{show:!1},name:n,axisLabel:{formatter:e=>f(e,a[r[0]],s)}}}({min:_,max:w,scale:k,yAxisName:p,dataType:s,metrics:r,digit:d,axisVisible:y}),F=function(e){const{rows:t,dataLabels:o,columns:i,metrics:n,dimension:a,label:r,itemStyle:s,symbol:l,symbolSizeMax:c,symbolSize:p,symbolRotate:d,symbolOffset:u,cursor:h}=e,m=i.filter((e=>!~n.indexOf(e)&&e!==a)),y=[];o.forEach((e=>{t[e].forEach((e=>{y.push(e[n[1]])}))}));const b=Math.max.apply(null,y),f=[];return o.forEach((e=>{const o=[];t[e].forEach((e=>{const t={value:[]};t.value.push(e[a],e[n[0]],e[n[1]]),m.forEach((o=>{t.value.push(e[o])})),t.symbolSize=p||e[n[1]]/b*c,o.push(t)})),f.push({type:"scatter",data:o,name:e,label:r,itemStyle:s,symbol:l,symbolRotate:d,symbolOffset:u,cursor:h})})),f}({rows:o,dataLabels:z,columns:e,metrics:r,dimension:a,label:T,itemStyle:E,symbol:g,symbolSizeMax:b,symbolSize:O,symbolRotate:A,symbolOffset:j,cursor:S});return{legend:P,tooltip:V,xAxis:L,yAxis:M,series:F}}});M.install=e=>{e.component(M.name,M)},e.default=M,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));