ECharts 自学笔记 | 柱状图

SoI_

已于 2023-05-24 21:45:52 修改

阅读量64

点赞数

文章标签： echarts 笔记前端

于 2023-05-24 20:49:49 首次发布

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

版权

<!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 = ['zhang','li','wang','run','xiao','mao'];
        var yDataArr =  ['600','900','666','500','666','555'];


        var option = {

            title: {
                 text: '柱状图',
                 textStyle:{
                 color:'yellowgreen',
                 fontSize:'20px'
                }
            },


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


            yAxis : {
                type : 'category',//设置为category：则必须配置data，以data为每一个位置
                data : xDataArr
            },


            xAxis :{
                type:'value'//对应series中对象的data一一对应，//设置为value: 则按照series中的data自动配置为数值轴
            },


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