前端数据可视化—Echart——笔记整理

Thaley

已于 2022-02-09 16:17:42 修改

阅读量3.2k

点赞数 5

分类专栏：前端学习笔记文章标签： echarts 前端数据可视化

于 2022-02-03 13:52:14 首次发布

本文链接：https://blog.csdn.net/Thaley/article/details/122775603

版权

本文档整理了Echarts的使用，包括Echarts的介绍、常见数据可视化库比较、柱状图的创建与定制，以及如何让图表自适应屏幕。Echarts是一个高性能的JavaScript数据可视化库，适用于PC和移动设备，提供了丰富的图表类型和高度可定制的选项。

摘要由CSDN通过智能技术生成

前端数据可视化—Echart——笔记整理（黑马课程）

4.1 修改柱形为圆角以及柱子宽度（在series配置项里设置）

4.2 更换对应数据

4.3 让图表随着屏幕的变化而自适应（只需两行代码）

1.Echarts介绍

官网：Apache ECharts

1.1 常见的数据可视化库：

D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

1.2 什么是echarts

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制。
- 折线图、柱状图、散点图、饼图、K线图

官网地址：Apache ECharts

1.3 使用步骤：

1.引入echarts 插件文件到html页面中

2.准备一个有宽、高的DOM容器

3.初始化echarts实例对象

4.指定配置项和数据(option)

5.将配置项设置给echarts实例对象

1.引入echarts.min.js 插件、flexible.js、jquery.js、文件到html页面中

下载：：下载 - Apache ECharts

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

2.准备一个有宽、高的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

3.初始化echarts实例对象

var myChart = echarts.init(document.getElementById('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);

整体的代码如下：

    <title>Echarts使用</title>
    <!-- 第一步：引入echarts.js文件 -->
    <script src="js/echarts.min.js"></script>
    <style>
        /* 第二步：准备一个有宽、高的DOM容器 */
        
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        //第三步：初始化实例对象  echarts.init(dom容器)
        var Chart = echarts.init(document.querySelector(".box"));
        // 第四步：指定配置项和数据
        var option = {  
            xAxis: {