init
This commit is contained in:
clay
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="6">
|
||||
<el-col :span="6">
|
||||
<el-select v-model="echartsValue" filterable placeholder="请选择图形状" style="width: 100%" size="large"
|
||||
@change="handleChangeEcharts">
|
||||
<el-option v-for="chartItem in chartType"
|
||||
:key="chartItem.value"
|
||||
:label="chartItem.label"
|
||||
:value="chartItem.value"/>
|
||||
</el-select>
|
||||
<!--左侧选项区域-->
|
||||
<charts-options @editValueFlag="editValueFlag" @editStartDataType="editStartDataType"
|
||||
:drag-options="ChartsItem" :chart-option="option" :init-charts="initChart"
|
||||
:x-axis-list="xValueAxis" :y-axis-list="yValueAxis"
|
||||
:current-chart="echartsValue" :radar-indicator="radarIndicator"/>
|
||||
</el-col>
|
||||
<!--X轴区域-->
|
||||
<el-col :span="9" v-if="echartsValue==='bar'||echartsValue==='line'">
|
||||
<axis-box :box-name="'X轴'" :drag-list="xValueAxis" :drag-options="ChartsItem" :x-axis-list="xValueAxis"
|
||||
:y-axis-list="yValueAxis" :flag="valueFlag"
|
||||
:start-data-type="startDataType" :chart-option="option" :init-charts="initChart"
|
||||
@getLineChartBasicSettingList="getLineChartBasicSettingList"
|
||||
@getBarChartBasicSettingList="getBarChartBasicSettingList" :current-chart="echartsValue"/>
|
||||
</el-col>
|
||||
<!--Y轴区域-->
|
||||
<el-col :span="9" v-if="echartsValue==='bar'||echartsValue==='line'">
|
||||
<axis-box :box-name="'Y轴'" :drag-list="yValueAxis" :drag-options="ChartsItem" :x-axis-list="xValueAxis"
|
||||
:y-axis-list="yValueAxis" :flag="valueFlag"
|
||||
:start-data-type="startDataType" :chart-option="option" :init-charts="initChart"
|
||||
@getLineChartBasicSettingList="getLineChartBasicSettingList"
|
||||
@getBarChartBasicSettingList="getBarChartBasicSettingList" :current-chart="echartsValue"/>
|
||||
</el-col>
|
||||
<el-col :span="9" v-if="echartsValue==='pie'">
|
||||
<pie-box :drag-list="xValueAxis" :init-charts="initChart" :chart-option="option"/>
|
||||
</el-col>
|
||||
<el-col :span="9" v-if="echartsValue==='radar'">
|
||||
<radar-box :drag-list="xValueAxis" :init-charts="initChart" :chart-option="option"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-button @click.stop="saveData">保存</el-button>
|
||||
<el-button v-if="echartsValue==='line'" @click.stop="openAdvancedSettings">高级设置</el-button>
|
||||
<el-row :gutter="6">
|
||||
<el-col :span="16">
|
||||
<div id="container" ref="chart" @click.stop></div>
|
||||
</el-col>
|
||||
<!--基础设置-->
|
||||
<el-col :span="8">
|
||||
<!-- 折线图基础设置-->
|
||||
<line-chart-basic-setting v-if="echartsValue==='line'" :basic-list="lineChartBasicSettingList"
|
||||
:init-charts="initChart"
|
||||
:chart-option="option"/>
|
||||
<!-- 柱状图基础设置-->
|
||||
<bar-chart-basic-setting v-if="echartsValue==='bar'" :basic-list="barChartBasicSettingList"
|
||||
:init-charts="initChart"
|
||||
:chart-option="option"/>
|
||||
<!-- 饼图基础设置-->
|
||||
<!-- <pie-chart-basic-setting v-if="echartsValue==='pie'"/>-->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--高级设置-->
|
||||
<!-- 折线图高级设置-->
|
||||
<line-chart-advanced-settings v-if="echartsValue==='line'" ref="advancedSettings" :init-charts="initChart"
|
||||
:chart-option="option"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import draggable from 'vuedraggable'
|
||||
import ChartsOptions from "./ChartsOptions.vue";
|
||||
import AxisBox from "./AxisBox.vue";
|
||||
import LineChartBasicSetting from "./lineChart/BasicSetting.vue";
|
||||
import LineChartAdvancedSettings from "./lineChart/AdvancedSettings.vue";
|
||||
import BarChartBasicSetting from "./barChart/BasicSetting.vue";
|
||||
// import PieChartBasicSetting from "./pieChart/BasicSetting.vue";
|
||||
import PieBox from "./pieChart/PieBox.vue";
|
||||
import RadarBox from "./radarChart/RadarBox.vue";
|
||||
// import BarChartAdvancedSettings from "./barChart/AdvancedSettings.vue";
|
||||
|
||||
const emit = defineEmits(["getFinalInfo"])
|
||||
const props = defineProps({
|
||||
info: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
lineData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
barData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
pieData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
radarData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
radarIndicator: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
//图形: 1:折线图 2.柱状图 3.饼图
|
||||
const chartType = reactive([
|
||||
{
|
||||
value: 'line',
|
||||
label: '折线图',
|
||||
},
|
||||
{
|
||||
value: 'bar',
|
||||
label: '柱状图',
|
||||
},
|
||||
{
|
||||
value: 'pie',
|
||||
label: '饼图',
|
||||
},
|
||||
{
|
||||
value: 'radar',
|
||||
label: '雷达图',
|
||||
}
|
||||
])
|
||||
//基础设置列表
|
||||
const lineChartBasicSettingList = ref([])
|
||||
const barChartBasicSettingList = ref([])
|
||||
const advancedSettings = ref()
|
||||
//获取父组件传来的初始数据
|
||||
const initInfo = reactive(props.info)
|
||||
//从左侧获取拖动的选项的数据类型
|
||||
const startDataType = ref()
|
||||
//标记从左侧拖动选项数据类型是否是value
|
||||
const valueFlag = ref(false)
|
||||
//简化代码
|
||||
let xValueAxis = reactive(initInfo.xValueAxis)
|
||||
let yValueAxis = reactive(initInfo.yValueAxis)
|
||||
const line_data = reactive(props.lineData)
|
||||
const bar_data = reactive(props.barData)
|
||||
const pie_data = reactive(props.pieData)
|
||||
const radar_data = reactive(props.radarData)
|
||||
let option = reactive(initInfo.echartsOptions)
|
||||
|
||||
//页面左上角select选择框绑定数据
|
||||
const echartsValue = ref('line')
|
||||
//可供拖动的选项列表
|
||||
const ChartsItem = ref([])
|
||||
//获取到container容器实例
|
||||
const chart = ref(null);
|
||||
//定义echarts实例
|
||||
let myEcharts = reactive({});
|
||||
onMounted(() => {
|
||||
if (ChartsItem.value.length === 0) {
|
||||
ChartsItem.value = line_data
|
||||
}
|
||||
//初始化echarts(不显示图)
|
||||
let selectLegend = {}
|
||||
ChartsItem.value.forEach(item => {
|
||||
if (item.dataType !== 'key') {
|
||||
selectLegend[item.label] = false
|
||||
}
|
||||
})
|
||||
option.legend.selected = selectLegend
|
||||
if (echartsValue.value === 'pie'||echartsValue.value === 'radar') {
|
||||
isShowAxisLine(false)
|
||||
} else {
|
||||
isShowAxisLine(true)
|
||||
}
|
||||
//加载echarts
|
||||
initChart();
|
||||
})
|
||||
|
||||
/**
|
||||
* 修改valueFlag
|
||||
* @param val 子组件传的动态值
|
||||
*/
|
||||
const editValueFlag = (val) => {
|
||||
valueFlag.value = val
|
||||
}
|
||||
/**
|
||||
* 修改startDataType
|
||||
* @param str 子组件传的动态值
|
||||
*/
|
||||
const editStartDataType = (str) => {
|
||||
startDataType.value = str
|
||||
}
|
||||
/**
|
||||
* 用于其他组件获取基础设置列表
|
||||
* @param str 子组件传的动态值
|
||||
*/
|
||||
const getLineChartBasicSettingList = (str) => {
|
||||
lineChartBasicSettingList.value = str
|
||||
}
|
||||
/**
|
||||
* 修改option
|
||||
* @param str 子组件传的动态值
|
||||
*/
|
||||
const getBarChartBasicSettingList = (str) => {
|
||||
barChartBasicSettingList.value = str
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 切换echarts图类型事件
|
||||
* @param e event事件
|
||||
*/
|
||||
const handleChangeEcharts = (e) => {
|
||||
if (xValueAxis.length !== 0 || yValueAxis.length !== 0) {
|
||||
|
||||
xValueAxis.map((item) => {
|
||||
ChartsItem.value.unshift(item)
|
||||
option.legend.selected[item.label] = false
|
||||
})
|
||||
xValueAxis.splice(0, xValueAxis.length)
|
||||
yValueAxis.map((item) => {
|
||||
ChartsItem.value.unshift(item)
|
||||
option.legend.selected[item.label] = false
|
||||
})
|
||||
yValueAxis.splice(0, yValueAxis.length)
|
||||
option.legend.data.splice(0, option.legend.data.length)
|
||||
option.series.splice(0, option.series.length)
|
||||
option.xAxis.name = ''
|
||||
option.xAxis.data = []
|
||||
option.xAxis.type = 'category'
|
||||
option.yAxis.name = ''
|
||||
option.yAxis.data = []
|
||||
option.yAxis.type = 'value'
|
||||
initChart()
|
||||
}
|
||||
echartsValue.value = e
|
||||
if (e === 'line') {
|
||||
ChartsItem.value = line_data
|
||||
isShowAxisLine(true)
|
||||
option.radar={}
|
||||
} else if (e === 'bar') {
|
||||
ChartsItem.value = bar_data
|
||||
isShowAxisLine(true)
|
||||
option.radar={}
|
||||
} else if (e === 'pie') {
|
||||
ChartsItem.value = pie_data
|
||||
isShowAxisLine(false)
|
||||
option.radar={}
|
||||
}else if (e === 'radar') {
|
||||
ChartsItem.value = radar_data
|
||||
isShowAxisLine(false)
|
||||
option.radar.indicator = props.radarIndicator
|
||||
}
|
||||
let selectLegend = {}
|
||||
ChartsItem.value.forEach(item => {
|
||||
if (item.dataType !== 'key') {
|
||||
selectLegend[item.label] = false
|
||||
}
|
||||
})
|
||||
option.legend.selected = selectLegend
|
||||
initChart()
|
||||
}
|
||||
/**
|
||||
* 是否显示x/y轴线
|
||||
* @param type
|
||||
*/
|
||||
const isShowAxisLine = (type) => {
|
||||
option.xAxis.axisLine.show = type
|
||||
option.yAxis.axisLine.show = type
|
||||
if (type === false) {
|
||||
option.tooltip.trigger = 'item'
|
||||
} else {
|
||||
option.tooltip.trigger = 'axis'
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 初始化echarts实例方法
|
||||
*/
|
||||
const initChart = () => {
|
||||
console.log('initChartoption', option)
|
||||
//3.初始化container容器
|
||||
myEcharts = echarts.init(chart.value);
|
||||
//5.传入数据
|
||||
myEcharts.setOption(option,true);
|
||||
//图表大小自适应窗口大小变化
|
||||
window.onresize = () => {
|
||||
myEcharts.resize();
|
||||
}
|
||||
//点击事件
|
||||
// myEcharts.on('click', function (params) {
|
||||
// console.log('dddd点击事件', params);
|
||||
// });
|
||||
// myEcharts.restore();
|
||||
localStorage.removeItem('dragType')
|
||||
}
|
||||
/**
|
||||
* 保存数据
|
||||
*/
|
||||
const saveData = () => {
|
||||
console.log('最终initInfo', initInfo)
|
||||
emit("getFinalInfo", initInfo)
|
||||
}
|
||||
/**
|
||||
* 打开高级设置弹框
|
||||
*/
|
||||
const openAdvancedSettings = () => {
|
||||
advancedSettings.value.showDrawer()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user