141 lines
4.2 KiB
Vue
141 lines
4.2 KiB
Vue
<template>
|
|
<el-scrollbar height="450px">
|
|
<div class="basic-setup" @click.stop>
|
|
柱状图基本设置
|
|
</div>
|
|
<div v-for="(settingItem) in basicList" class="setting" @click.stop>
|
|
<div class="setting-title">{{ settingItem.label }}</div>
|
|
<div class="setting-item">
|
|
<span>显示柱条背景: </span>
|
|
<el-switch active-text="是" inactive-text="否" v-model="settingItem.showBackground"
|
|
@change="changeIsShowBackground($event,settingItem)"/>
|
|
|
|
</div>
|
|
<div v-if="settingItem.showBackground!==false">
|
|
<div class="setting-item">
|
|
<span>柱条描边宽度: </span>
|
|
<el-input-number v-model="settingItem.backgroundStyle.borderWidth" :min="0"
|
|
@change="changeBorderWidth($event,settingItem)"/>
|
|
</div>
|
|
|
|
<!-- <div class="setting-item" v-if="settingItem.backgroundStyle.borderWidth!==0">-->
|
|
<!-- <span>柱条描边颜色: </span>-->
|
|
<!-- <el-color-picker v-model="settingItem.backgroundStyle.borderColor"-->
|
|
<!-- :color="settingItem.backgroundStyle.borderColor"-->
|
|
<!-- @change="changeBorderColor($event,settingItem)"/>-->
|
|
<!-- </div>-->
|
|
<div class="setting-item" v-if="settingItem.backgroundStyle.borderWidth!==0">
|
|
<span>柱条描边类型: </span>
|
|
<el-select v-model="settingItem.backgroundStyle.borderType" @change="switchBorderType($event,settingItem)">
|
|
<el-option
|
|
v-for="symbolItem in borderTypeList"
|
|
:key="symbolItem.value"
|
|
:label="symbolItem.label"
|
|
:value="symbolItem.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
//基础设置列表
|
|
basicList: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
//初始化加载echarts函数
|
|
initCharts: {
|
|
type: Function,
|
|
default: null
|
|
},
|
|
//echarts的配置属性
|
|
chartOption: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
})
|
|
let option = reactive(props.chartOption)
|
|
//图形标记列表
|
|
const borderTypeList = ref([
|
|
{value: 'solid', label: '实线'},
|
|
{value: 'dashed', label: '虚线'},
|
|
{value: 'dotted', label: '点线'}
|
|
])
|
|
/**
|
|
* 封装基本设置修改echarts属性事件
|
|
* @param item 修改的项
|
|
* @param type option.series中的属性名
|
|
* @param val 获取修改的值
|
|
*/
|
|
const changeSingleParams = (item, type, val) => {
|
|
option.series.forEach((sItem, sIndex) => {
|
|
if (sItem.name === item.label) {
|
|
getSeriesParams(type, sIndex, val)
|
|
}
|
|
})
|
|
}
|
|
/**
|
|
* 根据changeSingleParams方法传的动态type,封装数据修改事件
|
|
* @param type option.series中的属性名
|
|
* @param index 修改某项属性的下标
|
|
* @param val 获取修改的值
|
|
*/
|
|
const getSeriesParams = (type, index, val) => {
|
|
let seriesItem = option.series[index]
|
|
switch (type) {
|
|
case 'showBackground':
|
|
return seriesItem.showBackground = val
|
|
case 'color':
|
|
return seriesItem.backgroundStyle.color = val
|
|
case 'borderWidth':
|
|
return seriesItem.backgroundStyle.borderWidth = val
|
|
case 'borderColor':
|
|
return seriesItem.backgroundStyle.borderColor = val
|
|
case 'borderType':
|
|
return seriesItem.backgroundStyle.borderType = val
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 基础设置:修改是否显示柱条背景
|
|
* @param val 是否显示
|
|
* @param item 修改的chart项
|
|
*/
|
|
const changeIsShowBackground = (val, item) => {
|
|
changeSingleParams(item, 'showBackground', val)
|
|
props.initCharts()
|
|
}
|
|
|
|
/**
|
|
* 基础设置:修改柱条描边宽度
|
|
* @param val 宽度
|
|
* @param item 修改的chart项
|
|
*/
|
|
const changeBorderWidth = (val, item) => {
|
|
changeSingleParams(item, 'borderWidth', val)
|
|
props.initCharts()
|
|
}
|
|
/**
|
|
* 基础设置:修改柱条的描边颜色
|
|
* @param val 颜色
|
|
* @param item 修改的chart项
|
|
*/
|
|
const changeBorderColor = (val, item) => {
|
|
changeSingleParams(item, 'borderColor', val)
|
|
props.initCharts()
|
|
}
|
|
/**
|
|
* 基础设置:修改柱条的描边类型
|
|
* @param val 类型
|
|
* @param item 修改的chart项
|
|
*/
|
|
const switchBorderType = (val, item) => {
|
|
changeSingleParams(item, 'borderType', val)
|
|
props.initCharts()
|
|
}
|
|
</script>
|