那个网站卖做防水的烤枪,中国网站建设公司 排名,装饰设计有限公司,咨询公司管理制度封装echarts成vue component EChartsLineComponent 文章目录 封装echarts成vue component EChartsLineComponent封装说明重写重点EChartsLineComponent的源码 使用说明调用EChartsLineComponent示例源码 封装说明
为了减少一些公共代码和方便使用echarts的line图形#xff0c…封装echarts成vue component EChartsLineComponent 文章目录 封装echarts成vue component EChartsLineComponent封装说明重写重点EChartsLineComponent的源码 使用说明调用EChartsLineComponent示例源码 封装说明
为了减少一些公共代码和方便使用echarts的line图形有限制条件的封装echats中的line类型的图该Component名称为EChartsLineComponent。
重写重点 以dateset属性中的source来判断图形是否包含数据意味着需要通过datasetsource的方式配置数据。初始化option是要定义datasourcesource属性否则不能正常使用该EChartsLineComponent。 option:{dataset: {// 第一行为表头第一个元素为X轴其后为Y轴元素// 第二行为具体数据点source: []}
}同时在定义的option中需要先确认数据每条线显示的效果即配置series属性。 option:{series: [{type: line,smooth: true,},{type: line,smooth: true,}]
}定义了空数据的展示效果舍弃了有数据状态下的grid属性。 增加了窗口自适应写法并确定初始化图标高度为400px宽度100%。
EChartsLineComponent的源码
templatediv :idchartId :style{ width: width, height: height }/div
/templatescript
import * as echarts from echarts;export default {name: EChartsLineComponent,props: {chartId: {type: String,required: true},width: {type: String,default: 100%},height: {type: String,default: 400px},option: {type: Object,required: true},},data() {return {chartInstance: null,noDataOption: {title: {show: true,text: 暂无数据,left: center, // 水平居中top: center, // 垂直居中},xAxis: {show: false,},yAxis: {show: false,},grid: {show: true,shadowColor: rgba(0, 0, 0, 0.5),shadowBlur: 10}},};},watch: {option: {handler(newOption, oldOption) {if (this.chartInstance) {// todo 需要细化明确数据变成空的定义 变化中if (newOption.dataset.source.length 0) {this.updateAxisShow(newOption, false)this.chartInstance.clear();this.noDataOption.title.show truethis.noDataOption.grid.show truethis.chartInstance.setOption(this.noDataOption);} else {newOption.title {show: false}newOption.grid {show: false}this.updateAxisShow(newOption, true)this.chartInstance.setOption(newOption);}} else {this.init()}},deep: true}},mounted() {this.init()// todo 需要细化明确数据变成空的定义 -- 初始化时if (this.chartInstance.getOption().dataset[0].source.length 0) {this.updateAxisShow(this.chartInstance.getOption(), false);this.chartInstance.clear();this.chartInstance.setOption(this.noDataOption);}window.addEventListener(resize, this.handleResize);},beforeDestroy() {window.removeEventListener(resize, this.handleResize);if (this.chartInstance) {this.chartInstance.dispose();}},methods: {init() {this.chartInstance echarts.init(document.getElementById(this.chartId), {renderer: svg});this.chartInstance.setOption(this.option);window.addEventListener(resize, this.handleResize);},handleResize() {if (this.chartInstance) {this.chartInstance.resize();}},updateAxisShow(newOption, value) {if (newOption.yAxis.length) {this.noDataOption.yAxis []for (let i 0; i newOption.yAxis.length; i) {this.noDataOption.yAxis.push({show: value})newOption.yAxis[i].show value}} else {this.noDataOption.yAxis {show: value}newOption.yAxis.show value}if (newOption.xAxis.length) {this.noDataOption.xAxis []for (let i 0; i newOption.xAxis.length; i) {this.noDataOption.xAxis.push({show: value})newOption.xAxis[i].show value}} else {this.noDataOption.xAxis {show: value}newOption.xAxis.show value}},}
};
/script
使用说明
调用EChartsLineComponent示例源码
templatesn-pagesd-search-pane refsearchPane:modelsearchModel:optionssearchOptions:rulessearchRules:span3:hide-canceltruehandle-queryhandleQuery/divdiv classtitleCPU内核情况/divEChartsComponent chart-idCPUUsedChart :optionCPUUsedChartOption/EChartsComponentdiv classtitle内存情况/divEChartsComponent chart-idMemoryUsedChart :optionMemoryUsedChartOption/EChartsComponentdiv classtitle资源pending情况/divEChartsComponent chart-idPendingChart :optionPendingChartOption/EChartsComponentdiv classtitleAPP情况/divEChartsComponent chart-idAPPChart :optionAPPChartChartOption/EChartsComponentdiv classtitleContainer情况/divEChartsComponent chart-idContainerUsedChart :optionContainerUsedChartOption/EChartsComponent/div/sn-page
/templatescript
export default {data(vm) {return {searchModel: {clusterName: ,queueName: ,time: []},searchOptions: {clusterName: {label: 集群,type: select,span: 6,props: {clearable: true,filterable: true},on: {change(val) {val vm.getQueue()},clear() {vm.clearQueue()}},children: []},queueName: {label: 队列,type: select,span: 6,props: {clearable: true,filterable: true},children: []},time: {label: 时间,type: date-picker,span: 9,props: {clearable: true,type: datetimerange,rangeSeparator: 到,format: yyyy-MM-dd HH:mm,value-format: yyyy-MM-dd HH:mm,pickerOptions: {shortcuts: [{text: 最近3小时,onClick(picker) {const end new Date();const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 3);picker.$emit(pick, [start, end]);}}, {text: 最近1天,onClick(picker) {const end new Date();const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24);picker.$emit(pick, [start, end]);}}, {text: 最近3天,onClick(picker) {const end new Date();const start new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);picker.$emit(pick, [start, end]);}}]}}}},searchRules: {clusterName: [{required: true,message: 请选择集群,trigger: change}],queueName: [{required: true,message: 请选择队列,trigger: change}],time: [{required: true,message: 请选择时间,trigger: change}]},CPUUsedChartOption: {legend: {top: bottom,},tooltip: {trigger: axis,},toolbox: {show: true,feature: {saveAsImage: {show: true}}},dataset: {// 第一行为表头第一个元素为X轴其后为Y轴元素// 第二行为具体数据点source: []},xAxis: {show: true,type: category,boundaryGap: false,},yAxis: {type: value,name: 数量,splitLine: {show: true},axisLabel: {show: true,fontSize: 16,}},series: [{type: line,lineStyle: {width: 3, // 设置线条宽度为4type: dashed, // 设置为虚线},smoothMonotone: x,smooth: true,},{type: line,smoothMonotone: x,smooth: true,},{type: line,lineStyle: {width: 3, // 设置线条宽度为4type: dashed, // 设置为虚线},smoothMonotone: x,smooth: true,}]},MemoryUsedChartOption: {legend: {top: bottom,},tooltip: {trigger: axis,},toolbox: {show: true,feature: {saveAsImage: {show: true}}},dataset: {// 第一行为表头第一个元素为X轴其后为Y轴元素// 第二行为具体数据点source: []},xAxis: {show: true,type: category,boundaryGap: false,},yAxis: {type: value,name: 大小,splitLine: {show: true},axisLabel: {show: true,fontSize: 16,}},series: [{type: line,lineStyle: {width: 3, // 设置线条宽度为4type: dashed, // 设置为虚线},smoothMonotone: x,smooth: true,},{type: line,smoothMonotone: x,smooth: true,},{type: line,lineStyle: {width: 3, // 设置线条宽度为4type: dashed, // 设置为虚线},smoothMonotone: x,smooth: true,}]},PendingChartOption: {legend: {top: bottom,},tooltip: {trigger: axis,},toolbox: {show: true,feature: {saveAsImage: {show: true}}},dataset: {// 第一行为表头第一个元素为X轴其后为Y轴元素// 第二行为具体数据点source: []},xAxis: {show: true,type: category,boundaryGap: false,},yAxis: [{type: value,name: 大小,splitLine: {show: true},axisLabel: {show: true,fontSize: 16,}},{type: value,name: 数量,splitLine: {show: true},axisLabel: {show: true,fontSize: 16,}}],series: [{type: line,yAxisIndex: 0,smooth: true,},{type: line,yAxisIndex: 1,smooth: true,},]},APPChartChartOption: {legend: {top: bottom,},tooltip: {trigger: axis,},toolbox: {show: true,feature: {saveAsImage: {show: true}}},dataset: {// 第一行为表头第一个元素为X轴其后为Y轴元素// 第二行为具体数据点source: []},xAxis: {show: true,type: category,boundaryGap: false,},yAxis: {type: value,name: 数量,splitLine: {show: true},axisLabel: {show: true,fontSize: 16,}},series: [{type: line,lineStyle: {width: 3, // 设置线条宽度为4type: dashed, // 设置为虚线},smooth: true,},{type: line,smooth: true,},{type: line,smooth: true,},{type: line,smooth: true,},{type: line,smooth: true,},{type: line,smooth: true,},{type: line,smooth: true,},{type: line,smooth: true,},]},ContainerUsedChartOption: {legend: {top: bottom,},tooltip: {trigger: axis,},toolbox: {show: true,feature: {saveAsImage: {show: true}}},dataset: {// 第一行为表头第一个元素为X轴其后为Y轴元素// 第二行为具体数据点source: []},xAxis: {show: true,type: category,boundaryGap: false,},yAxis: {type: value,name: 数量,splitLine: {show: true},axisLabel: {show: true, fontSize: 16,}},series: [{type: line,smoothMonotone: x,smooth: true,},{type: line,smoothMonotone: x,smooth: true,},]}};},methods: {handleRes(res, title) {if (res.code 0) {this.$message({type: success,message: title res.msg})} else {this.$message({type: error,message: title res.msg})}},getCPUUsed() {this.$get({api: api/v2/manager/yarn/metric/getQueueMetricMaxValue,params: {metrics: AllocatedVCores,MaxShareVCores,MinShareVCores,clusterName: this.searchModel.clusterName,queueName: this.searchModel.queueName,startTime: this.searchModel.time[0],endTime: this.searchModel.time[1]}}, res {this.handleRes(res,CPU内核情况)this.CPUUsedChartOption.dataset.source res.data})},getMemoryUsed() {this.$get({api: api/v2/manager/yarn/metric/getQueueMetricMaxValue,params: {clusterName: this.searchModel.clusterName,queueName: this.searchModel.queueName,metrics: AllocatedMB,MaxShareMB,MinShareMB,startTime: this.searchModel.time[0],endTime: this.searchModel.time[1]}}, res {this.handleRes(res,内存情况)this.MemoryUsedChartOption.dataset.source res.data})},getPending() {this.$get({api: api/v2/manager/yarn/metric/getQueueMetricMaxValue,params: {clusterName: this.searchModel.clusterName,queueName: this.searchModel.queueName,metrics: PendingMB,PendingVCores,startTime: this.searchModel.time[0],endTime: this.searchModel.time[1]}}, res {this.handleRes(res,资源pending情况)this.PendingChartOption.dataset.source res.data})},getAPP() {this.$get({api: api/v2/manager/yarn/metric/getQueueMetricMaxValue,params: {clusterName: this.searchModel.clusterName,queueName: this.searchModel.queueName,metrics: MaxApps,AppsSubmitted,AppsRunning,AppsPending,AppsCompleted,AppsKilled,AppsFailed,startTime: this.searchModel.time[0],endTime: this.searchModel.time[1]}}, res {this.handleRes(res,APP情况)this.APPChartChartOption.dataset.source res.data})},getContainerUsed() {this.$get({api: api/v2/manager/yarn/metric/getQueueMetricMaxValue,params: {clusterName: this.searchModel.clusterName,queueName: this.searchModel.queueName,metrics: AllocatedContainers,PendingContainers,startTime: this.searchModel.time[0],endTime: this.searchModel.time[1]}}, res {this.handleRes(res,Container情况)this.ContainerUsedChartOption.dataset.source res.data})},handleQuery() {this.$refs.searchPane.validate(valid {if (valid) {// 几张图就几个请求this.getCPUUsed();this.getMemoryUsed();this.getPending();this.getAPP();this.getContainerUsed();}});},getQueue() {this.$get({api: api/v2/manager/yarn/monitor/listYarnQueue,params: {yarnCluster: this.searchModel.clusterName}}, res {this.searchOptions.queueName.children res.data.map(item {return {label: item, value: item}})})},},mounted() {},created() {this.$get({api: api/v2/manager/yarn/monitor/listYarnCluster}, res {this.searchOptions.clusterName.children res.data.map(item {return {label: item, value: item}})})this.CPUUsedChartOption.dataset.source [[metricDate, AllocatedVCores, MaxShareVCores, MinShareVCores],[2024-12-5, 50, 100, 1900],[2024-12-6, 50, 100, 1900],[2024-12-7, 50, 100, 1900],[2024-12-8, 50, 100, 1900],[2024-12-9, 50, 100, 1900],[2024-12-10, 50, 100, 1900]];this.MemoryUsedChartOption.dataset.source [[metricDate, AllocatedMB, MaxShareMB, MinShareMB],[2024-12-5, 50, 100, 1900],[2024-12-6, 50, 100, 1900],[2024-12-7, 50, 100, 1900],[2024-12-8, 50, 100, 1900],[2024-12-9, 50, 100, 1900],[2024-12-10, 50, 100, 1900]];this.APPChartChartOption.dataset.source [[metricDate, MaxApps, AppsSubmitted, AppsRunning, AppsPending, AppsCompleted, AppsKilled, AppsFailed],[2024-12-5, 2000, 100, 1900, 50, 200, 1600, 1],[2024-12-6, 2000, 100, 1900, 50, 200, 1600, 0],[2024-12-7, 2000, 100, 1900, 50, 200, 1700, 0],[2024-12-8, 2000, 100, 1900, 50, 200, 1800, 0],[2024-12-9, 2000, 100, 1900, 50, 200, 2200, 0],[2024-12-10, 2000, 100, 1900, 50, 200, 1800, 0]];this.PendingChartOption.dataset.source [[metricDate, PendingMB, PendingVCores],[2024-12-5, 50, 0],[2024-12-6, 50, 100],[2024-12-7, 0, 100],[2024-12-8, 10, 60],[2024-12-9, 50, 100],[2024-12-10, 0, 0]];this.ContainerUsedChartOption.dataset.source [[metricDate, AllocatedContainers, PendingContainers],[2024-12-5, 50, 100],[2024-12-6, 50, 100],[2024-12-7, 50, 100],[2024-12-8, 50, 10000],[2024-12-9, 50, 1000],[2024-12-10, 50, 100900]];},beforeDestroy() {}
};
/scriptstyle
.title {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */font-size: 20px;font-weight: bold;margin-top: 20px;
}
/style
