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.       

复制代码

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

1.    
2.            .box {            width: 400px;            height: 400px;            background-color: green;        }   

复制代码

3、初始化echarts实例对象

复制代码

4、指定相关设置和数据

1. /* 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实例对象

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

复制代码

查察实现效果：

做到这一步就已经学会了快速入门的根本使用了！！！
背面还会写更多博客分享ECharts的相关内容

来源：https://blog.csdn.net/qq_43137699/article/details/112061888
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！