简述Echart 基本用法使用

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

A-linWeb

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

阅读量1k

点赞数

文章标签： js 数据可视化 jquery

本文链接：https://blog.csdn.net/qq_48046110/article/details/111035323

版权

echarts常用配置梳理：
1.首先实例化一个echart实例，即 var echart = echarts.init(box);
2.通过setOption 配置echarts实例（配置是核心）
其中
title
title. text = ‘xxx’ 主标题文本
可以设置 left top right bottom 等控制文本标题位置
tooltip （提示文本框）

在这里插入图片描述
效果图：

legend（图例）
legend. data
如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如饼图 and 漏斗图等会取自 series.data 中的 name。
在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 引入核心脚本 -->
    <script src="echarts.min.js"></script>
</head>

<body>
    <!-- 2. 准备显示图表的容器 -->
    <div id="echarts-box" style="width: 100vw; height: 400px;"></div>

    <script>
        // 3. 编写业务逻辑，通过echarts.js把图片显示到容器中。
        var box = document.querySelector('#echarts-box');
        // 实例化一个echart实例。 initial初始化
        var echart = echarts.init(box);
        // 通过setOptions配置echart实例。
        echart.setOption({
            // 配置项是核心
            title: {
                text: '第一个 ECharts 实例'
            },
            type: "category",
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子","帽子"]
            },
            yAxis: {
                show: true,
                name: "y轴",
                nameLocation: 'middle',
                nameTextStyle: {
                    color: 'red',
                    fontStyle: 'italic',
                    fontSize: 20
                }
            },
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20,25]
            }]
        })

        // window.onresize = echart.resize;

        // 图表适应容器resize()
        window.onresize = function(){
            echart.resize();
        }
    </script>

</body>

</html>