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上下载

  
    

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

   

3、初始化echarts实例对象

 

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数据可视化,前端,数据可视化)