请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
大胆 发表于 2021-1-3 11:21:02 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
官网地点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
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )