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

news2024/10/5 15:43:45

文章目录

- - - 0.什么是Echarts?
    - 1.常见使用场景
    - 2.使用Echarts的基本步骤
    - 3.应用示例:做一个折线图
    - 4.参考资料

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>