• 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}
    {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
  • 相关阅读:
    java内部类
    接口与继承
    数据结构
    数据I/O流
    课程总结
    第六次实训作业异常处理
    常用类的课后作业
    窗口实训1
    实训作业4
    实训作业3
  • 原文地址:https://www.cnblogs.com/wanghuanl/p/15149179.html
Copyright © 2020-2023  润新知