柱状图 折线图 标注组合


<div class="ddchart" id="ddchart"></div>
  function setChart(mokeValue){
        var oConfig = {
            xFS: 16,
            yFS: 16
        };
        var mokeData = eval(mokeValue) || [];

        var echarts = window.parent.echarts;
        var xArr = [];
        var xNum = 1;
        mokeData.forEach(function (item, i) {
            xArr.push(''+xNum);
            xNum++;
        });
        var myChart = echarts.init(document.getElementById('ddchart'));
        // 指定图表的配置项和数据
        var option = {
            color:['#6bf2ff'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            grid: {
                top: '18%',
                left: '3%',
                right: '3%',
                bottom: '3%',
//            top: '1%',
                containLabel: true
            },
            xAxis: {
                data: xArr,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontSize:oConfig.xFS
                    }
                },
                axisLine: {
                    //设置x轴线宽与文字颜色
                    lineStyle: {
                        color: '#333',
                        width: 2
                    },
                    interval: 0,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            },
            yAxis: {
                splitLine: {
                    //设置辅助线的样式
                    lineStyle: {
                        type: 'solid',
                        color:'rgba(0,0,0,0)'
                    }
                },
                interval: 1,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontSize:oConfig.yFS
                    }
                },
                axisLine: {
                    //设置y轴线宽与文字颜色
                    lineStyle: {
                        color: '#333',
                        width: 2
                    },
                    interval: 0
                }
            },
            series: [{
                name: '电压',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#a4e2fb'
                        }, {
                            offset: 1,
                            color: '#498dc8'
                        }])
                    }
                },
                markPoint : {
                    symbolSize: 45,
                    itemStyle: {
                        normal: {
                            color: '#fdbe07'
                        }
                    },
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    lineStyle: {
                        normal: {
                            type: 'solid',
                            color:'#ff0'
                        }
                    },
                    data: [{
                        name: '平均线',
                        type: 'average'
                    }]
                },
                data: mokeData
            }],
            animation:true
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
  function setChart(mokeValue){
        var oConfig = {
            xFS: 16,
            yFS: 16
        };
        var mokeData = eval(mokeValue) || [];

        var echarts = window.parent.echarts;
        var xArr = [];
        var xNum = 1;
        mokeData.forEach(function (item, i) {
            xArr.push(''+xNum);
            xNum++;
        });
        var myChart = echarts.init(document.getElementById('ddchart'));
        // 指定图表的配置项和数据
        var option = {
            color:['#6bf2ff'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            grid: {
                top: '18%',
                left: '3%',
                right: '3%',
                bottom: '3%',
//            top: '1%',
                containLabel: true
            },
            xAxis: {
                data: xArr,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontSize:oConfig.xFS
                    }
                },
                axisLine: {
                    //设置x轴线宽与文字颜色
                    lineStyle: {
                        color: '#333',
                        width: 2
                    },
                    interval: 0,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            },
            yAxis: {
                splitLine: {
                    //设置辅助线的样式
                    lineStyle: {
                        type: 'solid',
                        color:'rgba(0,0,0,0)'
                    }
                },
                interval: 1,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontSize:oConfig.yFS
                    }
                },
                axisLine: {
                    //设置y轴线宽与文字颜色
                    lineStyle: {
                        color: '#333',
                        width: 2
                    },
                    interval: 0
                }
            },
            series: [{
                name: '电压',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#a4e2fb'
                        }, {
                            offset: 1,
                            color: '#498dc8'
                        }])
                    }
                },
                markPoint : {
                    symbolSize: 45,
                    itemStyle: {
                        normal: {
                            color: '#fdbe07'
                        }
                    },
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    lineStyle: {
                        normal: {
                            type: 'solid',
                            color:'#ff0'
                        }
                    },
                    data: [{
                        name: '平均线',
                        type: 'average'
                    }]
                },
                data: mokeData
            }],
            animation:true
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
function findData_1() {
    $.ajax({
        url:'${base}/sysVehState/vehCurrentParamDetail.html',
        method:'post',
        data:{
            "vin":"${vin}"
        },
        dataType:'json',
        success:function(data){
            showData_1(data);
        },
        error:function(){
        }
    });
}

猜你喜欢

转载自blog.csdn.net/qq_29648689/article/details/80512857
今日推荐