前提
工作中,遇到一个需求,要在一个折线图中展示出三项数据,除去横坐标纵坐标,第三项数据要用点的颜色程度来表示。效果如图:
实现代码如下
<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的第三项数据。
最后再根据需求调整颜色范围与颜色条位置,实现需求!