diff --git a/src/views/home/components/Echart/Echarts.vue b/src/views/home/components/Echart/Echarts.vue index 9947fe9..af7d72a 100644 --- a/src/views/home/components/Echart/Echarts.vue +++ b/src/views/home/components/Echart/Echarts.vue @@ -7,79 +7,96 @@ onMounted(() => { // 绘制图表 myChart.setOption({ // 标题 - grid: { - left: '4%', // 左边距 - right: '10%', // 右边距 - bottom: '20%', // 底边距 - top: '10%', // 顶部边距 - }, tooltip: { trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999', + }, + }, }, - legend: { - left: 'center', // 图例水平居中 - bottom: 0, // 图例距离容器顶部的距离 - orient: 'horizontal', // 水平布局 - itemWidth: 16, // 设置图例标识的宽度为0,即不显示图标 - itemHeight: 0, // 设置图例标识的高度为0,即不显示图标 - data: ['本月', '上月'], - }, - // grid: { - // left: '3%', - // right: '4%', - // bottom: '3%', - // containLabel: true - // }, toolbox: { feature: { - saveAsImage: {}, + dataView: { show: true, readOnly: false }, + magicType: { show: true, type: ['line', 'bar'] }, + restore: { show: true }, + saveAsImage: { show: true }, }, }, - xAxis: { - type: 'category', - boundaryGap: true, - data: [ - '09-01', - '09-03', - '09-05', - '09-07', - '09-09', - '09-11', - '09-13', - '09-15', - ], - }, - yAxis: { - type: 'value', + legend: { + data: ['本月', '上月'], }, + xAxis: [ + { + type: 'category', + data: [ + '09-01', + '09-03', + '09-05', + '09-07', + '09-09', + '09-11', + '09-13', + '09-15', + ], + axisPointer: { + type: 'shadow', + }, + }, + ], + yAxis: [ + { + type: 'value', + name: '浏览次数', + min: 0, + max: 200, + interval: 40, + axisLabel: { + formatter: '{value}', + }, + }, + { + type: 'value', + name: '', + min: 0, + max: 100, + interval: 20, + axisLabel: { + formatter: '{value}', + }, + }, + ], series: [ { name: '本月', - // itemStyle: { - // color: '#0052D9' - // }, - symbol: 'circle', - itemStyle: { - color: '#0052D9', // 设置圆的颜色为白色 - borderWidth: 1.5, // 设置圆边框的宽度 - borderColor: 'white', // 设置圆边框的颜色 + type: 'bar', + tooltip: { + valueFormatter: function (value) { + return (value as number) + ' 次' + }, }, - symbolSize: 8, // 设置图标大小 - type: 'line', - data: [20, 38, 60, 65, 90, 55, 36, 30], + data: [2, 4, 7, 23, 25, 76, 35, 62, 32, 20, 6, 3], }, { name: '上月', - symbol: 'circle', - itemStyle: { - color: '#B5C7FF', // 设置圆的颜色为白色 - borderWidth: 1.5, // 设置圆边框的宽度 - borderColor: 'white', // 设置圆边框的颜色 + type: 'bar', + tooltip: { + valueFormatter: function (value) { + return (value as number) + ' 次' + }, }, - symbolSize: 8, // 设置图标大小 + data: [2, 5, 9, 26, 28, 70, 75, 82, 48, 18, 6, 2], + }, + { type: 'line', - - data: [22, 25, 48, 70, 80, 45, 24, 38], + yAxisIndex: 1, + data: [2, 4, 7, 23, 25, 76, 35, 62, 32, 20, 6, 3], + }, + { + type: 'line', + yAxisIndex: 1, + data: [2, 5, 9, 26, 28, 70, 75, 82, 48, 18, 6, 2], }, ], }) diff --git a/src/views/home/components/Echarts.vue b/src/views/home/components/Echarts.vue index 33d7c2b..731afa9 100644 --- a/src/views/home/components/Echarts.vue +++ b/src/views/home/components/Echarts.vue @@ -1,10 +1,11 @@