首页 > 其他分享 >echarts折线图颜色渐变设置

echarts折线图颜色渐变设置

时间:2023-06-03 14:45:23浏览次数:35  
标签:颜色 color 渐变 60 229 折线图 echarts

 const color1="rgb(229,53,59,0.05)"
    const color2="rgb(229,53,59,0)"
 series: [
            {
                data: [12, 30, 60, 80, 100, 60, 130,12, 30, 60, 80, 100, 60, 130],
                type: 'line',
                smooth: true,
                areaStyle:{
                  // color:'rgba(229,53,59,0.01)'
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                offset: 0,
                                color: color1
                                }, // %0的颜色值
                                {
                                offset: 1,
                                color: color2
                                } // 100%的颜色值
                            ])
                },
                lineStyle:{
                  color:'#E5353B ',
                  width:'3'
                }
            }
        ],

将你需要的渐变颜色带入到

series设置项的 areaStyle属性中,实现颜色渐变效果,具体更多的用法请参照官网

标签:颜色,color,渐变,60,229,折线图,echarts
From: https://www.cnblogs.com/xiaobaizitaibai/p/17453958.html

相关文章

  • echarts折线修改鼠标移动上去的内容
    tooltip:{trigger:'axis',backgroundColor:'#FFFFFF',//textStyle:{//color:'#E5353B',//fontSize:'16px'//},for......
  • ECharts点击横坐标事件实现超链接跳转
    需求:微博排行榜,横坐标展示出了微博对应的id,现在需要通过点击横坐标来实现跳转到对应的微博页面。设置横坐标中的triggerEvent属性为true;xAxis:{...triggerEvent:true,...},添加on点击事件。thisChart.on("click",function(params){window.location.......
  • Echarts——如何默认选中图表并显示tooltip
    前言参考资料实现预览地址内容很简单借助于dispatchAction来触发事件;import*asechartsfrom'echarts';varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);varoption;option={tooltip:{trigger:'axis'......
  • echarts更新数据后报错 There is a chart instance already initialized on the dom
    产生原因使用Echarts插件的时候,多次加载会出现Thereisachartinstancealreadyinitializedonthedom.的警告,表示DOM上已经初始化了一个图表实例。解决方案定义一个全局变量,在初始化之前先判断该实例是否存在,若存在,先销毁。varmyChart;//全局变量functiondrawChart(......
  • 渐变色Panel构造方法的重写
    #此类用于设置渐变色panelclassMyPanel(wx.Panel):def__init__(self,parent):wx.Panel.__init__(self,parent,wx.ID_ANY)self.SetBackgroundStyle(wx.BG_STYLE_PAINT)self.Bind(wx.EVT_PAINT,self.OnPaint)self.Bind(wx.EVT_SIZ......
  • echarts入门教程(超级详细带案例)
    ————————————————版权声明:本文为CSDN博主「争儿不脱发」的原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/m0_55734030/article/details/127559434一.echarts的介绍1、echarts是一款基于JavaScript的数据可......
  • echarts——环形图,异步请求数据后,有数据但图不显示
    echats官网:https://echarts.apache.org/ 我的原因:series里的data数据,需要是value,name格式,我的后台返回的数据是{number:1,typeName:'1'}解决方法:做下转换res.result.forEach(item=>{item.name=item.typeName;item.value=item.number;}) ......
  • Echarts 阴影点击事件获得当前柱状图的索引值方法
    Echarts阴影点击事件获得当前柱状图的索引值方法//什么在option外面的变量varclickIndex;option={//配置信息tooltip:{//提示框//提示触发类型:不触发trigger:'none',},//formatter回调函数,formatter:val=>{......
  • echarts堆叠柱状图上方展示两个数据项的总和
        //当月漏项统计排名getIndicatorCurve(data1){echarts.init(document.getElementById('lineOption5')).dispose()//销毁实例//找到容器letmyEcharts=echarts.init(document.getElementById('lineOption5'),......
  • echarts爆错invalid dom
    错误截图 错误原因:将初始化echarts的方法放在了created中,解决:将其放在mounted中 ......