Echart 格式相关总结

今天你码了吗

已于 2023-02-14 15:06:43 修改

阅读量560

点赞数 1

分类专栏： echarts 文章标签： javascript 前端开发语言

于 2022-12-24 12:06:00 首次发布

本文链接：https://blog.csdn.net/weixin_50249353/article/details/128426906

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Echarts修改图表样式，包括调整图表与标题间距、设置字体大小、管理副标题的位置和内容展示，以及处理文字内容超出时的提示。通过示例代码，展示了如何在鼠标悬停时显示完整内容，并解决了折线图坐标轴日期显示不全的问题。同时，针对扇形图比例差距大导致的小项不显示的问题，提出了解决方案。

摘要由CSDN通过智能技术生成

echarts修改样式

1、修改图相对于标题的距离

 grid: {
      bottom: 50,
      top:80,
      containLabel: true,
        },

有一个grid属性就是图标区域的位置修改这个值可以控制图的位置

2、修改图中的字体大小

tootip是这样修改的有个textStyle

 tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 14,
          },
        },

x y 轴是这样的

xAxis: {
          data: this.xAxisData,
          type: 'category',
          axisLabel: {
             textStyle: {
            fontSize: 14,
          },
          }, 
        },

subtext副标题

subtextStyle: {
          fontSize:14,
          width:800,
          overflow:'truncate', // 超出隐藏
           ellipsis:'...' // 超出部分用省略号表示
        }

3、修改副标题的位置

this.titleSet =[ {
        text: data.caption[0],
        left: 'center',
       
      },{subtext:data.caption[1], left:'center', top:20 , subtextStyle: {
          fontSize:14,
          width:800,
          overflow:'truncate',
           ellipsis:'...'
        },triggerEvent: true}
     ]

将标题和副标题放到两个对象里面分别设置位置参数

4、文字内容超出使用hover提示

这里使用的副标题内容太长hover提示其他部位道理一样

副标题超i出隐藏

subtextStyle: {
          fontSize:14,
          width:800,
          overflow:'truncate', // 超出隐藏
           ellipsis:'...' // 超出部分用省略号表示
        }

2、hover显示

extension(chart,data) {
      // 注意这里，是以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 == 'title' && data.caption[1].length > 100) {
          console.log(data.caption[1].length);
          var elementDiv = document.querySelector('#extension')
          //设置悬浮文本的位置以及样式
          var elementStyle =
            'position: absolute;z-index: 99999;color: black;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #ffff;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
          elementDiv.style.cssText = elementStyle
          elementDiv.innerHTML = data.caption[1]
          document.querySelector('html').onmousemove = function (event) {
            var elementDiv = document.querySelector('#extension')
            var xx = event.pageX - 10
            var yy = event.pageY + 15
            
            elementDiv.style.top = yy + 'px'
            elementDiv.style.left = xx + 'px'
          }
        }
      })
      chart.on('mouseout', function (params) {
        //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
        if (params.componentType == 'title') {
          var elementDiv = document.querySelector('#extension')

          elementDiv.style.cssText = 'display:none'
        }
      })
    },

调用

 this.extension(myChart,data)

还要设置

triggerEvent: true

X Y轴设置部位
在这里插入图片描述
我使用这个没生效，换了一种方式也可以

 axisLabel: {
       formatter: function(value) {
          let val = value.length > 3 ? value.substr(0, 3) + "..." : value;
          return val;
        },
  },

formatter 来自定义一下

5、折线图坐标轴显示完整首末日期

axisLabel: {

                showMinLabel: true,
                showMaxLabel: true,
             textStyle: {
            fontSize: 14,
          },

补充：折线图日期显示偶尔漏掉一个

 xAxis: {
              axisLabel: {
                interval: (window.innerWidth < 1550 &&  day == 30) ? 6 : window.innerWidth < 1550 &&  day == 7 ? 1 : 'auto',
                showMinLabel: true,
                showMaxLabel: true,
                textStyle: {
                  fontSize: 14,
                },
              },

设置interval 里面可以设置间隔数

6、扇形图比例差距大不显示问题

 series: [
            {
              name: i18n.t('home.Nstatistics'),
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: true,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: seriesData,
              minAngle: 1
            }
          ]

加上一个minAngle属性