echarts数据可视化系列：柱状图

最新推荐文章于 2024-07-26 20:46:33 发布

旭陌小生

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量4.4k

点赞数 5

分类专栏： echarts 数据可视化

本文链接：https://blog.csdn.net/qq_37953045/article/details/120666432

版权

echarts javascript

echarts 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

数据可视化

9 篇文章 0 订阅

订阅专栏

绘制柱状图及配置

引入echarts文件

<script src="/lib/echarts.min.js"></script>

给echarts定义一个有宽高的容器

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

3.基于定义好的容器，初始化echarts实例

 let mEcharts = echarts.init(document.querySelector('main'))

图表的配置项及数据

		// echarts配置
        let option = {
        // 图表的标题
            title: {
                text: '成绩表',
                textStyle: {
                    color: 'red'
                },
                // 标题的位置
                top: '0px',
                left: '10px',
                // 标题的边框及样式
                borderWidth: 1,
                borderColor: 'gray',
                borderRadius: 3
            },
            // 提示框组件
            tooltip: {
            	// 触发的类型：1.item数据项图形中进行触发，2.axis坐标轴进行触发
                trigger: 'axis',
                // 触发的条件：1.mousemove鼠标移动时触发，2.click鼠标点击时触发
                triggerOn: 'click',
                // 提示框内容容器，展示图形的一些内容，具体配置请参考官网：https://echarts.apache.org/zh/option.html#tooltip.formatter
                formatter: '{b}的{a}成绩是{c}',
                formatter: function(age) {
                    return age[0].name + '的' + age[0].seriesName + '成绩是' + age[0].value + '<br />' +
                    age[1].name + '的' + age[1].seriesName + '成绩是' + age[1].value
                }
            },
            // 工具栏
            toolbox: {
            // 各个工具栏的配置
                feature: {
                	// 把图形保存为图片
                    saveAsImage: {},
                    // 配置项还原到初始状态
                    restore: {},
                    // 数据区域的缩放
                    dataZoom: {},
                    // 数据视图的工具，可以查看图表中的数据以及编辑动态更新数据
                    dataView: {},
                    // 图形类型的动态切换
                    magicType: {
                        type: ['bar', 'line']
                    }
                }
            },
            // 图例组件，可以展示不同系列的标记，颜色及名字，点击图例控制哪些系列不展示
            legend: {
                type: 'plain',
                //系列的名称，与series中的系列名称name同步
                data: ['语文', '数学'],
                left: '100px'
            },
            // 直角坐标系X轴的数据
            xAxis: {
                data: ['小明', '小樱', '小颖', '小英', '小红', '小翠']
            },
            // 直角坐标系Y轴的数据，类型默认value数值轴可以不写，数据可以写在series中
            yAxis: {},
            // 系列组件
            series: [
                {
                	// 系列名称
                    name: '语文',
                    // 图形的类型
                    type: 'bar',
                    // Y轴的数据
                    data: ['90', '88', '94', '84', '76', '65'],
                    // 图形上的文本标签，可以用来说明图形的数据信息
                    label: {
                        show: true,
                        // 标签旋转，正值逆时针
                        rotate: 60
                    },
                    // 最大值组件
                    markPoint: {
                       data: [
                           {
                            name: '最大值',
                            type: 'max'
                           },
                           {
                               name: '最小值',
                               type: 'min'
                           }
                       ]
                    },
                    // 平均值组件
                    markLine: {
                        data: [
                            {
                                name: '平均值',
                                type: 'average'
                            }
                        ]
                    }
                },
                {
                    name: '数学',
                    data: ['66', '75', '98', '88', '82', '56'],
                    type: 'bar',
                    label: {
                        show: true
                    }
                }
            ]
        }
        // 使用刚指定的配置项及数据
        mEcharts.setOption(option)

最终展示效果：

旭陌小生

关注

5
点赞
踩
40

收藏

觉得还不错? 一键收藏
打赏
2
评论
echarts数据可视化系列：柱状图

绘制柱状图及配置引入echarts文件<script src="/lib/echarts.min.js"></script>给echarts定义一个有宽高的容器<body>  <div id="main" style="width: 600px;height:400px;"></div></body>3.基于定义好的容器，初始化
复制链接

扫一扫