ECharts-柱状图使用

最新推荐文章于 2023-08-30 13:30:49 发布

CH_咯

最新推荐文章于 2023-08-30 13:30:49 发布

阅读量481

点赞数

分类专栏： JavaScript 文章标签： echarts echats柱状图可视化图表

本文链接：https://blog.csdn.net/weixin_43774460/article/details/103281445

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

ECharts可视化图表-柱状图总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>  // 引入echarts-cdn
</head>

<body>
    <div id="main" style="width: 600px;height:400px;margin:20px auto"></div>
</body>

</html>

<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 柱状图-指定图表的配置项和数据
    var option = {
        title: {
            text: '柱状图',              	// 标题      
            left: 'center',             	// 离容器左侧的距离数值可以为具体数值20,百分比20%,'left','center','right'
            top: 20,                    	// 离容器上侧的距离
            textStyle: {                	// 标题样式
                fontSize:18,
                color:'red',
            },
        },
        tooltip: {
            show:true,                      // 默认                      
            trigger: 'axis',                // 触发类型 item>饼图,散点图等,axis>柱状图,折线图等
            axisPointer : {                 // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'             // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            orient: 'horizontal',           // 图例列表的布局朝向 horizontal(默认)
            left:   'left',                 
            // formatter:function(name){    // 也可以使用回调展示自定义名称

            // },
            textStyle:{                     // 图例文本样式
                color:'#333',
                fontStyle: 12
            },
            itemGap:10,                     // 图例每项的间隔
            selectedMode:true,              // 图例选择的模式 禁用/启用
            icon:"circle",                  // 图例项的 icon
                                            
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']  // 图例数据
        },
        grid: {
            left: '3%',                     // grid 组件离容器左侧的距离
            right: '8%',
            bottom: '3%',
            containLabel: true              // 默认false,ture时防止标签溢出(标签长度动态变化时，可能会溢出容器或者覆盖其他组件)  
        },
        xAxis: [{
            show:true,                        // 是否显示X轴
            name:'X轴',                       // 坐标轴名称
            nameLocation:'end',               // 坐标轴名称显示位置
            type: 'category',                 // 坐标轴类型为类目轴。   
            data: ['周一', '周二', '周三', '周四', '周五'], // 坐标轴数据
            boundaryGap:true,                 // 坐标轴2侧留白,类目轴设置为ture/false 非类目轴['百分比','百分比']
            axisLine:{                        // 坐标轴轴线相关设置。
                lineStyle:{
                    color:'skyblue'           // 坐标轴线的颜色。
                }
            },
            axisLabel:{                       // 坐标轴刻度标签的相关设置。                       
                show:true,
                color:'#000',
                interval:'auto',              // 坐标轴刻度标签的显示间隔
            },
            axisTick:{                        // 坐标轴刻度标签的相关设置。                       
                show:true,                   
            },
            splitLine:{                       // 坐标轴在 grid 区域中的分隔线                       
                show:false,                        
                lineStyle:{
                    color:'red'
                }
            },
            inverse :false                    // 坐标轴反转
        }],
        yAxis: [{
            type: 'value',                    // 坐标轴类型。适用于连续数据。                                   
            splitNumber:6                     // 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值.在类目轴中无效。    
        }],
        series: [{
                name: '直接访问',                    // 系列名称 
                type: 'bar',                        // 类型
                data: [320, 332, 301, 334, 390],    // 数据
                itemStyle:{                         // 柱条的颜色
                    color:new echarts.graphic.LinearGradient(0,0,1,0,[   // 渐变色
                        { offset:0,color:'#DF83FA' },{ offset:1,color:"#BE69EB" }])
                }
            },
            {
                name: '邮件营销',
                type: 'bar',
                stack: '广告',                      // 数据堆叠(同个类目轴上系列配置相同的stack值可以堆叠放置)
                data: [120, 132, 101, 134, 90]
            },
            {
                name: '联盟广告',
                type: 'bar',
                stack: '广告',
                data: [220, 182, 191, 234, 290]
            },
            {
                name: '视频广告',
                type: 'bar',
                stack: '广告',
                data: [150, 232, 201, 154, 190]
            },
            {
                name: '搜索引擎',
                type: 'bar',
                data: [862, 1018, 964, 1026, 1679],
                markLine: {                             // 图表标线
                    lineStyle: {                        // 标线样式
                        normal: {
                            type: 'dashed'              // 线类型
                        }
                    },
                    data: [
                        [{
                            type: 'min'                 // 数据最小值
                        }, {
                            type: 'max'                 // 数据最大值
                        }]
                    ]
                }
            },
            {
                name: '百度',
                type: 'bar',
                barWidth: 5,
                stack: '搜索引擎',                       //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置
                data: [620, 732, 701, 734, 1090]
            },
            {
                name: '谷歌',
                type: 'bar',
                stack: '搜索引擎',
                data: [120, 132, 101, 134, 290]
            },
            {
                name: '必应',
                type: 'bar',
                stack: '搜索引擎',
                data: [60, 72, 71, 74, 190]
            },
            {
                name: '其他',
                type: 'bar',
                stack: '搜索引擎',
                data: [62, 82, 91, 84, 109]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

在这里插入图片描述

CH_咯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts-柱状图使用

ECharts可视化图表-柱状图总结<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫