关于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:反弹缓动函数,具有反弹效果。

相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互