Echarts学习入门

最新推荐文章于 2024-03-25 10:15:00 发布

真的不想起床

最新推荐文章于 2024-03-25 10:15:00 发布

阅读量193

点赞数

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

本文链接：https://blog.csdn.net/weixin_45985175/article/details/120592761

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、快速上手

步骤1：引入 echarts.js 文件

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

echarts是一个 js 的库，得先引入这个库文件

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

这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里

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

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

在这个步骤中, 需要指明图表最终显示在哪里的DOM元素

var myChart = echarts.init(document.getElementById('main'))

步骤4：准备配置项

这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的

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

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

<!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>01</title>
    <script src="lib/echarts.min.js"></script>
    
</head>
<body>
    <div style="width: 600px;height: 400px"></div>
    <script>
        var mCharts=echarts.init(document.querySelector('div'));
        var option={
            xAxis:{
                type:'category',
                data:['小明','小红','小王']
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:[70,60,80]
                }
            ]
        }
        mCharts.setOption(option);
    </script>
</body>
</html>

2、配置项

xAxis

直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
呈现

yAxis

直角坐标系中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去series 下找数据进行图表的绘制

series

系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

更多配置看官方文档
配置项手册
https://echarts.apache.org/zh/option.html#title

3、柱状图

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

3.1、基本配置

<!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="lib/echarts.min.js"></script>
</head>
<body>
    <div style="height: 600px;width: 400px;"></div>
    <script>
        var mCharts=echarts.init(document.querySelector('div'));
        var xData=["小明","小强","小王","小红","小蓝","小紫"];
        var yData=[88,67,89,77,97,90];
        var option={
            xAxis:{
                type:"category",
                data:xData
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:yData
                }
            ]
        }
        mCharts.setOption(option);
    </script>
    
</body>
</html>

在这里插入图片描述

3.2、标记

3.2.1、最大值、最小值、平均值

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

series: [
{
......
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
}
}
]

<!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="lib/echarts.min.js"></script>
</head>
<body>
    <div style="height: 600px;width: 400px;"></div>
    <script>
        var mCharts=echarts.init(document.querySelector('div'));
        var xData=["小明","小强","小王","小红","小蓝","小紫"];
        var yData=[88,67,89,77,97,90];
        var option={
            xAxis:{
                type:"category",
                data:xData
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:yData,
                    markPoint:{
                        data:[
                            {
                                type:'max',
                                name:'最大值'
                            },
                            {
                                type:'min',
                                name:'最小值'
                            }
                        ]
                    },
                    markLine:{
                        data:[
                            {
                                type:"average",
                                name:'平均值'
                            }
                        ]
                    }
                }
                
            ]
        }
        mCharts.setOption(option);
    </script>
    
</body>
</html>

在这里插入图片描述

3.2.2、数值显示 label

series: [
{
......
label: {
show: true, // 是否可见
}
}
]

在这里插入图片描述

3.2.3、柱宽度 barWidth

series: [
{
......
barWidth: '30%' // 柱的宽度
}
]

在这里插入图片描述

3.2.4、横向柱状图

所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为value , yAxis 的 type 设置为 category , 并且设置 data 即可

var option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xDataArr
},
series: [
{
type: 'bar',
data: yDataArr
}
]
}

在这里插入图片描述

真的不想起床

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts学习入门

1、快速上手步骤1：引入 echarts.js 文件<script src="js/echarts.min.js"></script>echarts是一个 js 的库，得先引入这个库文件步骤2：准备一个呈现图表的盒子这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里<div id="main" style="width: 600px;height:400px;"></div>步骤3：初始化 echarts
复制链接

扫一扫

专栏目录