关于Echarts的重要属性总结

概要

1.设置图例字体颜色:

javascript 复制代码
 legend: {
          //添加位置如下
            textStyle: {
              color: '#fff' // 设置图例文字颜色为白色
            }
       }

2.设置序列颜色:

javascript 复制代码
series: [{ 
          // 添加位置如下
          itemStyle: {     
            color: '#FFA500' // 设置序列Series颜色
          }]

3.设置坐标轴单位:

javascript 复制代码
  xAxis: [{
          type: 'category',
          data: work_days,
          //添加如下-----------------
          name:'日期',
          nameLocation: 'middle', // 显示位置 middle、start end(没看到效果)
          nameTextStyle: {
            fontWeight: 'bold' // 字体加粗
          },
          //添加如上------------------
          axisTick: {
            alignWithLabel: true
          }
        }],

4.设置轴数据显示格式:

javascript 复制代码
 yAxis: [
          {
          type: 'value',
          axisTick: {
            show: false
          },
         // 如下设置轴单位显示格式---------------
          axisLabel: {
              formatter: '{value} 次'
            }
        }
      ]

效果如下:

5.animationDuration:设置动画加载持续时间

javascript 复制代码
animationDuration: 2000 // 设置折线的动画持续时间为 2 秒

6.axisTick :坐标轴刻度线的配置项之一,通过设置 axisTick 可以控制是否显示坐标轴刻度线。

(1)展示坐标轴刻度线

javascript 复制代码
 yAxis: [
          {

         axisTick: {
              show: true // 显示 x 轴的刻度线,默认为显示刻度线
            }
         }
       ]

效果如下:

(2) 不展示坐标轴刻度线

javascript 复制代码
  yAxis: [
          {
          axisTick: {
              show: false // 不显示 x 轴的刻度线
           }
        }
       ]

效果如下:

7.alignWithLabel是刻度线对齐方式

javascript 复制代码
  xAxis: [{
          axisTick: {
            alignWithLabel: false //刻度线会位于标签中间。 true时刻度线会与标签对齐
            
          }
        }],

(1) alignWithLabel:true;

(2) alignWithLabel:false;

8.tooltip:鼠标触发提示

javascript 复制代码
   tooltip: {
          trigger: 'axis', //'axis'坐标轴上时触发显示 tooltip
           // 'item'数据项上时触发显示 tooltip
          axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
          }
        },

(1)trigger:'axis':

(2)trigger:'item':

9.boundaryGap :用于设置坐标轴两端留白的策略。

(1)当 boundaryGap 设置为 false 时,坐标轴两端的留白将被取消。

(2)当 boundaryGap 设置为 true 时,坐标轴两端有留白。

10.设置折线图的颜色与大小,是itemStyle的子属性

javascript 复制代码
  series: [{
          name: '液位上限', 
           itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          }
      }]

11.animationEasing :用于设置动画的缓动函数,可选值如下:

在 ECharts 中,常用的缓动函数包括以下几种:

(1)linear:线性缓动函数,即匀速运动。

(2)quadraticIn/out/inOut:二次方缓动函数,具有一定的加速度和减速度。

(3)cubicIn/out/inOut:三次方缓动函数,加速度更明显。

(4)quarticIn/out/inOut:四次方缓动函数,加速度更快。

(5)quinticIn/out/inOut:五次方缓动函数,加速度更快。

(6)sinusoidalIn/out/inOut:正弦曲线缓动函数,具有渐进式加速和减速效果。

(7)exponentialIn/out/inOut:指数曲线缓动函数,具有非常快速的加速效果。

(8)elasticIn/out/inOut:弹性缓动函数,具有弹性变形的效果。

(9)backIn/out/inOut:回弹缓动函数,具有回弹效果。

(10)bounceIn/out/inOut:反弹缓动函数,具有反弹效果。

相关推荐
我是华为OD~HR~栗栗呀9 小时前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java10 小时前
vivo响应式官网
前端·css·html·1024程序员节
web打印社区15 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗15 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长15 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅16 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_16 小时前
Chrome开发者工具
前端·chrome
YiHanXii16 小时前
this 输出题
前端·javascript·1024程序员节
楊无好16 小时前
React中ref
前端·react.js
维他命Coco16 小时前
js常见开发学习
javascript