web数据可视化(Echarts版)3-2坐标轴关键代码(代码仅供参考)

白日梦想家☜

已于 2023-05-20 12:43:52 修改

阅读量360

点赞数

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-18 22:29:17 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130756610

版权

HTML 专栏收录该内容

40 篇文章 11 订阅

订阅专栏

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width: 750px;height:550px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option={
        title:{
          text:"广州2023年气候图",
            textStyle:{
                  color:'red',
            },
            x:'left'
        },
        color:["red","green","blue","yellow","grey","#FA8072"],
        tooltip:{
            trigger:'axis'
        },
        legend:{
            data:['蒸发量','降水量','最低气温','最高气温']
        },
        toolbox:{
            show:true,
            feature: {
                mark: {show: true}, dataView: {show: true},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true}, saveAsImage: {show: true}
            }
            },
            xAxis:[
                {
                    nameTextStyle:{fontSize:14,fontStyle:'italic',fontWeight:'bold'},
                    boundaryGap:true,show:true,
                    axisLine:{
                        lineStyle:{
                            color:'green',type:'solid',width:2
                        }
                    },
                    axisLabel:{
                        show:true,interval:'auto',
                        rotate: 45,margin: 8,
                        formatter:'{value}月',
                        textStyle:{
                            color:'blue',fontFamily:'sans-serif',
                            fontSize:14,fontStyle:'italic',fontWeight:'bold'
                        }
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#483d8b',type:'dashed',width:1
                        }
                    },
                    splitArea:{
                        show:true,
                        areaStyle:{
                            color:['rgba(14,238,144,0.3)','rgba(135,200,250,0.3)']
                        }
                    },
                    data:[
                            '1','2','3','4','5','6','7','8','9','10','11','12'
                    ]
                },
                {
                    type:'category',
                    data:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
                }
            ],
            yAxis:[
                {
                    type:'value',position:'left',name:'降水量',nameLocation:'middle',
                    nameTextStyle:{ color:'red',type:'dashed',width:5,fontSize:14,fontStyle:'italic',fontWeight:'bold'},
                    boundaryGay:[0,0.1],
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'red',type:'dashed',width:2
                        }
                    },
                    axisTick:{
                        show:true,
                        length:10,
                        lineStyle:{
                            color:'green',type:'solid',width:2
                        }
                    },
                    axisLabel:{
                        show:true,interval:'auto', rotate: -45,margin: 18,
                        formatter:'{value}ml',
                        textStyle:{
                            color:'#le90ff',fontFamily:'verdana',
                            fontSize:10,fontStyle:'normal',fontWeight:'bold'
                        }
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#483d8b',type:'dotted',width:1
                        }
                    },
                    splitArea:{
                        show:true,
                        areaStyle:{
                            color:['rgba(205,92,92,0.3)','rgba(225,215,250,0.3)']
                        }
                    }
                },
                {
                    type:'value',
                    splitNumber:10,
                    axisLabel:{
                        formatter: function (value){
                            return  value  + '℃'
                        }
                    },
                    splitLine:{
                        show:false
                    }
                }
            ],
            series:[
                {
                    name:'蒸发量',type:'bar',
                    data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]
                },
                {
                    name:'降水量',type:'bar',
                    data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3]
                },
                {
                    name:'最低气温',type:'line',
                    smooth:true,
                    yAxisIndex:1,
                    data:[2.0,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23.0,16.5,12.0,6.2]
                },
                {
                    name:'最高气温',
                    smooth:true,
                    type:'line',
                    yAxisIndex:1,
                    data:[12.0,12.2,13.3,14.5,16.3,18.2,28.3,33.4,31.0,24.5,18.0,16.2]
                }
            ]
    };
    myChart.setOption(option);
</script>
</body>
</html>