echart之柱状图

柱状图相关配置

  • xAxis：直角坐标系 中的 x 轴
  • yAxis：直角坐标系 中的 y 轴
  • series：系列列表。每个系列通过 type 决定自己的图表类型
  • 标记: 最大值 最小值 平均值
    markPoint、markLine
  • 显示: 数值显示 柱宽度 横向柱状图
    label、barWidth、更改x轴和y轴的角色
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>柱状图</title>
  <!--  1。引入echart.js文件-->
  <script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="height: 600px;width: 600px">

</div>
<script>

    //3。初始化echarts实力对象
    var mCharts = echarts.init(document.querySelector('div'));
    var xArrData = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'];
    var yArrData = [88, 92, 63, 77, 94, 80, 72, 86];

    //4。准备配置项
    var option = {
        title: {
            text: '成绩',
            textStyle: {
                color: 'red'
            }
        },
        xAxis: { //直角坐标系中的x轴
            // type: 'category', //类目轴
            type: 'value', //类目轴
            // data: xArrData
        },
        yAxis: {//直角坐标系中的y轴
            // type: 'value', //数值轴
            type: 'category', //数值轴
            data: xArrData
        },
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
                name: '语文',
                type: 'bar', //图标的类型
                markPoint: { //最大值
                    data: [
                        {
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine:{// 最小值
                    data:[
                        {
                            type:'average',
                            name:'平均值'
                        }
                    ]
                },
                label:{ //数值的位置展示
                    show:true,
                    rotate:60,
                    // position:'inside'
                    position:'bottom'
                },
                barWidth:'30%', //柱的宽度
                data: yArrData
            }
        ]
    }

    //5。将配置项设置给echarts实例对象
    mCharts.setOption(option);
</script>
</body>
</html>
posted @ 2022-08-03 00:13  King-DA  阅读(621)  评论(0)    收藏  举报