echarts 关于折线统计图常用的属性设置--超详细（附加源码）

news2025/1/12 23:05:31

文章目录

折线统计图
- 设置x轴字体大小及字体颜色
- 设置y轴字体大小及字体颜色
- 设置背景颜色及设置折线颜色
- 设置折线效果图显示阴影
- 折线图位置及标签位置
- 设置鼠标悬浮折线弹出窗口显示对应的数据
- 设置自动横向滚动
总结

大家好！近期我会分享几篇关于echarts方面的技术点，项目经理这边给我安排了去做可视化数据大屏，在做的过程中的呢遇到了很多问题，怎么说呢，因为我是前端后端都做吗，有时写一段时间的后端，在回过头来做大屏，有些属性的设置等等，就忘了。。。这次我长了个记性，一定要把这次遇到的问题都记录下来。
一方面是为了加深自己的影响，在下一次做的时候，遇到问题可以翻出来看看，另一方面，如果你也遇到了和我同样的问题，不妨来看一下我的解决方案吧，希望可以帮助到你。
下面我来以源码+解决问题逻辑，一同分享给大家！

本篇文章主要是围绕echarts中的折线统计图，根据实际应用场景去做一些属性的调整，后期我会把echarts的3D地图、地图、扇形统计图、无限循环轮播列表、可视化大屏构建等，会一一的在我博文中分享出来，如果你遇到的问题在我博文中没有体现出来或者没有解决，及时私信我，免费解答，欢迎打扰哦！

折线统计图

设置x轴字体大小及字体颜色

一般从官网上复制下来的源码，属性名都是option(其它的属性名也类似)，在option下找到xAxis属性标签，
如下代码所示：
axisLabel属性标签里的fontSize设置字体大小，color属性设置颜色

xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#BDD8FB',
        fontSize: 8,
      },
    },
    axisLabel: {
      interval: 0,
      color: '#BDD8FB', // 设置X轴字体颜色
      fontSize: 14,// 设置X轴字体大小
    },
    axisTick: {
      show: false,
    },
    data: [],// X轴数据
  },

设置y轴字体大小及字体颜色

同理，与x轴设置方式类似，看源码：

yAxis: {
     type: 'value',
     min: 0,
     minInterval: 1,
     nameTextStyle: {
       fontSize: 8,
       color: '#BDD8FB',
       align: 'center',
     },
     axisLabel: {
       fontSize: 16,// 设置y轴字体大小
       fontFamily: 'Bebas',
       color: '#BDD8FB',// 设置y轴字体颜色
     },
 },

设置背景颜色及设置折线颜色

属性名都是option(其它的也类似)，直接设置在option下，看源码：

gzhgdoption1: {
    backgroundColor: 'transparent',// 设置背景颜色为透明色
    // 因为我这里有两条折线，所以设置了两个折现颜色值
    color: ['rgb(255, 198, 85)', 'rgb(27, 193, 235)'],
}

设置折线效果图显示阴影

先看效果图：
在这里插入图片描述
在option找到series属性下areaStyle属性下colorStops属性，源码如下：

 series: [
   {
     type: 'line',
     symbol: 'none',
     showSymbol: false,
     smooth: true, // 是否曲线
     name: '人数', // 图例对应类别
     data: [], // 存储数据
     areaStyle: {
       color: {
         type: 'linear',
         x: 0, //右
         y: 0, //下
         x2: 0, //左
         y2: 1, //上
         colorStops: [
           {
             offset: 0.1,
             color: '#FAC967', // 0% 处的颜色 设置渐变
           },
           {
             offset: 1,
             color: '#fff58a30', // 100% 处的颜色 设置渐变
           },
         ],
       },
     },
   },
   {
     type: 'line',
     smooth: true,
     name: '人员',
     data: [], // 存储数据
     areaStyle: {
       color: {
         type: 'linear',
         x: 0, //右
         y: 0, //下
         x2: 0, //左
         y2: 1, //上
         colorStops: [
           {
             offset: 0.1,
             color: '#01B3E4', // 0% 处的颜色 设置渐变
           },
           {
             offset: 1,
             color: '#86DCF300', // 100% 处的颜色 设置渐变
           },
         ],
       },
     },
   },
 ],

折线图位置及标签位置

先看效果图：
在这里插入图片描述
设置标签位置，源码如下：

legend: {
   show: true,
    icon: 'rect', // 设置标签图标样式
    orient: 'horizontal',
    left: 'right', // 设置显示位置(靠右侧显示)
    itemWidth: 12, // 设置标签宽度
    itemHeight: 12,// 设置标签高度
    formatter: ['{a|{name}}'].join('\n'),
    textStyle: {
      fontSize: 8, // 设置字体大小
      // 设置标签字体颜色(标签颜色在上面我说过了，设置折线颜色即可，不明白的私信)
      color: '#6A93B9',
      height: 8,
      rich: {
        a: {
          verticalAlign: 'bottom',
        },
      },
    },
  },

设置折线位置，源码如下：
注意：值越大里所对应的位置越远

grid: {
    left: '2%',
    right: '5%',
    bottom: '5%',
    top: '30px',
    containLabel: true,
  },

设置鼠标悬浮折线弹出窗口显示对应的数据

先看效果图：
在这里插入图片描述
这块比较简单源码如下：

tooltip: {
   trigger: 'axis',
   backgroundColor: 'rgba(0,0,0,.6)',// 设置窗口背景颜色
   borderColor: 'rgba(147, 235, 248, .8)', // 设置窗口边框颜色
   textStyle: {
     color: '#FFF',// 设置窗口字体颜色
   },
 },