2023-01-02 Echarts学习笔记(一) 基础概念和应用示例:折线图

前端OnTheRun

已于 2023-01-03 19:21:04 修改

阅读量211

点赞数

分类专栏： Echarts 文章标签： html Echarts echarts

于 2023-01-02 21:21:07 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/128525247

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

0.什么是Echarts?

ECharts.js是百度出品的一个开源 Javascript 数据可视化库

一个使用 JavaScript 实现的开源可视化库，
可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），
底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

1.常见使用场景

折线图、柱状图、散点图、饼图、K线图

2.使用Echarts的基本步骤

引入echarts 插件文件到html页面中
准备一个具备大小的DOM容器
初始化echarts实例对象
指定配置项和数据(option)
将配置项设置给echarts实例对象

3.应用示例:做一个折线图

<body>
    <!-- 1.准备带有宽高的DOM容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
<!-- 2.引入echarts插件 -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script>
    var main = document.getElementById("main");
    // 3.初始化echarts实例对象
    var myChart = echarts.init(main);
    // 4.指定配置项和数据(option)
    var option = {
        xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
            type: "value"
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    // 5.将配置项设置给echarts实例对象
    myChart.setOption(option);
</script>

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

4.参考资料

https://www.bilibili.com/video/BV1v7411R7

前端OnTheRun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2023-01-02 Echarts学习笔记(一) 基础概念和应用示例:折线图

ECharts.js是百度出品的一个开源 Javascript 数据可视化库一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。1.常见使用场景折线图、柱状图、散点图、饼图、K线图2.使用Echarts的基本步骤引入echarts 插件文件到html页面中准备一个具
复制链接

扫一扫