ECharts:数据可视化解决方案通俗易懂快速入门

官网地址：https://www.echartsjs.com/zh/index.html

一、常见的数据可视化解决方案

D3.js 目前Web端评价最高的JavaScript可视化工具库（入门难）

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

HighCharts.js 国外的前端数据库可视化库，非商用免费，国外大公司使用较多

AntV 蚂蚁金服全新一代数据可视化解决方案

二、主要介绍、关系与区别

HighCharts与ECharts就像Office和WPS的关系

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

三、特点

• 是一个JS插件
• 性能好可流畅运行PC与移动设备
• 兼容主流浏览器
• 提供很多常用图表，且可定制。

四、ECharts的使用（快速入门）

1、引用echarts.js文件（echarts.min.js）

​ 下载地址：https://echarts.apache.org/zh/download.html -->

​ 选择版本-点击Dist从GitHub上下载

  <!-- 1、引入echarts -->
    <script src="js/echarts.min.js"></script>

2、必须准备一个具备初始宽高的DOM容器（比如DIV）

   <!-- 2、准备一个有大小的盒子 -->
<div class="box"></div>   
<style>
        .box {
    
            width: 400px;
            height: 400px;
            background-color: green;
        }
</style>
   

3、初始化echarts实例对象

 <script>
        /* 3、实例化 ECharts对象 传入dom的class属性 
        选择class为box的容器作为图表接下来放置的区域*/
        var myChart = echarts.init(document.querySelector(".box"));
  </script>

4、指定相关配置和数据

 /* 4、指定图标相关配置项 
     在Script标签中
	 先粘贴测试，
	 以后博客会对这些属性作详细解释说明*/

        var option = {
   
            title: {
   
                text: 'ECharts 入门示例'
            },
            tooltip: {
   },
            legend: {
   
                data: ['销量']
            },
            xAxis: {
   
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
   },
            series: [{
   
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

5、将配置内容给echarts实例对象

   /* 5、将配置项给Echarts实例对象 在Script标签中 */
        myChart.setOption(option);

查看实现结果：

做到这一步就已经学会了快速入门的基本使用了！！！

后面还会写更多博客分享ECharts的相关内容

转载：https://blog.csdn.net/qq_43137699/article/details/112061888