盒须图组件封装

<echart-boxplot v-else-if="domain.dqRender == 'Boxplot'" ref="idx_cmpt" :conf="domain.indexSchdmCnfs" :data="data" :theme="echartsTheme" :data-view="dataView" /> import EchartBoxplot from '@/components/Render/Boxplot' export default { name: 'CmptIndex', components: { EchartBoxplot }, // 工具栏支持 toolBar: { Boxplot: ['fullScreen', 'dataView'] } <!-- 盒须图 --><template> <div style="height: 100%;width: 100%;"> <span v-if="data.length == 0" style="font-size: 20px;color: rgb(65, 179, 242);position: absolute; top: 50%; transform: translateY(-50%); left: 50%; transform: translateX(-50%);"> 暂无数据 </span> <v-chart v-if="data.length != 0" v-show="!dataView" ref="test" :options="boxplotOption" :theme="theme" autoresize /> <data-view v-show="dataView" :data="data" :columns="columns" /> </div></template><script> import DataView from '../View/index'; import EchartsTool from 'echarts/extension/dataTool' export default { name: 'Boxplot', components: { DataView }, watch: { // 数据变化监听 'data'() { this.buildBoxplot() } }, props: { // 组件配置 conf: { type: Array, required: true }, // 组件数据 data: { type: Array, required: true }, // 皮肤 theme: { type: String, default: '' }, // 数据视图 dataView: { type: Boolean, default: false } }, data() { return { // 盒须图属性 boxplotOption: {}, // 配置项 boxplotConf: { xboxplotVal: 'xAxisBoxplot' // 盒须图x轴名称及数值 }, // 数据列 columns: [], // 数据视图数据 dataViewData: [] } }, methods: { // 必须配置项检查 requiredCheck() { let { xboxplotVal } = this.boxplotConf return !_.isEmpty(_.find(this.conf, { cnfCode: xboxplotVal })) }, // 构建盒须图属性 buildBoxplot() { console.log('this.data', this.data) console.log('this.conf', this.conf) // 参数检查 if (this.requiredCheck()) { // 配置编码 let { xboxplotVal } = this.boxplotConf // 配置项获取 let cnfYkeyList = _.map(_.filter(this.conf, { cnfCode: xboxplotVal }), item => { return item.cnfValue }) let arr = [] _.map(cnfYkeyList, item => { arr.push(_.map(this.data, val => { return val[item] })) }) console.log('arr', arr) debugger // var data = EchartsTool.prepareBoxplotData(arr) // 数据视图列 this.columns = [...cnfYkeyList] // 盒须图配置 this.boxplotOption = { tooltip: { trigger: 'item' }, xAxis: { type: 'category', // data: data.axisData data: cnfYkeyList }, yAxis: { type: 'value' }, series: [ { name: 'boxplot', type: 'boxplot', data: data.boxData, tooltip: { formatter: function (param) { return [ param.name + ': ', '上限: ' + param.data[5], '上四分位数Q3: ' + param.data[4], '中位数Q2: ' + param.data[3], '下四分位数Q1: ' + param.data[2], '下限: ' + param.data[1] ].join('<br/>'); } } }, { name: '异常值', type: 'scatter', data: data.outliers } ] } } else { this.$message({ message: '盒须图关键配置项缺失导致无法渲染，请联系相关运维人员。', type: 'error' }) } } } }</script>