Echars快速入门

最新推荐文章于 2024-08-13 18:13:57 发布

白小筠

最新推荐文章于 2024-08-13 18:13:57 发布

阅读量640

点赞数 3

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

本文链接：https://blog.csdn.net/qq_57907966/article/details/127047295

版权

Echarts 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

Echars快速入门

1、引入echarts.js文件

将echarts.js放到lib目录下

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

2、准备一个呈现图表的盒子

    <div style="width: 600px;height: 400px;"></div>

3、初始化echarts实例对象

    <script>
     var mCharts=echarts.init(document.querySelector('div'));
         </script>

4、准备配置项

 var option = {

        xAxis: {
            type: 'category',//类目轴

              data: ['张三', '李四', '王五']
            
        },
        yAxis: {
            type: 'value'//数值轴
        },
        series: {
            name: '语文',
            type: 'bar',//bar表示柱状图，line表示折线图，pie表示饼状图
            data: [80, 76, 90]
        }

    }

5、将配置项设置给echarts实例对象

 mCharts.setOption(option);

完整代码：

<!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>
</head>

<!-- 1、引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>

<body>
    <!-- 2、准备一个呈现图表的盒子 -->
    <div style="width: 600px;height: 400px;"></div>
</body>

<script>

    // 3、初始化echarts实例对象
    var mCharts = echarts.init(document.querySelector('div'));

    //4、准备配置项

    var option = {

        xAxis: {
            type: 'category',
            value: {
                data: ['张三', '李四', '王五']
            }
        },
        yAxis: {
            type: 'value'
        },
        series: {
            name: '语文',
            type: 'bar',
            data: [80, 76, 90]
        }

    }

    //5、将配置项设置给echarts实例对象

    mCharts.setOption(option);
</script>

</html>

实现效果：

在这里插入图片描述

常见效果：

1、标记：

最大值，最小值，平均值

markPoint：用来标记最大值，最小值

        series: {
            name: '语文',
            type: 'bar',
            markPoint:{
                data:[
                    {
                        type:'max',name:'最大值'
                    },
                    {
                        type:'min',name:'最小值'
                    }
                ]
            },


            data: [80, 76, 90]
        }

MarkLine：用来展示平均值的线

 series: {
            name: '语文',
            type: 'bar',
            markPoint:{
                data:[
                    {
                        type:'max',name:'最大值'
                    },
                    {
                        type:'min',name:'最小值'
                    }
                ]
            },
            markLine:{
                data:[
                    {type:'average',name:'平均值'}
                ]
            },


            data: [80, 76, 90]
        }

在这里插入图片描述

2、显示数值

在这里插入图片描述

在series中设置

               label:{
                    show:true,
                    rotate:60,   //旋转60度
                    position:'inside'  //使数值显示在柱里面--默认就是这个
                },

在这里插入图片描述