溶解氧浓度及饱和率变化ECharts Gallery

20:11:45图表已生成
代码
var uploadedDataURL = '/asset/get/s/data-1573457276101-gT-1NqnW.png';
var data = {
    //x轴 时间
    xAxis: ['2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月', '2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月', '2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月', '2016年6月', '2016年7月', '2016年8月', '2016年9月', '2016年10月', '2016年11月', '2016年12月', '2017年1月', '2017年2月', '2017年3月', '2017年4月', '2017年5月', '2017年6月', '2017年7月', '2017年8月', '2017年9月', '2017年10月', '2017年11月', '2017年12月'],
    //折线图数值
    lineData: [98, 108, 88, 82, 92, 96, 101, 104, 112, 100, 100, 101, 90, 90, 84, 89, 93, 100, 95, 101, 101, 103, 89, 103, 111, 110, 93, 87, 98, 103, 105, 100, 97, 103, 98, 110, 99, 90, 92, 93, 91, 94, 110, 108, 96, 99, 103, 102, 103, 100, 81, 82, 91, 99, 103, 105, 104, 114, 113, 106, 105, 96, 96, 91, 99, 96, 111, 92, 110, 122, 118, 102, 111, 90],
    //柱状图数值
    barData: [7.2, 8.2, 7.3, 7.4, 7.5, 8.1, 7.9, 7.1, 7.1, 6.9, 6.9, 6.9, 6.9, 7.5, 7.5, 7.5, 7.8, 8.1, 7.7, 6.9, 6.9, 6.7, 6.5, 7.1, 7.4, 7.3, 7.3, 6.9, 7.8, 7.8, 7.8, 7.9, 6.8, 6.9, 6.9, 7.5, 7.1, 7.3, 7.2, 7.8, 7.4, 7.4, 8.1, 7.6, 7.2, 6.9, 6.9, 7, 7.3, 7.4, 6.6, 6.4, 7.6, 8, 7.4, 7.4, 7, 7.1, 7.1, 7.1, 7.1, 7.1, 7.6, 7.3, 7.7, 8, 8.2, 7.3, 7.3, 7.4, 7.2, 7.6, 8, 6.9],
    //折线标准线
    lineMark: 90,
    //柱状图标准线
    barMark: 7.5
};

//柱状图颜色分区
/*var area = [ //var color = ['#40E3F6', '#31B1E6', '#6888EF', '#9B68EF', '#E660F6']
    {max: 7.5, color: '#31B1E6', lineMin: 90},//5及5以下
    {max: 7.5, color: '#31B1E6', line},// 7.5及 7.5以下
    {max: 10, color: '#6888EF'},//10及10以下
    { color: '#9B68EF'} // 10以上
];*/

//根据数值匹配对应颜色
function getBarColor(v1, v2) {
    if (isNaN(v1) || isNaN(v2)) {
        return '#ddd';
    }
    if (v1 < 7.5 && v2 >= 90) {
        return '#31B1E6';
    } else if (v1 >= 7.5 && v2 < 90) {
        return '#6888EF';
    } else if (v1 < 7.5 && v2 < 90) {
        return '#9B68EF';
    } else if (v1 >= 7.5 && v2 >= 90) {
        return '#40E3F6';
    }

    /* for(var i = 0; i < area.length; i++){
         var item = area[i];
         if(v < item.max || !item.max ){
             return item.color
         }
     }*/
}
//处理柱状图数据，添加颜色
let barData = [];
data.barData.forEach((v, i) => {
    barData.push({
        value: v,
        itemStyle: {
            normal: {
                barBorderRadius: 8,
                color: getBarColor(v, data.lineData[i])
            }
        }
    });
});

option = {
    backgroundColor: '#FFF',
    grid: {
        top: 80,
        left: 50,
        right: 120,
        bottom: 100
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    color: ['#31B1E6', '#78b4ff'],
    tooltip: {
        trigger: 'axis'
    },
    legend: {//图例
        top: 20,
        itemWidth: 26,//图形宽度
        itemHeight: 16,//图形高度
        textStyle: {
            fontSize: 18//文字大小
        }
    },
   /* title: {
        left: 'center',
        text: '溶解氧浓度及饱和率变化'
    },*/
    xAxis: {
        data: data.xAxis,
        axisLabel: {
            textStyle: {
                fontSize: 16,
                color: '#000'
            },
            rotate: '90',
            interval: 5//中间间隔       
        },
    },
    yAxis: [{
            name: 'mg/l',
            // min: 5,
            max: 15,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(33,148,246,0.2)'
                }
            },
            axisTick: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: 'rgb(245,250,254)'
                }
            },
            axisLabel: {
                 textStyle: {
                    fontSize: 16,
                    color: '#000'
                }
            },
            nameTextStyle: {
                fontSize: 16,
                color: '#000'
            }

        },
        {
            name: '%',
            min: 25,
            max: 125,
            axisLabel: {
                formatter: function(v){
                    if(v === 120){
                        return ''
                    }
                    return v;
                },
                 textStyle: {
                    fontSize: 16,
                    color: '#000'
                }
            },
            nameTextStyle: {
                fontSize: 16,
                color: '#000'
            }
           
        }
    ],
    series: [{
        name: '溶解氧浓度',
        type: 'bar',
        yAxisIndex: 0,
        barWidth: 6,
        data: barData,
        markLine: {
            label: {
                show: true,
                formatter: '{b}：{c}'
            },
            lineStyle: {
                type: 'solid',
                width: 2
            },
            data: [{
                name: '浓度Ⅰ类标准',
                yAxis: data.barMark,
                itemStyle: {
                    normal: {
                        color: '#ff6d9d'
                    }
                }
            }]
        }
    }, {
        name: '溶解氧饱和率',
        type: 'line',
        yAxisIndex: 1,
        data: data.lineData,
        symbol: 'circle',
        symbolSize: 1,
        lineStyle: {
            width: 4,//折线宽度
            color: 'rgb(222, 118, 223)',//颜色
            shadowBlur: 12,
            shadowColor: 'rgb(222, 118, 223,0.9)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
        },
        itemStyle: {
            color: 'rgb(222, 118, 223)',
            borderWidth: 1,
            borderColor: '#FFF'
        },
        label: {
            show: true,
            distance: 1,
            normal: {
                show: true,
                //offset: [17, 5],
                offset: [25, -2],
                backgroundColor: {
                    image: uploadedDataURL
                },
                color: '#FFF',
                padding: [8, 20, 8, 6],
                //width:60,
                height: 36,
                formatter: function(params) {
                    var idx = params.dataIndex;
                    var pre = data.lineData[idx - 1];
                    var next = data.lineData[idx + 1];
                    if (pre && next &&
                        (
                            (params.data > pre && params.data > next) ||
                            (params.data < pre && params.data < next)
                        )
                    ) {
                        var name = params.name;
                        var value = params.data;
                        //var str = value;
                        var str = name + '\n饱和率：' + value;
                        return str;
                    }
                    return '';

                },
                rich: {
                    bg: {
                        backgroundColor: {
                            image: uploadedDataURL
                        },
                        width: 78,
                        //height:42,
                        color: '#FFF',
                        padding: [20, 0, 20, 10]
                    },
                    br: {
                        width: '100%',
                        height: '100%'
                    }

                }
            }
        },
        markLine: {
            label: {
                show: true,
                formatter: '{b}：{c}'
            },
            lineStyle: {
                type: 'solid',
                width: 2
            },
            data: [{
                name: '饱和率Ⅰ类标准',
                yAxis: data.lineMark,
                itemStyle: {
                    normal: {
                        color: '#79E73C'
                    }
                }
            }]
        }
    }]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
