ECharts 自学笔记 | 直角坐标系

最新推荐文章于 2024-05-30 20:51:15 发布

SoI_

最新推荐文章于 2024-05-30 20:51:15 发布

阅读量73

点赞数

文章标签： echarts 笔记前端

本文链接：https://blog.csdn.net/m0_74062159/article/details/130856231

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直角坐标系的基本实现</title>
    <script src="./echarts.min.js"></script>
</head>


<body>
    <div id = 'main' style="width: 500px;height: 600px;"></div>


    <script>
        
        var myChart = echarts.init(document.getElementById('main'));
        var xDataArr = ['Tom','Cathy','John','Rue','Nate','Sol'];
        var yDataArr =  ['600','900','666','500','666','555'];


        var option = {

            //grid对象
            grid:{
                //显示
                show: true,
                //边框粗细
                borderWidth: 3 ,
                //边框颜色
                borderColor: 'darkred',

                //边框位置
                // left: 120 ,
                // top : 120 ,

                //边框大小(图标大小也会随之变动)
                // width: 300,
                // height:150
            },


            //更牛逼的区域缩放筛选器：dataZoom数组，里面可以存放多个对象：如x轴，y轴
            dataZoom:[
                {   
                    //type: slider(操纵滑杆) / inside(鼠标滚轮)
                    type:'slider',
                    //对x轴第0条进行操作
                    xAxisIndex:0
                },
                {
                    type:'slider',
                    yAxisIndex:0,
                    //默认起始位置(按照百分比) start end 
                    start:93,
                    end: 96
                }
            ],


            toolbox:{
                feature:{
                    //缩放功能
                    dataZoom:{}//空对象则可
                }
            },


            title: {
                 text: '直角坐标系',
                 textStyle:{
                 color:'yellowgreen',
                 fontSize:'20px'
                }
            },


            tooltip: {
                show:true ,//默认位true
                // trigger:'axis'
                trgger: 'item'
            },


            xAxis : {
                type : 'category',//设置为category：则必须配置data，以data为每一个位置
                data : xDataArr,
                //位置： bottom / top   (在坐标系的上or下)
                position:'top'
                
                
            },

            yAxis :{
                type:'value',    //设置为value: 则按照series中的data自动配置为数值轴
                //位置： left / right   （左/右）
                position:'right'
            },


            series :[{
                type:'bar',
                name :'语文成绩',
                data : yDataArr,
                color:'yellowgreen',
                //柱的宽度
                barWidth:'40%',
                //每条住的属性
                label:{
                    show:true,
                    rotate:30,
                    position:'inside'
                },
                //标记最大最小值
                markPoint: {
                    data:[
                        {
                            type:'max',name:'最大值'
                        },
                        {
                            type:'min',name:'最大值'
                        }
                    ]
                },
                //标记平均值
                markLine:{
                    data:[
                        {
                            
                            type:'average',name:'平均值'
                        }
                    ]
                }
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>