Echarts学习笔记（一）

最新推荐文章于 2024-01-16 21:49:23 发布

秀才、遇到兵

最新推荐文章于 2024-01-16 21:49:23 发布

阅读量187

点赞数

分类专栏：前端 Echarts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_31457247/article/details/103176947

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Echarts

2 篇文章 0 订阅

订阅专栏

我的第一个图表

echarts下载地址：https://github.com/apache/incubator-echarts/tree/4.5.0

引入echarts.min.js

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

准备一个div，然后初始化echart并设置配置项和数据，显示图表

<div id="main" class="box"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        title: {text:'First Echarts'},
        tooltip:{},
        legend: {data:['访客量']},
        xAxis: {data:['1月','2月','3月','4月','5月','6月']},
        yAxis: {},
        series: [{
            name: '访客量',
            type: 'bar',
            data: [1000,5000,2400,1500,4200,1400]
        }]
    };
    myChart.setOption(option);

完整代码

<!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">
    <script src="./javascripts/echarts.min.js"></script>
    <style>
    .box {
        width:550px;
        height:300px;
        background:#EEEEEE;
    }
    </style>
    <title>First Echarts</title>
</head>
<body>
    <div id="main" class="box"></div>
    <script type="text/javascript">
    //初始化echart
    var myChart = echarts.init(document.getElementById('main'));
    //定义配置项和数据
    var option = {
        title: {text:'First Echarts'},
        tooltip:{},
        legend: {data:['访客量']},
        xAxis: {data:['1月','2月','3月','4月','5月','6月']},
        yAxis: {},
        series: [{
            name: '访客量',
            type: 'bar',
            data: [1000,5000,2400,1500,4200,1400]
        }]
    };
    //显示图表。
    myChart.setOption(option);
    </script>
</body>
</html>

效果图

参考链接：https://www.echartsjs.com/zh/tutorial.htm

秀才、遇到兵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Echarts学习笔记（一）

我的第一个图表引入echarts.min.js<script src="echarts.min.js"></script>准备一个div，然后初始化echart并设置配置项和数据，最后显示图标<div id="main" class="box"></div><script type="text/javascript">...
复制链接

扫一扫