在前段时间的开发中,我通过chart.js实现了大部分的图表效果,苦于chart.js的英文文档和欠缺美感的动画效果,我开始了我的Echart的学习。 在学习过程中,由于有了chart.js的学习基础,基本上学习过程也比较顺利。这里介绍一下Echart创建图标的基本流程。
第一步,同chart.js一样去获取对象
var element = document.getElementById("id")
var ctx = echarts.init(element);
这里可以简写为
var ctx = echarts.init(document.getElementById("id"));
但是由于我们有时候还是需要用到这个element对象的,所以多写一步也无妨
第二步
var option={}
这里不同chart.js的是,这里只需要创建一个option对象就行了,所有的内容都包含在内
至于用法的话,完全可以通过看Echart的官方文档去学,百度创建的Echart具备官方文档以及很全面的动画效果展示及代码,非常的友好
这里放上官方网站
https://echarts.apache.org/examples/zh/index.html#chart-type-lines3D
Echart的下载网站
https://www.jsdelivr.com/package/npm/echarts?path=dist
最后一步,创建图表对象
ctx.setOption(option);
这里放一个刚学的绑定点击事件的重新加载功能
ctx.on('click', function (params) {
console.log(params);
ctx.clear();
ctx.setOption(option);
});
至于怎么去修改对象属性的话,只要对option一层一层往下找就可以实现了
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!