折线图适配X轴坐标Title旋转程度

小心漂亮女人呀

已于 2022-01-26 09:17:48 修改

阅读量835

点赞数

分类专栏： JS echarts 文章标签： echarts javascript vue.js

于 2022-01-25 15:18:44 首次发布

本文链接：https://blog.youkuaiyun.com/m0_49004429/article/details/122685940

版权

JS 同时被 2 个专栏收录

8 篇文章

订阅专栏

echarts

4 篇文章

订阅专栏

本文详细介绍了使用ECharts配置一个动态折线图的过程，包括如何根据屏幕宽度调整X轴标签的倾斜角度、设置图例、工具提示、网格布局、X轴和Y轴的配置以及数据系列的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 let isRotate = document.body.scrollWidth <= 350 ? "-20" : 0; // 获取屏幕宽度 
        var chartDom = document.getElementById('lineAvg');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            legend: {
                data: ['总均价'],
                x: 'center',
                top: "5%"
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                right: "7%",
                left: "15%"
            },
            xAxis: {
                type: 'category',
                data: res.bizDate,
                axisLabel: {// X轴title倾斜
                    interval: 0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
                    rotate: isRotate    //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
                }
            },
            yAxis: {
                type: 'value',
                scale: true,
                // min: (value) => {
                //     return value.min > 10 ? 10 : 0;
                // }
            },
            series: [
                {
                    name: "总均价",
                    data: res.sumAvgPrice,
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#73c0de'
                    },
                    itemStyle: {
                        normal: {
                            color: '#73c0de'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);