echarts 绘制 坐标值 垂直水平

 

 

 

https://www.echartsjs.com/examples/zh/editor.html?c=line-simple

将下面的代码拷入后运行，enjoy吧

//markline
        var markLineOpt = {
            symbol: 'none',
            itemStyle: {
                normal: { lineStyle: { type: 'dotted', color:'#000' } }
            },
            data: [
                [{
                    // 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
                    yAxis: '820',
                    xAxis: '820'
                }, {
                    yAxis: '0',
                    xAxis: '820'
                }],

            ]
        };
        //图表
     
option = {
            backgroundColor:'',
            grid: {
                top: '15%',
                bottom:'25%',
                left:'0',
                right:'0',
                containLabel: false
            },
            xAxis: [
                {
                    type: 'category',
                    data:  [820, 932, 901, 934, 1290, 1330], //x轴数据
                    axisTick:{
                        show:false,
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#f8914e',
                            width:1
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:function(value,index){
                                return index%2==0?'#da241e':'#ffc770'
                            }
                        },
                        fontSize:12,
                        interval:0
                    },
                },
                {
                    type: 'category',
                    data:  [820, 932, 901, 934, 1290, 1330],//图表中间显示年份参数
                    position: 'bottom',
                    axisTick:{
                        show:false
                    },
                    axisLine:{
                        lineStyle:{
                            color:'transparent',
                            width:0
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:function(value,index){
                                return index%2==0?'#da241e':'#ffc770'
                            }
                        },
                        fontSize:12,
                        interval:0
                    },
                    offset: 15,
                },
                {
                    type: 'category',
                    data:  [820, 932, 901, 934, 1290, 1330],//图表中间显示月份参数
                    axisTick:{
                        show:false
                    },
                    axisLine:{
                        lineStyle:{
                            color:'transparent',
                            width:0
                        }
                    },
                    axisLabel:{
                        textStyle:{
                            color:function(value,index){
                                return index%2==0?'#da241e':'#ffc770'
                            }
                        },
                        fontSize:14,
                        interval:0
                    },

                }
            ],
            yAxis: {
                type: 'value',
                axisTick:{
                    show:false,
                    alignWithLabel: true
                },
                splitLine:{show: false},//去除网格线
                axisLabel:{
                    formatter:function(){
                        return ""
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#f8914e',
                        width:1,

                    }
                }
            },
            series: [
                /*{
                    name:'',
                    data: [], //柱状图数据，与x轴数据对应
                    type: 'bar',
                    barWidth:20,
                    itemStyle: {
                        normal: {
                            color: function(param) {
                                var colorList = [ "#da241e", "#ffc770" ];
                                var x = '';
                                param.dataIndex%2 ==0 ? x=1 : x=2;
                                if(x == '1') {
                                    return colorList[0];
                                } else {
                                    return colorList[1]
                                }
                            },
                            barBorderRadius: [3,3,0,0],
                        },
                    },
                },*/
                {
                    name:'',
                    data:  [820, 932, 901, 934, 1290, 1330],//柱状图上方折线图数据，在柱状图数据基础上+3向上调整位置
                    type:'line',
                    lineStyle:{
                        color:'#FFC770',
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    itemStyle:{
                        normal:{
                            color: function(param) {
                                var colorList = [ "#da241e", "#ffc770" ];
                                var x = '';
                                param.dataIndex%2 ==0 ? x=1 : x=2;
                                if(x == '1') {
                                    return colorList[0];
                                } else {
                                    return colorList[1]
                                }
                            },
                        }
                    },
                    markLine: markLineOpt,
                    symbol: 'emptyCircle',
                    symbolSize: 10
                }
            ]
        };