ECharts入门

越来越棒的hxg

已于 2022-02-10 14:59:13 修改

阅读量181

点赞数

文章标签： echarts javascript ecmascript

于 2022-02-10 14:50:28 首次发布

原文链接：https://blog.csdn.net/weixin_43883917/article/details/113886713?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164446385316780264056981%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=164446385316780264056981&biz_id=0&ut

版权

ECharts简介

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

ECharts入门实现步骤

下载并引入echarts.js文件（echarts.min.js）
准备一个具备大小的DOM容器
初始化echarts实例对象
指定配置项和数据（option）
将配置项设置给echarts实例对象

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 500px;
            background-color: rgb(188, 227, 236);
        }
    </style>
</head>
<body>
    <!-- 准备具有大小的dom容器 -->
    <div class="box"></div>

    <!-- 引入js文件 -->
    <script src="js/echarts.min.js"></script>
    <script>
        // 初始化实例对象echarts.init(dom容器)
        var myChart = echarts.init(document.querySelector(".box"));
            // 指定配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["邮票","纪念币","冰墩墩","雪融融","钥匙扣","背包"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5,20,49,44,23,12]
            }]
        };
        // 将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>