|
|
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-3944b608"],{"68ca":function(t,e,a){},"773f":function(t,e,a){"use strict";a.r(e);var r=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"chart",attrs:{id:"pie"}})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"chart",attrs:{id:"line"}})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"chart",attrs:{id:"bar"}})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"chart",attrs:{id:"gauge"}})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"chart",attrs:{id:"radar"}})])],1)],1)},i=[];function o(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}a("b680");var n=a("bbd5"),l={name:"EChartsSimple",computed:{chartPie:function(){return this.$echarts.init(n["a"].getDom("pie"))},chartLine:function(){return this.$echarts.init(n["a"].getDom("line"))},chartBar:function(){return this.$echarts.init(n["a"].getDom("bar"))},chartGauge:function(){return this.$echarts.init(n["a"].getDom("gauge"))},chartRadar:function(){return this.$echarts.init(n["a"].getDom("radar"))}},methods:{drawPie:function(){var t=this;return this.$axios.get("/chart-simple/pie").then((function(e){var a="中文名使用TOP5";t.chartPie.setOption({title:Object.assign({},n["a"].defaultEchartsOpt.title,{text:a}),tooltip:{trigger:"item",formatter:"{a} <br/>{b} : {c} ({d}%)"},color:["#af84cb","#3acaa9","#ebcc6f","#67c4ed","rgba(32, 254, 255, 0.5)"],series:[{name:a,type:"pie",radius:"55%",center:["50%","50%"],data:e.data.data,roseType:"radius",label:{normal:{textStyle:{color:"#777"}}},labelLine:{normal:{lineStyle:{color:"#888"},smooth:.2,length:10,length2:20}},itemStyle:{normal:{shadowBlur:200,shadowColor:"rgba(0, 0, 0, 0.5)"}},animationType:"scale",animationEasing:"elasticOut",animationDelay:function(t){return 200*Math.random()}}]})})),this},drawLine:function(){var t=this;return this.$axios.get("/chart-simple/line").then((function(e){var a="用户周活跃度";t.chartLine.setOption({title:Object.assign({},n["a"].defaultEchartsOpt.title,{text:a}),tooltip:{trigger:"axis",formatter:"{a} <br/>{b} : {c}"},xAxis:{type:"category",data:e.data.xData,boundaryGap:!1,splitLine:{show:!1,interval:"auto",lineStyle:{color:["#D4DFF5"]}},axisLine:{lineStyle:{color:"#999"}},axisLabel:{margin:10,textStyle:{fontSize:12}}},yAxis:{type:"value",splitLine:{lineStyle:{color:["#D4DFF5"]}},axisTick:{show:!1},axisLine:{lineStyle:{color:"#999"}},axisLabel:{margin:10,textStyle:{fontSize:12}}},series:[{name:a,data:e.data.yData,type:"line",smooth:!0,showSymbol:!1,symbol:"circle",symbolSize:6,areaStyle:{normal:{color:new t.$echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"rgba(199, 237, 250, 0.5)"},{offset:1,color:"rgba(199, 237, 250, 0.2)"}],!1)}},itemStyle:{normal:{color:"rgba(32, 254, 255, 0.5)"}},lineStyle:{normal:{width:2}}}]})})),this},drawBar:function(){var t=this;return this.$axios.get("/chart-simple/bar").then((function(e){var a="商品日销量";t.chartBar.setOption({title:Object.assign({},n["a"].defaultEchartsOpt.title,{text:a}),tooltip:{trigger:"item",formatter:"{a} <br/>{b} : {c}"},xAxis:{type:"category",data:e.data.xData,axisLine:{lineStyle:{color:"#999"}},axisLabel:{margin:10,textStyle:{fontSize:12}}},yAxis:{type:"value",splitLine:{lineStyle:{color:["#D4DFF5"]}},axisTick:{show:!1},axisLine:{lineStyle:{color:"#999"}},axisLabel:{margin:10,textStyle:{fontSize:12}}},series:[{name:a,data:e.data.yData,type:"bar",symbol:"triangle",symbolSize:20,lineStyle:{normal:{color:"green",width:4,type:"dashed"}},barWidth:25,itemStyle:{normal:{barBorderRadius:30,color:new t.$echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:"#00feff"},{offset:.5,color:"#027eff"},{offset:1,color:"#0286ff"}])}}}]})})),this},drawGauge:function(){var t,e=this,a="平均速度(km/h)",r={title:Object.assign({},n["a"].defaultEchartsOpt.title,{text:a}),series:[(t={name:a,type:"gauge",center:["50%","60%"],min:0,max:220,splitNumber:11,radius:"80%",axisLine:{lineStyle:{width:7}},axisTick:{length:12,lineStyle:{color:"auto"}},splitLine:{length:15,lineStyle:{color:"auto"}}},o(t,"axisLine",{show:!0,lineStyle:{width:20,color:[[1,new this.$echarts.graphic.LinearGradient(0,0,1,0,[{offset:0,color:"#3acaa9"},{offset:1,color:"#0286ff"}])]]}}),o(t,"axisLabel",{backgroundColor:"auto",borderRadius:2,color:"#eee",padding:3,textShadowBlur:2,textShadowOffsetX:1,textShadowOffsetY:1,textShadowColor:"#222"}),o(t,"pointer",{width:5}),o(t,"detail",{formatter:function(t){return parseFloat(t).toFixed(2)},fontWeight:"bolder",borderRadius:3,backgroundColor:"",shadowBlur:5,shadowColor:"#333",shadowOffsetY:3,borderWidth:2,textShadowBlur:2,textShadowColor:"#222e7d",width:70,fontSize:20,color:"#eee"}),o(t,"data",[{value:40,name:""}]),t)]};return this.$axios.get("/chart-simple/gauge").then((function(t){r.series[0].data[0].value=t.data.value,e.chartGauge.setOption(r),setInterval((function(){r.series[0].data[0].value=(100*Math.random()).toFixed(2),e.chartGauge.setOption(r,!0)}),2e3)})),this},drawRadar:function(){var t=this;return this.$axios.get("/chart-simple/radar").then((function(e){var a="部门预算支出比";t.chartRadar.setOption({title:Object.assign({},n["a"].defaultEchartsOpt.title,{text:a}),tooltip:{},radar:{name:{textStyle:{color:"#999"}},center:["50%","58%"],radius:"57%",indicator:[{name:"销售",max:16e3},{name:"管理",max:16e3},{name:"运营",max:16e3},{name:"客服",max:16e3},{name:"研发",max:16e3},{name:"市场",max:16e3}]},series:[{name:"预算 vs 开销（Budget vs spending）",type:"radar",symbol:"circle",symbolSize:10,data:[{value:e.data.budget,name:"预算分配（Allocated Budget）",areaStyle:{normal:{color:"rgba(154, 116, 179, 0.7)"}},itemStyle:{color:"rgba(154, 116, 179, 1)",borderColor:"rgba(154, 116, 179, 0.3)",borderWidth:10},lineStyle:{normal:{color:"rgba(154, 116, 179, 1)",width:2}}},{value:e.data.spending,name:"实际开销（Actual Spending）",areaStyle:{normal:{color:"rgba(126, 237, 238, 0.7)"}},itemStyle:{color:"rgba(126, 237, 238, 1)",borderColor:"rgba(126, 237, 238, 0.3)",borderWidth:10},lineStyle:{normal:{color:"rgba(126, 237, 238, 1)",width:2}}}]}]})})),this},resizeChart:function(){var t=this;window.addEventListener("resize",(function(){t.chartPie.resize(),t.chartLine.resize(),t.chartBar.resize(),t.chartGauge.resize(),t.chartRadar.resize()}))}},mounted:function(){this.drawPie().drawLine().drawBar().drawGauge().drawRadar().resizeChart()}},s=l,c=(a("d2dd"),a("2877")),d=Object(c["a"])(s,r,i,!1,null,"76e5b69b",null);e["default"]=d.exports},d2dd:function(t,e,a){"use strict";a("68ca")}}]);
|
