Echarts 柱状图

2022-07-22 02:03:54 阅读：140 来源： 互联网

标签：name 数据 type 柱状图 arg data 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>

标签：name,数据,type,柱状图,arg,data,Echarts
来源： https://www.cnblogs.com/ajaXJson/p/16504190.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Echarts 柱状图