菜单 搜索
首页 前端知识 遇到的各种echarts属性—难找：写一篇博客长期记录

遇到的各种echarts属性—难找：写一篇博客长期记录

2024-08-12 10:08:29 前端知识 前端哥 425 368 我要收藏

第一部分：echarts柱状图 调节柱子间间距

以 官网图为例：

 

 第二部分：折线图-点击legend,折线图宽度会发生改变

造成后果：Y轴显示不全

  • 设定grid下的containLabel值为true即可
  • 官方文档的解释是这样的

containLabel 为 false 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。
containLabel 为 true 的时候：
grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件

修改前的效果：左侧紧凑，下方显示不全

 修改后的效果： 

第三部分：柱状图上方显示数值

代码如下


itemStyle: {
   normal: {
     label: {
        show: true, //开启显示
        position: 'top', //在上方显示
        textStyle: {
        //数值样式
            color: 'black',
            fontSize: 12,
          },
       },
     },
  },

第四部分：提示框组件样式调整

tooltip: {
     backgroundColor: '#fff',
     borderColor: '#ddd',
     textStyle: { 'color': '#666' },
     color: ['#9799f3', '#0fd0b7', '#ffd351', '#6ebffb', '#f56b6d','#40c057','#6a89e2', '#ff8e43'],
     // 自定义添加单位
     formatter: function(params) {
        var relVal = params[0].name
        for (var i = 0, l = params.length; i < l; i++) {
         relVal += '<br/>' + params[i].marker + params[i].seriesName + ' &nbsp;&nbsp;' + params[i].value + '%'
         }
         return relVal
       }
       // valueFormatter: (value) => value + '%'  //直接加单位

       }

第五部分：环形图基础样式调整

option1: {
        tooltip: {
        bgColor: '#fff', //背景色
        formatter: '{b}: {c}个'
        },

        toolbox: {
              show: false
        },
        series: [
            {
             label: { show: true, formatter: '{b}:{d}%' },
             radius: ['20%', '35%'],
             center: ['50%', '50%']
            }
         ]
      },

 饼图与圆环图radius

 代码如下

series: [
    {
      radius: '50%',
      label: {
          fontSize: 20,
          show: true,
          formatter: '{b}:{d}%'
             }
       // radius: ['20%', '35%']
       // center: ['60%', '50%']
      }
  ]

 饼图label样式自定义设置

 代码如下

label: {
      fontSize: 14,
      formatter: function(param) {
         let text = param.data.name;
        if (text.length < 15) {
            return (
                   text +'\n' + param.data.value +'个' +'(' +param.percent +'%)');
         } else {
              return (
                  text.substring(0, 15) + '...' +'\n' + param.data.value +'个' +'(' +param.percent +'%)'
                   );
               }
          }
       }

饼图图例属性legend,工具栏属性toolbox

  代码如下

legend: {
        top: '1%',
        left: 'center',
        show: true,
        textStyle: { color: '#fff', fontSize: 20 }
      },

 第六部分：柱状图字体变大

图例变大

 代码如下

legend: {
   top: 10,
   itemWidth: 24,
   itemHeight: 24,
   icon: 'rect',
   left: 'center',
   padding: 0,
  
   textStyle: { color: '#fff', fontSize: 32, padding: [2, 0, 0, 0] },
   selectedMode: true,
   data: null
 },

样式调整：图例提示显示省略号

 

 代码如下

 legend: {
     top: '7%',
     formatter(name) {
     // const maxLen = 3
     // if (name.length > maxLen) {
     //   return name.substr(0, 3) + '...'
     // }
          return echarts.format.truncateText(name, 40, '12px Microsoft Yahei', '…')
     },
     tooltip: {
          show: true
     }
  },

 

X轴坐标字体大小

xAxis: {
   nameTextStyle: { color: '#fff', padding: [0, 0, -10, 0], fontSize: 16 },
   axisLabel: { color: '#fff', fontSize: 32 },
   axisTick: { show: false },
   splitLine: { show: false },
   axisLine: { lineStyle: { color: '#6785a3', width: 1 }, show: true },
   type: 'category',
   data: ['2022-10-30', '2022-10-29', '2022-10-28', '2022-10-27', '2022-10-26']
 },

y轴坐标字体变大

yAxis: {
   nameTextStyle: { padding: [0, 20, 2, 0] },
   axisLabel: { color: '#fff', fontSize: 16 },
   axisTick: { show: false },
   splitLine: {
     show: true,
     lineStyle: { color: '#6785a3', width: 1, type: 'dashed' }
   },
   axisLine: { show: false },
   type: 'value',
   name: ''
 },

提示框字体变大

 tooltip: {
    backgroundColor: 'rgba(2, 115, 194, 0.8)',
    borderColor: '#0bb2ff',
    textStyle: { color: '#fff',fontSize:32 },
    trigger: 'axis'
  }

y轴上单位间距与字体样式调整

yAxis: [
    {
      name: '单位：条',
      nameTextStyle: { fontSize: 32, padding: [0, 0, 30, 0] },
      axisLabel: { color: '#fff', fontSize: 32 },
      splitLine: { show: false }
    },
    // {
    //   name: '单位：条',
    //   nameTextStyle: { fontSize: 32, padding: [0, 0, 30, 0] },
    //   axisLabel: { color: '#fff', fontSize: 32 },
    //   splitLine: { show: false },
    // }
  ],

 柱状图双y轴

第一步：新增y轴

 代码入戏

 yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      // type: 'value',
      // name: 'Temperature',
      // //min: 0,
      // //max: 25,
      // //interval: 5, //间距
      // axisLabel: {
      //   formatter: '{value} °C'
      // }
    }
  ],

第二步：设置series折线数据对齐y轴右侧展示

 代码如下

series: [
    {
      name: 'Precipitation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]

echarts图形距离边框距离

 

 代码如下

grid: {
     top: '3%',
     left: '1%',
     right: '1%',
     bottom: '1%',
     containLabel: true
  },

第七部分：自定义图例 ：在methods中设置处理图例的函数

 函数如下

legend: {
     top: '1%',
     left: 'center',
     show: true,
     textStyle: { color: '#fff', fontSize: 20 },
     formatter: function(name) {
          return 'Legend ' + name; //在methods设置处理数据的函数
     }
},

第八部分：y轴属性分析

第一部分：隐藏y轴

 代码如下

yAxis: {
   show: true,
   axisLine: {
      show: false
    },
 },

 第二部分：y轴分割线样式调整

 代码如下

yAxis: [
         {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', // 分割线的类型：点阵：dotted，虚线dashed，直线solid
              color: 'rgba(255, 255, 255,0.1)'
            }
          }
       }],
转载请注明出处或者链接地址：https://www.qianduange.cn//article/15392.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

基于微信小程序的高校宿舍管理系统

2024-08-20 09:08:59

HTML5 地理定位

2024-08-20 09:08:58

HTML5和css样式精灵图和字体图标的使用

2024-08-20 09:08:57

解决窗口滚动条消失而导致的页面内容抖动的问题

2024-08-20 09:08:57

Vue2从基础到实战（指令篇）

2024-08-20 09:08:51

HTML5 的真相（一）

2024-08-20 09:08:31

基于vue elementPlus的动态导航标签栏-tabs

2024-08-20 09:08:28

使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)

2024-05-28 09:05:34

HTML学习：前端实现文字滚动效果（附视频教程）_html文字轮播代码(4)

2024-08-20 09:08:52

web期末作业设计网页/web前端开发期末大作业/html css网页制作成品(第41-50套/总计100套)欣赏

2024-08-20 09:08:39

大家推荐的文章
1

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
2

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
3

npm的使用

2024-08-18 00:08:131000
4

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
5

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
6

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
7

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
8

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
9

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
10

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！