echarts实现用颜色程度展示折线数据

前提

工作中，遇到一个需求，要在一个折线图中展示出三项数据，除去横坐标纵坐标，第三项数据要用点的颜色程度来表示。效果如图：

实现代码如下

    <script src="echarts.min.js"></script>
    <div id="box" style="height:500px;width:800px;margin:50px auto;"></div>
    <script>
    let mycharts = echarts.init(document.getElementById("box"))
    console.log(mycharts)
    let option = {
        xAxis:{
            min:0,
            max:100
        },
        yAxis:{
            min:0,
            max:100,
        },
        visualMap: {
            orient: 'horizontal',
            left: 'center',
            min: 0,
            max: 100,
            itemHeight:640,
            itemWidth:50,
            top:5,
            itemSymbol :"circle",
            dimension: 2,
            inRange: {
                color: ['red', 'orange','yellow',"green","blue"]
            }
        },
        tooltip:{
            formatter:function(param){
                return '横坐标：'+param.data[0]+'</br>' + '纵坐标：'+param.data[1]+'</br>' + 'z轴值:' + param.data[2]
            }
        },
        series:{
            type:"line",
            symbol : 'circle',
            symbolSize : 20,
            data:[
                [10,20,90],
                [20,10,70],
                [50,80,40],
                [70,55,20],
                [90,76,10],
            ],
        }
    };
    mycharts.setOption(option)

主要就是在visualMap属性中设置itemSymbol 为"circle"，然后在series中设置symbol 也为’circle’与之对应，并设置dimension为2，让其对应上data的第三项数据。
最后再根据需求调整颜色范围与颜色条位置，实现需求！