首页 > 其他分享 >填充折线图的内容区域为渐变色

填充折线图的内容区域为渐变色

时间:2023-02-28 12:00:17浏览次数:33  
标签:false 填充 show color 渐变色 折线图 type

option = {
  xAxis: {
    type: 'category',
    show:false,//设置show为false时,x轴不展示,默认为true
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    show:false,//show默认为true,设置为false时,y轴不展示
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth:true,//控制折线图平稳走势
      lineStyle:{
        color:"purple"//控制折线的颜色
      },
      itemStyle:{
        opacity:0//设置拐点的小圆圈为透明色
      },
      areaStyle:{
        color:{
          type: 'linear',//设值折现区域填充为渐变色
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: 'purple' // 0% 处的颜色
          }, {
              offset: 1, color: 'white' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      }
    }
  ]
};

 

标签:false,填充,show,color,渐变色,折线图,type
From: https://www.cnblogs.com/zhaofen/p/17163540.html

相关文章

  • echart折线图异常多出一条连接线
     开发背景:vue3父传子,父中调子组件echarts图表问题:第一次进入数据图表正常,再次进入不更新图表数据的情况下,图表异常多出来一条开始到结尾的连接线原因:上次数据没清空解......
  • 公共字段自动填充
    一、问题分析在完成后台系统的员工管理功能开发时,在新增员工时需要设置创建时间、创建人、修改时间、修改人等字段,在编辑员工时需要设置修改时间和修改人等字段。这些字段......
  • 数据的分析(箱型图、柱状图、饼图、折线图、正弦虚线图)
    分析数据,将数据可视化importpandasaspdcatering_sale='D:/人工智能&软件工程/数据挖掘与分析/data/catering_sale.xls'#餐饮数据data=pd.read_excel(caterin......
  • 公共字段自动填充功能
    一、问题分析   二、代码实现                ......
  • NaN数据填充
    官网参考:填充缺失值-MATLABfillmissing-MathWorks中国Matlab数据补全方法-CollinsLi-博客园(cnblogs.com)Matlab数据补全方法 fillmissing填充缺失......
  • 【Spring IOC】【五】容器源码解析- 属性填充populateBean
    1 前言好了,我们这篇文章讲解下populateBean,也就是bean的属性填充,并不仅仅是设置值,还有很多事情要做的。比如你的属性值类型转换、表达式解析等,关于属性填充的一些知识,本......
  • 16、ECharts之仪表盘、仪表盘镂空且导入外来图片、品牌车、不等距折线图、图片右侧空
    一、仪表盘<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Echarts仪表盘效果</title><scripttype="text/javascript"src="htt......
  • HTML5 canvas画一个折线图
    <body><canvasid="drawing"style="border:1pxsolid;"width="600"height="400"></canvas><scripttype="text/javascript">letdrawing=document.query......
  • echarts渐变色可点击半圆图
      如上所示,用饼图改一个半圆图,同时半圆每个item设置不同的颜色。  首先需要搞出来一个echarts的容器,如下图所示,这玩意和echarts的官网搞个Div效果是一样的,只不过封装......
  • 折线图
    <!--折线图--><template><divclass="chartBox"><!--echart图标--><divid="lineChart"ref="lineChart"></div></div></template><script>//引入基本模板//......