echart自定义图例样式及统计图颜色相关

自定义图例:

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

echart自定义图例样式及统计图颜色相关

上一篇:android用户界面-组件Widget-网络视图WebView


下一篇:vue keep-alive总结,使用keep-alive缓存页面,返回时刷新部分数据示例。