【Echarts】柱状图

最新推荐文章于 2024-05-10 21:07:48 发布

别亦难�

最新推荐文章于 2024-05-10 21:07:48 发布

阅读量827

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_43806488/article/details/121605814

版权

echarts 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.ECharts的快速上手

ECharts 的入门使用特别简单, 5分钟就能够上手. 他大体分为这几个步骤

步骤1：引入 echarts.js 文件

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

步骤2：准备一个呈现图表的盒子

 <div id="charts" style="width: 500px; height: 300px;"></div>

步骤3：初始化 echarts 实例对象

 let myCharts = echarts.init(document.getElementById('charts'))

步骤4：准备配置项

 let option = {
            xAxis: {
                type: 'category',
                data: ['小明', '小红', '小王']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '语文',
                    type: 'bar',
                    data: [70, 92, 87],
                }
            ]
        }

步骤5：将配置项设置给 echarts 实例对象

 myCharts.setOption(option)

通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要,
一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,
其他的代码都是固定不变的.

完整代码

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/echarts.min.js"></script>
</head>

<body>
    <div id="charts" style="width: 500px; height: 300px;"></div>
    <script>
        let myCharts = echarts.init(document.getElementById('charts'))
        let option = {
            xAxis: {
                type: 'category',
                data: ['小明', '小红', '小王']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '语文',
                    type: 'bar',
                    data: [70, 92, 87],
                }
            ]
        }
        myCharts.setOption(option)
    </script>
</body>

</html>

2.相关配置讲解

xAxis
直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
呈现
yAxis
直角坐标系中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
series 下找数据进行图表的绘制
series
系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

注意: 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种: category 和 value , 如果 type
属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现. 如果 type 属性配置为 value ,
那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制

3.echarts 常见图表

3.1 柱状图

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/echarts.min.js"></script>
</head>

<body>
    <div id="charts" style="width: 500px; height: 300px;"></div>
    <script>
        //初始化图表
        let myCharts = echarts.init(document.getElementById('charts'))
        //准备x轴数据
        let xDataArr = ['小明', '小红', '小王', '小李', '小张']
        //准备y轴数据
        let yDataArr = [70, 92, 87, 60, 85]
        let option = {
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '语文',
                    type: 'bar', //type指定为bar 为柱状图
                    data: yDataArr,
                }
            ]
        }
        myCharts.setOption(option)
    </script>
</body>

</html>

在这里插入图片描述
柱状图的常用配置

  series: [
                {
                    name: '语文',
                    type: 'bar', //type指定为bar 为柱状图
                    data: yDataArr,
                    markPoint:{ //最大值  最小值
                        data:[
                            {type:'max',name:'最大值'},
                            {type:'min',name:'最小值'}
                        ] 
                    },
                    markLine:{ //平均值
                        data:[
                            {type:'average',name:'平均值'}
                        ] 
                    },
                    label:{ //数值显示
                       show:true, //是否显示
                       rotate:80   //旋转80度
                    },
                    barWidth:'30%', //柱子的宽度
                }
            ]

通用配置

title

 title: {
                text: "成绩", // 标题文字 
                textStyle: {
                    color: 'red'// 文字颜色  
                },
                borderWidth: 5, // 标题边框 
                borderColor: 'green', // 标题边框颜色
                borderRadius: 5, // 标题边框圆角
                left: 20, // 标题的位置
                top: 20 // 标题的位置 
            },

tooltip
tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框
- 触发类型: trigger 可选值 item/axis
- 触发时机: triggerOn 可选值有 mouseOver\click
- 格式化显示: formatter 详情参照官方文档
toolbox
toolbox 是 ECharts 提供的工具栏, 内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切
换五个工具

   let option = {
            toolbox: {
                feature: {
                    saveAsImage: {}, // 将图表保存为图片
                    dataView: {}, // 是否显示出原始数据 
                    restore: {}, // 还原图表 
                    dataZoom: {}, // 数据缩放
                    magicType: {
                        // 将图表在不同类型之间切换,图表的转换需要数据的支持
                        type: ['bar', 'line']
                    }
                }
            },
            }

图例
legend 是图例,用于筛选类别,需要和 series 配合使用

  //初始化图表
        let myCharts = echarts.init(document.getElementById('charts'))
        //准备x轴数据
        let xDataArr = ['小明', '小红', '小王', '小李', '小张']
        //准备y轴数据
        let yDataArr = [70, 92, 87, 60, 85]
        let yDataArr2 = [80, 95, 75, 63, 88]
        let option = {
            legend: {
                data:['语文', '数学']
            },
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '语文',
                    type: 'bar', //type指定为bar 为柱状图
                    data: yDataArr,
                },
                {
                    name: '数学',
                    type: 'bar', //type指定为bar 为柱状图
                    data: yDataArr,
                }
            ]
        }
        myCharts.setOption(option)