随笔- 149 文章- 0 评论- 0 阅读- 27632

Echarts 柱状图

<!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>Document</title>
    <!-- 1.引入echarts.js文件 -->
    <script src="lib/echarts.min.js"></script>

</head>

<body>
    <!-- 2.呈现图表的盒子 -->
    <div style="width:600px;height: 400px;"></div>
    <script>
        // 3.初始化echarts实例对象
        // 参数，dom，决定图表最终呈现的位置
        var mCharts = echarts.init(document.querySelector('div'))
        // 4.准备配置项
        var option = {
            // 标题
            title: {
                text: '成绩',
                link: 'http://www.baidu.com',
                textStyle: {
                    color: 'red',
                },
                // 标题边框
                borderWidth: 5,
                borderColor: 'blue',
                borderRadius: 5,
                // 标题位置
                left: 10,
                top: 10
            },

            //X轴是category竖向数据，Y轴是category横向数据
            // x轴
            xAxis: {
                type: 'category',
                data: ["小明", "小红", "小王", "小绿", "小黑", "小白"]
                
            },
            // y轴
            yAxis: {
                type: 'value',

            },
            //表头数据筛选
            legend:{
                data:['语文','数学']
            },
            // 轴数据
            series: [{
                name: '语文',
                // 柱状图
                type: 'bar',
                // 数据标注
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大的值'
                    }, {
                        type: 'min',
                        name: '最小的值'
                    }],
                },
                // 平均线
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                },
                // 每个分值的呈现
                label: {
                    show: true,
                    // 数据旋转
                    rotate: 60,
                    // 数据位置
                    position: 'top',
                },
                barWidth: '30%',
                data: [70, 92, 87, 40, 99, 88]
            }, {
                name: '数学',
                // 柱状图
                type: 'bar', 
                data: [80, 82, 97, 80, 79, 38]
            }],
            // 鼠标移入出发提示
            tooltip: {
                // 触发位置 trigger
                // trigger:'item',
                trigger: 'axis',
                // 触发方式
                // triggerOn:'click',
                // 提示内容
                //{a}系列名称{b}类目值{c}数值
                // formatter:'{b}的{a}成绩是{c}'
                //函数形式
                formatter: function (arg) {
                    return arg[0].name + '的' + arg[0].seriesName + '成绩是:' + arg[0].data
                }
            },

            toolbox: {

                feature: {
                    //导出图片
                    saveAsImage: {},
                    //切换原始数据视图或修改数据
                    dataVuew: {},
                    //重置还原数据
                    restore: {},
                    //区域缩放
                    dataZoom: {},
                    magicType: {
                        type: ['bar']
                    }

                }
            }
        }
        // 5.将配置项设置给echarts实例对象
        mCharts.setOption(option)
    </script>
</body>

</html>