308 lines
9.2 KiB
Vue
308 lines
9.2 KiB
Vue
<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>
|
|
|