资讯专栏INFORMATION COLUMN

初试Echarts (一)

liangdas / 3101人阅读

摘要:是基于图画,可视化数据工具。如图更多的配置可以看官方的配置项手册,每一项都有很详细的说明。参考本地创建了文件用于储存数据然后异步请求。因为使用的,所以引入了一个。使用的非常好用。

Echarts.js是基于canvas 图画,可视化数据工具。

Echarts官方案例

官网下载Echarts
然后引入官网下载Echarts.js



  
    
    ECharts 入门示例--柱状图
    
  
  
    
   

如图:

更多的配置可以看官方的配置项手册,每一项都有很详细的说明。

异步读取数据 填充图表

正常来说我的图表的数据都是异步加载的 不会都是写死的 按照教程的异步加载 我的浏览器是报一个错误 大概意思就是访问的数据应该是以http: 开头的 不然读取不到
需要开启一个虚拟的服务器才可以读取本地的json数据 我是用node开启了一个本地服务器。
参考:https://www.cnblogs.com/leoxu...
本地创建了dataj.json 文件 用于储存数据,然后异步请求。
因为使用jquery的ajax,所以引入了一个jquery。
cnd使用的BootCND 非常好用。



  
    
    ECharts ajax加载
    
    
  
  

    
若在Chrome浏览器下 想要访问本地的data.json文件必须开起一个本地的虚拟服务器以http开头
原文博客地址:https://www.cnblogs.com/leoxuan/p/6513591.html

data.json

{"name":["Android","IOS","PC","Other"],"data1":[420,200,360,100],"data2":[460,260,390,200]}

如图:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97664.html

相关文章

  • 【2022考研最后40天】要注意这4个时间节点和这5件事情

    摘要:请考生务必妥善保管个人网报用户名密码及准考证居民身份证等证件,避免泄露丢失造成损失。自主划线院校会在月陆续公布初试成绩基本要求。锁定时间到达后,如招生单位未明确受理意见,锁定解除,考生可继续填报其他志愿。 ...

    jaysun 评论0 收藏0
  • 利用百度云发布node应用:初试

    摘要:一个百度开发者账号,而且里面应该要有钱哦。好了,应该就是上面那几个,下面我们开始,一在百度开发云上创建应用对了应该去哪里创建呢,走你。访问配置断线重连我们可以建一个这样的配置,应用启动时初始化。好了,现在我们可以体验百度云的乐趣了。 准备工作 一个基于nodejs的应用。 一个百度开发者账号,而且里面应该要有钱哦。 代码上传管理工具git或者svn。 好了,应该就是上面那几个,下面我...

    qqlcbb 评论0 收藏0
  • Django前后端分离之REST framework初试

    摘要:之前刚学时硬生生使用了静态资源和接口分离的方法,实际使用中肯定会非常不方便。于是发现了用于前后端分离,编写后台的框架。 之前刚学django时硬生生使用了静态资源和接口分离的方法,实际使用中肯定会非常不方便。于是发现了用于前后端分离,编写后台API的REST framework框架。这里做初步尝试官方文档看起来非常入门本次实践主要是根据官方文档步骤进行初步实践,其中加入一些自己学习时理...

    Scorpion 评论0 收藏0
  • Next.js 初试

    摘要:原文链接完喜欢的欢迎作者简介叶茂,芦苇科技前端开发工程师,代表作品口红挑战网红小游戏服务端渲染官网微信小程序粒子系统。擅长网站建设公众号开发微信小程序开发小游戏公众号开发,专注于前端领域框架交互设计图像绘制数据分析等研究。 title: next.js入门 tag:next.js, react 序章 服务端渲染 服务端渲染(SSR: Server Side Rendering),h...

    Markxu 评论0 收藏0
  • 初试小刀自我简历小程序

    摘要:附上个人简历小程序图,做得怎么样,大家可以微信扫描体验下,多指教下。小程序开发资源汇总小程序开发框架在里面找了找,和比较火,毕竟是腾讯官方的开源,故我选择了。 >>>点击获取更多文章

    netmou 评论0 收藏0

发表评论

0条评论

liangdas

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<