|
|
@@ -1,196 +1,127 @@
|
|
|
<template>
|
|
|
- <div :style="{ padding: '0' }">
|
|
|
- <div ref="area" style="width: 100%; height: 350px"></div>
|
|
|
- </div>
|
|
|
+ <div ref="chartRef" :style="{ height, width }"></div>
|
|
|
</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { defineComponent, PropType, ref, Ref, onMounted, watch } from 'vue';
|
|
|
|
|
|
-<script>
|
|
|
-import * as echarts from 'echarts'
|
|
|
-export default {
|
|
|
- name:"areaChart",
|
|
|
- props:{
|
|
|
- dataSource:{
|
|
|
- default:{
|
|
|
- x:[],
|
|
|
- pv:[],
|
|
|
- uv:[],
|
|
|
- enquiry: []
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- myChart: null,
|
|
|
- }
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- this.drawChart()
|
|
|
-
|
|
|
- },
|
|
|
+ import { useECharts } from '/@/hooks/web/useECharts';
|
|
|
|
|
|
- watch:{
|
|
|
- dataSource:{
|
|
|
- handler:function (n,o){
|
|
|
- this.drawChart()
|
|
|
+ export default defineComponent({
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: String as PropType<string>,
|
|
|
+ default: '100%',
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String as PropType<string>,
|
|
|
+ default: '350px',
|
|
|
},
|
|
|
- deep:true
|
|
|
+ dataSource:{
|
|
|
+ default:{
|
|
|
+ x:[],
|
|
|
+ pv:[],
|
|
|
+ uv:[],
|
|
|
+ enquiry: []
|
|
|
+ }
|
|
|
},
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const chartRef = ref<HTMLDivElement | null>(null);
|
|
|
+ const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
|
|
|
|
|
|
- },
|
|
|
-
|
|
|
- methods:{
|
|
|
- drawChart() {
|
|
|
- let that = this
|
|
|
- // 基于准备好的dom，初始化echarts实例 这个和上面的main对应
|
|
|
- that.myChart = echarts.init(that.$refs.area);
|
|
|
- // 指定图表的配置项和数据
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'cross',
|
|
|
- label: {
|
|
|
- backgroundColor: '#6a7985'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- grid: {
|
|
|
- left: '20px',
|
|
|
- right: '40px',
|
|
|
- bottom: '0',
|
|
|
- top:'40px',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
+ const updateChart = () => {
|
|
|
+ setOptions({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'line',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ backgroundColor: '#333',
|
|
|
+ },
|
|
|
},
|
|
|
- data: this.dataSource.x
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value'
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'UV',
|
|
|
- type: 'line',
|
|
|
- stack: 'UV',
|
|
|
- symbol: 'circle', //设定为实心点
|
|
|
- symbolSize: 6, //设定实心点的大小
|
|
|
- color:"#53A2D3", //设定实线点的颜色
|
|
|
- // areaStyle: {
|
|
|
- // color:{
|
|
|
- // type: 'linear',
|
|
|
- // x: 0,
|
|
|
- // y: 0,
|
|
|
- // x2: 0,
|
|
|
- // y2: 1,
|
|
|
- // colorStops: [{
|
|
|
- // offset: 0, color: '#53A2D3' // 0% 处的颜色
|
|
|
- // }, {
|
|
|
- // offset: 1, color: '#fff' // 100% 处的颜色
|
|
|
- // }],
|
|
|
- //
|
|
|
- // }
|
|
|
- // },
|
|
|
- emphasis: {
|
|
|
- focus: 'series'
|
|
|
- },
|
|
|
- smooth:false,
|
|
|
- lineStyle:{
|
|
|
- color:'#53A2D3',
|
|
|
- width:2
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['访客数(UV)', '浏览量(PV)', '询盘数(EN)'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#ccc',
|
|
|
},
|
|
|
- data: this.dataSource.uv
|
|
|
},
|
|
|
- {
|
|
|
- name: 'PV',
|
|
|
- type: 'line',
|
|
|
- symbol: 'circle', //设定为实心点
|
|
|
- symbolSize: 6, //设定实心点的大小
|
|
|
- color:"#FF951A", //设定实线点的颜色
|
|
|
- stack: 'PV',
|
|
|
- // areaStyle: {
|
|
|
- // color:{
|
|
|
- // type: 'linear',
|
|
|
- // x: 0,
|
|
|
- // y: 0,
|
|
|
- // x2: 0,
|
|
|
- // y2: 1,
|
|
|
- // colorStops: [{
|
|
|
- // offset: 0, color: '#FF951A' // 0% 处的颜色
|
|
|
- // }, {
|
|
|
- // offset: 1, color: '#fff' // 100% 处的颜色
|
|
|
- // }],
|
|
|
- // }
|
|
|
- // },
|
|
|
- emphasis: {
|
|
|
- focus: 'series'
|
|
|
+ xAxis: {
|
|
|
+ data: props.dataSource.x,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ccc',
|
|
|
+ },
|
|
|
},
|
|
|
- smooth:false,
|
|
|
- lineStyle:{
|
|
|
- color:'#FF951A',
|
|
|
- width:2
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ splitLine: { show: true },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ccc',
|
|
|
+ },
|
|
|
},
|
|
|
- data: this.dataSource.pv
|
|
|
},
|
|
|
- {
|
|
|
- name: '询盘数',
|
|
|
- type: 'line',
|
|
|
- symbol: 'circle', //设定为实心点
|
|
|
- symbolSize: 6, //设定实心点的大小
|
|
|
- color:"#399C5C", //设定实线点的颜色
|
|
|
- stack: 'enquiry',
|
|
|
- // areaStyle: {
|
|
|
- // color:{
|
|
|
- // type: 'linear',
|
|
|
- // x: 0,
|
|
|
- // y: 0,
|
|
|
- // x2: 0,
|
|
|
- // y2: 1,
|
|
|
- // colorStops: [{
|
|
|
- // offset: 0, color: '#399C5C' // 0% 处的颜色
|
|
|
- // }, {
|
|
|
- // offset: 1, color: '#fff' // 100% 处的颜色
|
|
|
- // }],
|
|
|
- // }
|
|
|
- // },
|
|
|
- emphasis: {
|
|
|
- focus: 'series'
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '访客数(UV)',
|
|
|
+ type: 'line',
|
|
|
+ smooth: false,
|
|
|
+ symbol: 'circle',
|
|
|
+ showAllSymbol: 'auto',
|
|
|
+ symbolSize: 6,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#53A2D3',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#53A2D3',
|
|
|
+ },
|
|
|
+ data: props.dataSource.pv,
|
|
|
},
|
|
|
- smooth:false,
|
|
|
- lineStyle:{
|
|
|
- color:'#399C5C',
|
|
|
- width:2
|
|
|
+ {
|
|
|
+ name: '浏览量(PV)',
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 6,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#FF951A',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#FF951A',
|
|
|
+ },
|
|
|
+ data: props.dataSource.uv,
|
|
|
},
|
|
|
- data: this.dataSource.enquiry
|
|
|
- }
|
|
|
- ]
|
|
|
+ {
|
|
|
+ name: '询盘数(EN)',
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'circle',
|
|
|
+ z: -12,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#399C5C',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#399C5C',
|
|
|
+ },
|
|
|
+ data: props.dataSource.enquiry,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ });
|
|
|
};
|
|
|
- // 使用刚指定的配置项和数据显示图表。
|
|
|
- that.myChart.setOption(option);
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- that.myChart.resize();
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- beforeDestroy() {
|
|
|
- window.removeEventListener("resize", () => {
|
|
|
- this.myChart.resize();
|
|
|
- });
|
|
|
- },
|
|
|
|
|
|
-};
|
|
|
-</script>
|
|
|
+ watch(
|
|
|
+ () => props.dataSource,
|
|
|
+ () => {
|
|
|
+ updateChart();
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+ );
|
|
|
|
|
|
-<style scoped>
|
|
|
+ onMounted(() => {
|
|
|
+ updateChart();
|
|
|
+ });
|
|
|
|
|
|
-</style>
|
|
|
+ return { chartRef };
|
|
|
+ },
|
|
|
+ });
|
|
|
+</script>
|
zq940222