ECharts 数据可视化

殊迟

于 2022-03-27 18:03:49 发布

阅读量816

点赞数 2

分类专栏：大数据文章标签： echarts vscode

本文链接：https://blog.csdn.net/weixin_56814370/article/details/123777895

版权

大数据专栏收录该内容

14 篇文章 0 订阅

订阅专栏

ECharts绘制柱状图

准备工作：ECharts是百度推出ECharts用于数据可视化的工具。在ECharts官网下载源代码版本。

1.引入echarts.js库文件

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

2.绘制div容器并设置样式

<body>
<div id="main" style="width: 600px; height: 400px;background-color: aquamarine;"></div>
</body>

3.初始化容器

<script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
</script>

4.绘制简单柱状图

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px;background-color: aquamarine;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"))
        var option = {
            title: {
                text: '标题',
                subtext: '副标题'
            },
            tooltip:{},
            legend:{data:['图例']},
            xAxis: { data: ['11', '22', '33', '44', '55'] },
            yAxis: {},
            series: [{
                name: '嘻嘻',
                type: 'bar',
                data: [23, 55, 42, 54, 25]
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

5.结果;