【echarts】动态滚动趋势图，解决坐标轴数据太多遮挡覆盖问题

写在前面

业务场景x轴的文字太多，会出现遮挡问题，想到文字倾斜展示，页面不美观，于是想到使用滚动条优化趋势图。
在这里插入图片描述

<template><div id="storeDown" style="height: 400px;width:100%"/>
</template><script>
// 引入 ECharts 主模块// var echarts = require('echarts/lib/echarts')
// 引入柱状图
import { round } from 'echarts/src/util/number'require('echarts/lib/chart/bar')
// 引入折线图
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title');
require('echarts/lib/component/toolbox')
require('echarts/lib/component/legend')
export default {name: 'StoreGoDownEcharts',props: {itemList: {type: Array,default: () => []},type: {type: String,default: () => ''},th: {type: String,default: () => ''}},data() {return {}},watch: {itemList: {handler(newData, oldData) {if (this.itemList.length > 0) {this.myCharts5()}}}},mounted() {this.loadata()},methods: {loadata() {this.myCharts5()},myCharts5() {const that = this// const that = thisvar x_data = that.itemList.map((item) => {return item.store_name})var serve = []var serve2 = []console.log(that.th)var cycle = this.th === '同比' ? '同期' : '上周'if (this.type === '销售额') {serve = that.itemList.map((item) => {return { value: round(item.sales / 10000, 2), Name: this.type, th_name: this.th, th: this.th === '同比' ? item.sales_tongbi : item.sales_huanbi }})serve2 = that.itemList.map((item) => {return this.th === '同比' ? round(item.l_sales / 10000, 2) : round(item.l_week_tongqi_sales / 10000, 2)})} else if (this.type === '毛利额') {serve = that.itemList.map((item) => {return { value: round(item.gross / 10000, 2), Name: this.type, th_name: this.th, th: this.th === '同比' ? item.gross_tongbi : item.gross_huanbi }})serve2 = that.itemList.map((item) => {return this.th === '同比' ? round(item.l_gross / 10000, 2) : round(item.l_week_tongqi_gross / 10000, 2)})}var barwidthData = ''if (serve.length < 4 && serve2.length < 4) {barwidthData = '10%'}var myChart = this.$echarts.init(document.getElementById('storeDown'))// that.myReize(myChart)var option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: function(params) {var store_name = params[0].namevar type_0 = params[1].data.Namevar th_name = params[1].data.th_namevar cycle = params[0].seriesNamevar value = ''var value2 = ''var value3 = ''if (params[1].value) {value = params[1].value + '万元'} else {value = ''}if (params[0].value) {value2 = params[0].value + '万元'} else {value2 = ''}if (params[1].data.th) {value3 = Math.abs(params[1].data.th) + '%'} else {value3 = ''}var htmlStr = ''htmlStr = '<span style="font-size: 20px;font-weight: bold;color: #FEFEFE;line-height: 20px;">' + store_name + '</span>' +'<br>' + '<span style="font-size: 16px;color: #FEFEFE;line-height: 22px;font-weight: bold; border-left:1px solid red ">&nbsp;&nbsp;' + type_0 + '</span>' +'<br>' + '<el-row style="display: flex;width: 200px"><el-col style="display: inline-block;width: 50%;">' + cycle + ':' + value2 + '</el-col>' + '<el-col style="display: inline-block;width: 50%;text-align: center">' + th_name + '<i class="el-icon-caret-bottom"></i></el-col></el-row>' +'<el-row style="display: flex;width: 200px"><span style="display: inline-block;width: 50%;">当日:' + value + '</span>' +'<span  style="display: inline-block;width: 50%;text-align: center">&nbsp;' + value3 + '</span></el-row>'return htmlStr}},xAxis: {type: 'category',data: x_data,triggerEvent: true,axisLabel: {interval: 0,rotate: -30,formatter: function(value) {if (value.length > 8) {value = value.substring(0, 7) + '..'return value} else {return value}}}},yAxis: {type: 'value',name: this.type + '(万元)'},legend: { data: [cycle, '当日'], top: '5px', right: '80px' },dataZoom: [{type: 'slider',show: true,start: 0,end: 40,handleSize: 8,yAxisIndex: null,width: '80%',height: '2%',bottom: '1',showDetail: false},{type: 'inside',start: 0,end: 100}],series: [{name: cycle,data: serve2,barWidth: barwidthData,type: 'bar',itemStyle: {color: '#42B983'}},{name: '当日',data: serve,barWidth: barwidthData,type: 'bar',itemStyle: {color: '#CEF7D4'}}]}myChart.setOption(option)window.addEventListener('resize', () => {myChart.resize()})that.extension(myChart)myChart.on('click', function(data) {// 添加点击事件})},extension(chart) {// 注意这里，是以X轴显示内容过长为例，如果是y轴的话，需要把params.componentType == 'xAxis'改为yAxis// 判断是否创建过div框,如果创建过就不再创建了// 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理var elementDiv = document.getElementById('extension')if (!elementDiv) {var div = document.createElement('div')div.setAttribute('id', 'extension')div.style.display = 'block'document.querySelector('html').appendChild(div)}chart.on('mouseover', function(params) {if (params.componentType == 'xAxis') {var elementDiv = document.querySelector('#extension')// 设置悬浮文本的位置以及样式var elementStyle ='position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'elementDiv.style.cssText = elementStyleelementDiv.innerHTML = params.valuedocument.querySelector('html').onmousemove = function(event) {var elementDiv = document.querySelector('#extension')var xx = event.pageX - 10var yy = event.pageY + 15console.log('22', xx)elementDiv.style.top = yy + 'px'elementDiv.style.left = xx + 'px'}}})chart.on('mouseout', function(params) {// 注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxisif (params.componentType == 'xAxis') {var elementDiv = document.querySelector('#extension')elementDiv.style.cssText = 'display:none'}})}}
}
</script><style scoped></style>