Echarts折线图实现一条折线显示不同颜色的方法

 更新时间:2024年02月17日 09:36:30   作者:阿琰a_  
这篇文章主要给大家介绍了关于Echarts折线图实现一条折线显示不同颜色的相关资料,Echarts的折线图可以通过设置series中的itemStyle属性来改变折线的颜色,文中通过代码介绍的非常详细,需要的朋友可以参考下

效果图

在echarts中,如果想要实现折线图前半部分为蓝色,后半部分为红色,怎么处理呢?

这里介绍一种方法,通过markLine图表标线搭配visualMap觉映射组件配合实现,具体代码如下:

    const charts1 = useRef();
    const time = [...];
    const data = [...];
    const option1 ={
        xAxis: {
            type: 'category',
            data: time
        },
        yAxis: {
            type: 'value',

        },
        visualMap: {
            type: "piecewise",
            show: false,
            dimension: 0,
            seriesIndex: 0,
            pieces: [
                {
                    gt: 0,
                    lt: 12,
                    color: "rgba(41,11,236,0.68)",//大于0小于12为蓝色
                },
                {
                    gt: 12,
                    color: "rgba(229,27,88,0.68)",//大于12区间为红色
                },
            ],
        },
        series: [
            {
                data: data,
                type: 'line',
                symbol: "none", //取消折线上的圆点
                color:'#1d36d2',
                markLine: {
                    silent: true,
                    symbol: ["none", "none"],
                    lineStyle: {
                        color: "#ccc",
                    },
                    animation: false, //关闭动画
                    label: {
                        show: false,
                    },
                    data: [
                        {
                            xAxis: 12,//在x轴12格处设置一条参考线
                        },
                    ],
                },
            },

        ]
    };
  
    useEffect(()=>{
        const chart1=echarts.init(charts1.current);
        chart1.setOption(option1)
    },[])

    return (
        <div className="App"}}>
             <div ref={charts1} style={{width:'100%',height:'100%'}}></div>
        </div>
    );

总结

到此这篇关于Echarts折线图实现一条折线显示不同颜色的文章就介绍到这了,更多相关Echarts折线图显示不同颜色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 用JavaScript实现动画效果的方法

    用JavaScript实现动画效果的方法

    大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果,Dreamweaver会自动为用户生成特定的程序代码,大家有没有想过动画的实现原理呢?
    2013-07-07
  • 使用JavaScript进行表单校验功能

    使用JavaScript进行表单校验功能

    最近在学习JavaScript,因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤,需要的的朋友参考下吧
    2017-08-08
  • 学习JavaScript设计模式之享元模式

    学习JavaScript设计模式之享元模式

    这篇文章主要为大家介绍了JavaScript设计模式中的享元模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 微信小程序如何获取手机验证码

    微信小程序如何获取手机验证码

    这篇文章主要为大家详细介绍了微信小程序如何获取手机验证码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JavaScript类型系统之布尔Boolean类型详解

    JavaScript类型系统之布尔Boolean类型详解

    这篇文章主要介绍了JavaScript类型系统之布尔Boolean类型详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JavaScript对象引用与赋值实例详解

    JavaScript对象引用与赋值实例详解

    这篇文章主要介绍了JavaScript对象引用与赋值,结合实例形式分析了JavaScript对象引用及赋值的操作技巧与相关注意事项,需要的朋友可以参考下
    2017-03-03
  • JavaScript中两个感叹号的作用说明

    JavaScript中两个感叹号的作用说明

    用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
    2011-12-12
  • js实现简易ATM功能

    js实现简易ATM功能

    这篇文章主要为大家详细介绍了js实现简易ATM功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • JS实现判断有效的数独算法示例

    JS实现判断有效的数独算法示例

    这篇文章主要介绍了JS实现判断有效的数独算法,结合实例形式分析了javascript数独判断的原理及相关算法实现、使用操作技巧,需要的朋友可以参考下
    2019-02-02
  • 基于JavaScript实现跳转提示页面

    基于JavaScript实现跳转提示页面

    这篇文章主要介绍了基于JavaScript实现跳转提示页面 的相关资料,需要的朋友可以参考下
    2016-09-09

最新评论