自定义图例:
legend:{ show:true, orient:'horizontal', borderColor:'#df3434', borderWidth:2, data:[ { name:'蒸发量', textStyle:{ fontSize:12, fontWeight:'bolder', color:'#cccccc' }, icon:'image://./images/icon1.png'//格式为'image://+icon文件地址',其中image::后的//不能省略,也可以换成echart内置的几种图例样式
icon | 展示 |
---|---|
circle | 圆形 |
rect | 矩形 |
roundRect | 圆角矩形 |
triangle | 三角形 |
diamond | 菱形 |
pin | 水滴 |
arrow | 箭头 |
none | 不显示图标 |
}, { name:'降水量', textStyle:{ fontSize:12, fontWeight:'bolder', icon:'image://./images/icon2.png'//格式为'image://+icon文件地址',其中image::后的//不能省略 }, icon:'pie' } ] }
柱状图各个数据颜色
series: [{ name: '数量', type: 'bar', itemStyle: { normal: { color: function (params) { var colorList = [ '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0' ]; return colorList[params.dataIndex] // dataIndex数据的索引 }, //以下为是否显示,显示位置和显示格式的设置了 label: { show: true, position: 'top', //formatter: '{c}' formatter: '{b}\n{c}' } } }, //设置柱的宽度 barWidth: 70, data: [28, 15, 9, 4, 7, 8, 23, 11, 17] } ]
visualMap(视觉影视组件)
-
symbol
: 图元的图形类别。 -
symbolSize
: 图元的大小。 -
color
: 图元的颜色。 -
colorAlpha
: 图元的颜色的透明度。 -
opacity
: 图元以及其附属物(如文字标签)的透明度。 -
colorLightness
: 颜色的明暗度,参见 HSL。 -
colorSaturation
: 颜色的饱和度,参见 HSL。 -
colorHue
: 颜色的色调,参见 HSL。