【Echarts】通过柱状图实例，一文让你学会Echarts的基础使用！！！

最新推荐文章于 2024-06-25 15:34:07 发布

Milk595

最新推荐文章于 2024-06-25 15:34:07 发布

阅读量1.2k

点赞数 2

分类专栏： ECharts 文章标签： ECharts 柱状图数据可视化

本文链接：https://blog.csdn.net/weixin_43352901/article/details/108453015

版权

本文通过一个柱状图实例详细讲解Echarts的基础使用，包括获取Echarts、设置DOM容器、初始化实例、配置title、series、legend、grid、xAxis和yAxis等关键选项，帮助读者轻松入门数据可视化。

摘要由CSDN通过智能技术生成

通过柱状图实例，一文让你学会Echarts的基础使用！！！

先看效果：

在这里插入图片描述

获取Echarts

在这里插入图片描述

文件目录

在这里插入图片描述

引入Echarts

通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
</html>

绘制图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main" style="width: 1710px; height: 670px"></div>
</body>

然后就可以通过echarts.init方法初始化一个 echarts 实例并通过setOption方法生成一个柱状图，下面是代码步骤拆分。

title

标题组件，包含主标题和副标题

title: {
   
    text: '新增课本', // 主标题文本
    show: true, // 是否显示标题组件
    textStyle: {
   
        color: '#6699ff',
        fontSize: 36,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 400,
    },
    top: '42',
    left: '40'
}

未加top/left时：
在这里插入图片描述
加了top/left时：

在这里插入图片描述
title属性详情请看:https://echarts.apache.org/zh/option.html#title

series

系列列表。每个系列通过 type 决定自己的图表类型

series: [ // 系列列表。每个系列通过 type 决定自己的图表类型
    {
   
        name: '新增数量', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
        type: 'bar', // 柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型
        data: values, // (数组) 单个数据项的数值 
        xAxisIndex: 0, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用
        yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
        barWidth: '30px', // 柱条的宽度，不设时自适应
        itemStyle: {
    // 自定义特殊 itemStyle，仅对该数据项有效--数据项样式
            color: '#6482ff',
            barBorderRadius:[10,10,0,0] // 数据项图形的边框圆角样式
        },
        label: {
    // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
            show: false // 是否显示标签，在数据项上
        }
    }
]