首先,大家可以去官网详细了解下,这个插件十分好用,兼容性也很好,这里我说的可能比较基础,官网入口:echarts.baidu.com
他的诱惑力(特性):
1:丰富的图表类型
2:多个坐标系的支持
3:移动端的优化
4:深度的交互式数据探索
5:大数据量的展现
6:多维数据的支持以及丰富的视觉编码手段
7:动态数据
8:绚丽的特效
一:首先我们需要在html文档里新建div容器需要装载图表

二:那就是需要引入我们echarts.min.js这个文件

三:新建js文件,自己写配置啦


还有很多配置,根据业务需求自行配置,闲下来可以研究下。
配置中有很多data数据都死的,可以新建空数组,动态把获取的数据添加进去

新数据可以这样加入,我只加了部分,

四:最后展示效果

网友评论