161 lines
4.8 KiB
Vue
161 lines
4.8 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-select v-model="settingItem.type" @change="switchChart($event,settingItem)">-->
|
|
<!-- <el-option-->
|
|
<!-- v-for="chartItem in [{value: 'line',label: '折线图'},{value: 'bar',label: '柱状图'}]"-->
|
|
<!-- :key="chartItem.value"-->
|
|
<!-- :label="chartItem.label"-->
|
|
<!-- :value="chartItem.value"-->
|
|
<!-- />-->
|
|
<!-- </el-select>-->
|
|
<!-- </div>-->
|
|
<div class="setting-item">
|
|
<span>显示标记: </span>
|
|
<el-switch active-text="是" inactive-text="否" v-model="settingItem.showSymbol"
|
|
@change="changeIsShowSymbol($event,settingItem)"/>
|
|
|
|
</div>
|
|
<div class="setting-item" v-if="settingItem.showSymbol===true">
|
|
<span>标记: </span>
|
|
<el-select v-model="settingItem.symbol" @change="switchSymbol($event,settingItem)">
|
|
<el-option
|
|
v-for="symbolItem in symbolList"
|
|
:key="symbolItem.value"
|
|
:label="symbolItem.label"
|
|
:value="symbolItem.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div class="setting-item" v-if="settingItem.showSymbol===true">
|
|
<span>标记大小: </span>
|
|
<el-input-number v-model="settingItem.symbolSize" :min="1" @change="changeSymbolSize($event,settingItem)"/>
|
|
</div>
|
|
<div class="setting-item">
|
|
<span>阴影模糊大小: </span>
|
|
<el-input-number v-model="settingItem.lineStyle.shadowBlur" :min="0" @change="changeShadowBlur($event,settingItem)"/>
|
|
</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: []
|
|
},
|
|
})
|
|
//图形标记列表
|
|
const symbolList = ref([
|
|
{value: 'none', label: '不显示标记'},
|
|
{value: 'circle', label: '圆形'},
|
|
{value: 'rect', label: '矩形'},
|
|
{value: 'triangle', label: '三角形'},
|
|
{value: 'diamond', label: '钻石形'},
|
|
{value: 'roundRect', label: '圆角矩形'},
|
|
{value: 'pin', label: '圆钉形'},
|
|
{value: 'arrow', label: '箭头形'},
|
|
])
|
|
let option = reactive(props.chartOption)
|
|
|
|
/**
|
|
* 封装基本设置修改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 'type':
|
|
return seriesItem.type = val
|
|
case 'showSymbol':
|
|
return seriesItem.showSymbol = val
|
|
case 'symbol':
|
|
return seriesItem.symbol = val
|
|
case 'symbolSize':
|
|
return seriesItem.symbolSize = val
|
|
case 'shadowBlur':
|
|
return seriesItem.lineStyle.shadowBlur = val
|
|
}
|
|
}
|
|
/**
|
|
* 基础设置:是否显示标记
|
|
* @param val 修改的标记大小
|
|
* @param item 修改的chart项
|
|
*/
|
|
const changeIsShowSymbol = (val, item) => {
|
|
changeSingleParams(item, 'showSymbol', val)
|
|
props.initCharts()
|
|
}
|
|
|
|
/**
|
|
* 基础设置:切换chart的形状
|
|
* @param val 修改的标记大小
|
|
* @param item 修改的chart项
|
|
*/
|
|
const switchChart = (val, item) => {
|
|
changeSingleParams(item, 'type', val)
|
|
props.initCharts()
|
|
}
|
|
/**
|
|
* 基础设置:修改标记
|
|
* @param val 修改的标记大小
|
|
* @param item 修改的chart项
|
|
*/
|
|
const switchSymbol = (val, item) => {
|
|
changeSingleParams(item, 'symbol', val)
|
|
props.initCharts()
|
|
}
|
|
/**
|
|
* 基础设置:修改标记大小
|
|
* @param val 修改的标记大小
|
|
* @param item 修改的chart项
|
|
*/
|
|
const changeSymbolSize = (val, item) => {
|
|
changeSingleParams(item, 'symbolSize', val)
|
|
props.initCharts()
|
|
}
|
|
|
|
/**
|
|
* 基础设置:修改图形阴影的模糊大小
|
|
* @param val 修改的阴影的模糊大小
|
|
* @param item 修改的chart项
|
|
*/
|
|
const changeShadowBlur = (val, item) => {
|
|
changeSingleParams(item, 'shadowBlur', val)
|
|
props.initCharts()
|
|
}
|
|
</script>
|