|
@@ -1,199 +1,202 @@
|
|
|
<template>
|
|
|
- <div id="barLine" ref="barLine" style="height: 400px;"></div>
|
|
|
-
|
|
|
+ <div ref="barLine" style="height: 400px;"></div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-import { onMounted, onBeforeUnmount, ref } from 'vue'
|
|
|
+<script setup>
|
|
|
+import {onMounted, onBeforeUnmount, ref} from 'vue'
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
|
-export default {
|
|
|
- props: ['barLineData'],
|
|
|
-
|
|
|
- setup(props) {
|
|
|
- let lineChart = ref()
|
|
|
+const props = defineProps({
|
|
|
+ barLineData: {type: Object}
|
|
|
+})
|
|
|
+let lineChart = ref()
|
|
|
+const barLine = ref()
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- lineChart = echarts.init(document.getElementById('barLine'))
|
|
|
- updateChart()
|
|
|
- window.addEventListener('resize', resizeChart) // 监听窗口大小变化,调整图表大小
|
|
|
- setTimeout(() => {
|
|
|
- resizeChart()
|
|
|
- },0)
|
|
|
- })
|
|
|
- onBeforeUnmount(() => {
|
|
|
- window.removeEventListener('resize', resizeChart) // 在组件销毁前移除事件监听,避免内存泄漏
|
|
|
- })
|
|
|
- // 获取图像数据 lieChartData
|
|
|
- let chartData = props.barLineData
|
|
|
+onMounted(() => {
|
|
|
+ lineChart = echarts.init(barLine.value)
|
|
|
+ updateChart()
|
|
|
+ addResize() // 监听窗口大小变化,调整图表大小
|
|
|
+ setTimeout(() => {
|
|
|
+ resizeChart()
|
|
|
+ }, 0)
|
|
|
+})
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ if (lineChart) {
|
|
|
+ lineChart.dispose()
|
|
|
+ lineChart = null
|
|
|
+ }
|
|
|
+ removeResize() // 在组件销毁前移除事件监听,避免内存泄漏
|
|
|
+})
|
|
|
+// 获取图像数据 lieChartData
|
|
|
+let chartData = props.barLineData
|
|
|
|
|
|
- function updateChart() {
|
|
|
- const option = {
|
|
|
- // title: {
|
|
|
- // text: chartData.title,
|
|
|
- // },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'cross',
|
|
|
- label: {
|
|
|
- backgroundColor: '#6a7985'
|
|
|
- }
|
|
|
- }
|
|
|
+function updateChart() {
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
|
|
|
+ // toolbox: {
|
|
|
+ // feature: {
|
|
|
+ // saveAsImage: { yAxisIndex: 'none' }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ grid: {
|
|
|
+ top: 50, right: 150, bottom: 30, left: 55,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: true,
|
|
|
+ data: chartData.xData,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: 'ACOS',
|
|
|
+ splitLine: {
|
|
|
+ show: true // 设置显示分割线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} 单位1'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '点击率',
|
|
|
+ position: 'right',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} 单位2'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ position: 'right',
|
|
|
+ offset: 80,
|
|
|
+ name: '订单数',
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
},
|
|
|
- // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
|
|
|
- // toolbox: {
|
|
|
- // feature: {
|
|
|
- // saveAsImage: { yAxisIndex: 'none' }
|
|
|
- // }
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} 单位3'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '柱状图',
|
|
|
+ type: 'bar',
|
|
|
+ // tooltip: {
|
|
|
+ // valueFormatter: function (value) {
|
|
|
+ // return value + ' ml';
|
|
|
+ // }
|
|
|
// },
|
|
|
- grid: {
|
|
|
- top: 50, right: 150, bottom: 30, left: 55,
|
|
|
-
|
|
|
+ barWidth: '30%',
|
|
|
+ data: chartData.barData,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {offset: 0, color: 'rgba(111, 209, 206, 0.8)'},
|
|
|
+ {offset: 1, color: 'rgba(111, 209, 206, 0.1)'},
|
|
|
+ ]),
|
|
|
+ //柱状图圆角
|
|
|
+ borderRadius: [15, 15, 0, 0],
|
|
|
},
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: true,
|
|
|
- data: chartData.xData,
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: 'ACOS',
|
|
|
- splitLine: {
|
|
|
- show: true // 设置显示分割线
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value} 单位1'
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: '点击率',
|
|
|
- position: 'right',
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value} 单位2'
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- position: 'right',
|
|
|
- offset: 80,
|
|
|
- name: '订单数',
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value} 单位3'
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '柱状图',
|
|
|
- type: 'bar',
|
|
|
- // tooltip: {
|
|
|
- // valueFormatter: function (value) {
|
|
|
- // return value + ' ml';
|
|
|
- // }
|
|
|
- // },
|
|
|
- barWidth: '30%',
|
|
|
- data: chartData.barData,
|
|
|
- yAxisIndex: 0,
|
|
|
- itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: 'rgba(111, 209, 206, 0.8)' },
|
|
|
- { offset: 1, color: 'rgba(111, 209, 206, 0.1)' },
|
|
|
- ]),
|
|
|
- //柱状图圆角
|
|
|
- borderRadius: [15, 15, 0, 0],
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '数据1',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: chartData.yData1,
|
|
|
- yAxisIndex: 1,
|
|
|
- lineStyle: { color: '#fe9a8b' },
|
|
|
- itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#fe9a8bb3' },
|
|
|
- { offset: 1, color: '#fe9a8b03' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '数据2',
|
|
|
- type: 'line',
|
|
|
- symbolSize: 6,
|
|
|
- symbol: 'circle',
|
|
|
- smooth: true,
|
|
|
- data: chartData.yData2,
|
|
|
- yAxisIndex: 2,
|
|
|
- lineStyle: { color: '#9E87FF' },
|
|
|
- itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#9E87FFb3' },
|
|
|
- { offset: 1, color: '#9E87FF03' },
|
|
|
- ]),
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- color: {
|
|
|
- type: 'radial',
|
|
|
- x: 0.5,
|
|
|
- y: 0.5,
|
|
|
- r: 0.5,
|
|
|
- colorStops: [
|
|
|
- { offset: 0, color: '#9E87FF' },
|
|
|
- { offset: 0.4, color: '#9E87FF' },
|
|
|
- { offset: 0.5, color: '#fff' },
|
|
|
- { offset: 0.7, color: '#fff' },
|
|
|
- { offset: 0.8, color: '#fff' },
|
|
|
- { offset: 1, color: '#fff' },
|
|
|
- ],
|
|
|
- },
|
|
|
- borderColor: '#9E87FF',
|
|
|
- borderWidth: 2,
|
|
|
- },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '数据1',
|
|
|
+ type: 'line',
|
|
|
+ symbolSize: 6,
|
|
|
+ symbol: 'circle',
|
|
|
+ smooth: true,
|
|
|
+ data: chartData.yData1,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ lineStyle: {color: '#fe9a8b'},
|
|
|
+ itemStyle: {color: '#fe9a8b', borderColor: '#fe9a8b'},
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {offset: 0, color: '#fe9a8bb3'},
|
|
|
+ {offset: 1, color: '#fe9a8b03'},
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '数据2',
|
|
|
+ type: 'line',
|
|
|
+ symbolSize: 6,
|
|
|
+ symbol: 'circle',
|
|
|
+ smooth: true,
|
|
|
+ data: chartData.yData2,
|
|
|
+ yAxisIndex: 2,
|
|
|
+ lineStyle: {color: '#9E87FF'},
|
|
|
+ itemStyle: {color: '#9E87FF', borderColor: '#9E87FF'},
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {offset: 0, color: '#9E87FFb3'},
|
|
|
+ {offset: 1, color: '#9E87FF03'},
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'radial',
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.5,
|
|
|
+ colorStops: [
|
|
|
+ {offset: 0, color: '#9E87FF'},
|
|
|
+ {offset: 0.4, color: '#9E87FF'},
|
|
|
+ {offset: 0.5, color: '#fff'},
|
|
|
+ {offset: 0.7, color: '#fff'},
|
|
|
+ {offset: 0.8, color: '#fff'},
|
|
|
+ {offset: 1, color: '#fff'},
|
|
|
+ ],
|
|
|
},
|
|
|
+ borderColor: '#9E87FF',
|
|
|
+ borderWidth: 2,
|
|
|
},
|
|
|
- ],
|
|
|
- }
|
|
|
- lineChart.setOption(option)
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ lineChart.setOption(option)
|
|
|
+}
|
|
|
|
|
|
- // 自适应调整窗口
|
|
|
- function resizeChart() {
|
|
|
- if (lineChart) {
|
|
|
- lineChart.resize()
|
|
|
- }
|
|
|
- }
|
|
|
+// 自适应调整窗口
|
|
|
+function resizeChart() {
|
|
|
+ if (lineChart) {
|
|
|
+ lineChart.resize()
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- return {resizeChart}
|
|
|
- },
|
|
|
+function addResize() {
|
|
|
+ window.addEventListener('resize', resizeChart)
|
|
|
+}
|
|
|
|
|
|
+function removeResize() {
|
|
|
+ window.removeEventListener('resize', resizeChart)
|
|
|
}
|
|
|
|
|
|
+defineExpose({resizeChart, updateChart})
|
|
|
|
|
|
</script>
|
|
|
|