echarts设置折线图点的样式(echarts折线图拐点样式)

Echarts折线图属性设置大全varoption={backgroundColor:’#FFF0F5′,title:{text:’折线图’,subtext:’模拟数据’,x:’center’},legend:{…

大家好,又见面了,我是你们的朋友全栈君。

Echarts折线图属性设置大全

      var option = {

        backgroundColor: '#FFF0F5',

        title: {
          text: '折线图',
          subtext: '模拟数据',
          x: 'center'
        },

        legend: {
          // orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直)
          orient: 'horizontal',
          // x 设置水平安放位置,默认全图居中,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单位px)
          x: 'left',
          // y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px)
          y: 'top',
          data: ['预期','实际','假设']
        },

        //  图表距边框的距离,可选值:'百分比'¦ {number}(单位px)
        grid: {
            top: '16%',   // 等价于 y: '16%'
            left: '3%', 
            right: '8%',
            bottom: '3%',
            containLabel: true
        },

        // 提示框
        tooltip: {
          trigger: 'axis'
        },

        //工具框,可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载工具
            }
        },

        xAxis: {
          name: '周几',
          type: 'category',
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#912CEE'
            }
          },
          // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: 30, // 旋转角度
            interval: 0  //设置X轴数据间隔几个显示一个,为0表示都显示
            },
          // boundaryGap值为false的时候,折线第一个点在y轴上
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },

        yAxis: {
          name: '数值',
          type: 'value',
          min:0, // 设置y轴刻度的最小值
          max:1800,  // 设置y轴刻度的最大值
          splitNumber:9,  // 设置y轴刻度间隔个数
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#87CEFA'
            }
          },
        },

        series: [
          {
            name: '预期',
            data: [820, 932, 301, 1434, 1290, 1330, 1320],
            type: 'line',
            // 设置小圆点消失
            // 注意:设置symbol: 'none'以后,拐点不存在了,设置拐点上显示数值无效
            symbol: 'none',
            // 设置折线弧度,取值:0-1之间
            smooth: 0.5,
          },

          {
            name: '实际',
            data: [620, 732, 941, 834, 1690, 1030, 920],
            type: 'line',
            // 设置折线上圆点大小
            symbolSize:8,
            itemStyle:{
              normal:{
                // 拐点上显示数值
                label : {
                show: true
                },
                borderColor:'red',  // 拐点边框颜色
                lineStyle:{                 
                  width:5,  // 设置线宽
                  type:'dotted'  //'dotted'虚线 'solid'实线
                }
              }
            }
          },

          {
            name: '假设',
            data: [120, 232, 541, 134, 290, 130, 120],
            type: 'line',
            // 设置折线上圆点大小
            symbolSize:10,
            // 设置拐点为实心圆
            symbol:'circle',            
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label : {
                  show: true
                },
                lineStyle:{
                  // 使用rgba设置折线透明度为0,可以视觉上隐藏折线
                  color: 'rgba(0,0,0,0)'
                }
              }
            }
          }
        ],
        
        color: ['#00EE00', '#FF9F7F','#FFD700']
      };

x轴属性:boundaryGap默认值为true,此时图表:

echarts设置折线图点的样式(echarts折线图拐点样式)

x轴属性:boundaryGap设置值为false,此时图表:

echarts设置折线图点的样式(echarts折线图拐点样式)

注意:区别是   折线起始拐点位置不同

提示框

设置:trigger: ‘axis’

坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。

axis是轴、轴线的意思,此刻提示框显示的是所有折线同一横坐标的拐点信息

echarts设置折线图点的样式(echarts折线图拐点样式)

设置:trigger: ‘item’

数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。

用在有类目轴的折线图表中:鼠标放哪个拐点上,就只显示当前拐点的信息,设置symbol: ‘none’,的没有拐点,不显示提示框

echarts设置折线图点的样式(echarts折线图拐点样式)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/125414.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 数据挖掘中所需的概率论与数理统计知识

    数据挖掘中所需的概率论与数理统计知识数据挖掘中所需的概率论与数理统计知识  (关键词:微积分、概率分布、期望、方差、协方差、数理统计简史、大数定律、中心极限定理、正态分布) 导言:本文从微积分相关概念,梳理到概率论与数理统计中的相关知识,但本文之压轴戏在本文第4节(彻底颠覆以前读书时大学课本灌输给你的观念,一探正态分布之神秘芳踪,知晓其前后发明历史由来),相信,每一个学过概率论与数理统计的朋友都有必要了解数理统计学简…

  • python json 编码_python乱码转中文

    python json 编码_python乱码转中文python2.x版本的字符编码有时让人很头疼,遇到问题,网上方法可以解决错误,但对原理还是一知半解,本文主要介绍python中字符串处理的原理,附带解决json文件输出时,显示中文而非un

  • 3个国内最大的黑客学习网站

    3个国内最大的黑客学习网站1、i春秋国内比较好的安全知识在线学习平台,把复杂的操作系统、工具和网络环境完整的在网页进行重现,为学习者提供完全贴近实际环境的实验平台,地址:https://www.ichunqiu.com/main2、XCTF_OJ练习平台XCTF-OJ(XCaptureTheFlagOnlineJudge)是由XCTF组委会组织开发并面向XCTF联赛参…

  • 网盘lua调用失败(dumb down)

    前阵子在弄一个dump程序的时候遇到这样一个问题.
    dump程序在被dump程序debug情况下一切正常,release版本下调用了minidumpwritedump函数进行dump,但是minidumpwritedump函数调用失败,GetLastError()获得到的是一个不正常的大数.
    在网络上久寻未果,遇到同样问题的人都没有提出最后的解决方案,也尝试过修改项目设置等一系列方法,没有解决.
     
    有一天想重新研究这个问题,看这个帖子http://app

  • python贪吃蛇最简单代码_用python写贪吃蛇

    python贪吃蛇最简单代码_用python写贪吃蛇一、前言之前版本很多小伙伴都觉得难度过高,另外也有粉丝问还能不能精简代码。所以这版降低了难度(由原来过关增加5km/h改为3.5KM/h),并通过反射代替IFELSE的写法,并删除了一些冗余的代码,将代码压缩到了71行(不必要的压缩代码是不建议的,这里压缩代码只是为了好玩)二、实现效果三、环境要求python3+pygame包安装命令:打开cmd输入:pipinstallpygame四、源码分享importpygameimportsysimportra

  • lambda表达式pythonlist_Python学习笔记之lambda表达式用法详解

    lambda表达式pythonlist_Python学习笔记之lambda表达式用法详解本文实例讲述了Python学习笔记之lambda表达式用法。分享给大家供大家参考,具体如下:Lambda表达式使用Lambda表达式创建匿名函数,即没有名称的函数。lambda表达式非常适合快速创建在代码中以后不会用到的函数。麻烦的写法:defmultiply(x,y):returnx*y使用Lambda之后:double=lambdax,y:x*yLambda函…

    2022年10月17日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号