Echarts常见问题及解决方法

最新推荐文章于 2025-04-09 21:08:55 发布

风和箫音

最新推荐文章于 2025-04-09 21:08:55 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/qq_34171923/article/details/87921457

版权

本文详细解析了ECharts图表配置的各项参数，包括如何隐藏x轴或y轴、刻度线和网格线，调整y轴显示为百分比，解决x轴显示不全的问题，自定义弹出框样式，以及调整图表在页面上的位置。此外，还介绍了如何使用工具栏功能，如数据视图、图表类型切换等。

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

(1)x轴或y轴隐藏
    "xAxis": [
      {
        "show" : false, //数轴及数值全都隐藏
        "type": "value",
        "name": "销量(kg)",
        "splitLine": {
          "show": false
        }
      }
    ]
    
    "axisLine":{       //只隐藏数轴
      "show":false
    },
    
    
    (2)刻度线 网络线隐藏
    "axisTick":{       //刻度线
      "show":false
    },
    
    "splitLine": {     //网格线
      "show": false
    }
    
    (3)y轴显示%
    yAxis: [
        {  
            type: 'value',  
            axisLabel: {  
                show: true,  
                interval: 'auto',  
                formatter: '{value} %'  
                },  
            show: true  
        }  
    ],
    
    (4)***** x轴显示不全问题 ****
    a. 设置x轴倾斜
    axisLabel: {  
       interval:0,  //x轴全部展示
       rotate:40      //倾斜度
    }  
    b. 字符分割
    axisLabel: {
        show: true,
        formatter: function(params) {
          let newParamsName = "";
          let paramsNameNumber = params.length;
          let provideNumber = 2; //一行显示几个字
          let rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            for (let p = 0; p < rowNumber; p++) {
              let tempStr = "";
              let start = p * provideNumber;
              let end = start + provideNumber;
              if (p == rowNumber - 1) {
                tempStr = params.substring(start, paramsNameNumber);
              } else {
                tempStr = params.substring(start, end) + "\n";
              }
              newParamsName += tempStr;
            }
          } else {
            newParamsName = params;
          }
          return newParamsName;
        }
      }
      
      (5)grid调整图形位置
         grid: {
            x: 80,  //左
            y: 60,  //上
            x2: 80, //右
            y2: 80  //下
        },
        
      (6)弹出框自定义
      tooltip: {
            trigger: 'item',
            formatter: function (params) {
                var color = params.color;//图例颜色
                var htmlStr ='<div>';
                htmlStr += params.name + '<br/>';//x轴的名称
                
                //为了保证和原来的效果一样，这里自己实现了一个点的效果
                htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
                
                //添加一个汉字，这里你可以格式你的数字或者自定义文本内容
                htmlStr += params.seriesName + '：'+params.value + '笔';
                
                htmlStr += '</div>';
                
                return htmlStr; 
            }
        },
        
        (7)工具栏
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        
            图片导出： var picBase64Info = myChart.getDataURL();