一、相关js文件的引入
这里我们采用标签式引入文件的方式,我们引入两个js文件,一个是esl.js文件和一个echarts.js。
<script src="js/esl.js" type="text/javascript"></script> <script src="js/echarts.js" type="text/javascript"></script>
二、ECharts对象的初始化
通过文件esl.js内封装好的require获得echarts接口后可实例化图表,echarts接口仅有一个方法init,执行init时传入一个具备大小(如果没有指定容器的大小将会按照0大小来处理即无法看到图表)的dom节点(width、height可被计算得到即可,不一定可见)后即可实例化出图表对象,图表库实现为多实例的,同一页面可多次init出多个图表。图表实例可用方法见方法,引入ECharts后的的初始化代码如下:
// 作为入口 require( [ 'echarts', 'echarts/chart/pie' ], //回调函数内执行图表对象的初始化 function(ec) { var myChart = ec.init(document.getElementById('main')); myChart.setOption({...}); } ); // ----------------------------- // 非入口或再次使用,图表已被加载注册 require('echarts').init(dom).setOption({...}); // 如果需要再次使用ECharts的图表实例,建议你还是保存init返回的图表实例吧 var myChart = require('echarts').init(dom); myChart.setOption({...});
如果你不习惯于模块化你也可以这样进行初始化:
//定义一个全局的图表对象 var ECharts; require(['echarts'], function(ec){ //将对象保存下来 ECharts = ec; }); // 是的,把echarts加载后保存起来作为命名空间使用 //----------- //接下来我们就可以进行图表的init操作了 var myChart = ECharts.init(dom); myChart.setOption({....});
init方法说明如下:
{ECharts} init |
{dom} dom, {string | Object =}theme |
初始化接口,返回ECharts实例,其中dom为图表所在节点,theme为可选的主题,内置主题('macarons', 'infographic')直接传入名称,自定义扩展主题可传入主题对象。如: var myCharts = echarts.init(document.getElementById('main'), 'macarons'); |
注意事项:
1、再实例化之前请确保相关的js文件已经引入且路径正确;
2、在执行图表对象渲染方法init(dom)的时候,记住这里的dom是一个页面容器元素的对象,请确保这个元素对象是存在的,否则执行了init(dom)方法时会报出尚未定义的错误;
3、dom元素一定要指定其大小,关于元素的大小我么可以通过css进行设置:
<div id="main" style="width:400px;height:300px;"></div>
也可以采用动态的javascript代码设置其大小属性值。
相关推荐
相关说明地址: vue 中添加 echarts ,然后在 vue 中简单使用一些 echarts中常用的图表,包括一些动态的图表、3D的图表等 ,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。
居于echarts酷炫的大数据统计可视化图表 可用于大数据看板
主要是集成一些Axure中关于图表的展示部分,在实际的设计中用处很是广泛,包括一些柱状图,饼图,折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分,在实际的设计中用处很是广泛,包括一些柱状图...
SpringBoot+MongoDB+Echarts图表数据可视化 SpringBoot+MongoDB+Echarts图表数据可视化
18个Echarts数据可视化图表案例,每个案例都有代码注释,简单易懂。 还有三套echarts可视化大屏模板,案例下载后在编辑器内打开html,可以根据需求修改样式和数据,学习echarts绘图,也可以制作新的数据可视化大屏。
Echarts数据可视化图表案例:包括柱图,饼图,折线图,地图等数据展示图表;案例下载后直接使用webstrom或idea打开,在编辑器内打开html
手机端使用echarts选项卡切换数据图表,圆环图,柱状图,折线图
通过echarts.js文件,简单设置一些图表。。。。。。。
echarts图表处理最新版本,5.3.2,新增了多坐标轴刻度自动对齐、tooltip 数值格式化、地图投影等社区中期盼已久的特性
使用window.onresize let myChart = echarts.init(document.getElementById(dom)) window.onresize = function () { myChat.resize() } 优点:可以根据窗口大小实现自适应 缺点: 多个图表自适应写法比较麻烦...
echarts实现地图以及半圆图表
功能:可以选择一个固定数据格式的excel文件,...用到:xlsx.js、echarts.js 更新:2019年7月1日,更新支持饼图,新版本V2.3,csdn好像不能直接更新附件,如有需要直接到我上传的文件这里,下载最新的版本即可。
create ( { // svg font size fontSize : '12px' , // render mode // default: use global document to init echarts // thread: use workthread to isolate echarts global context mode : 'default'} ) ;...
echarts图表导出到excel中的解决方法,做个备忘录,以防忘记
echarts图表点击事件:折线图点击纵向区域获取所有点的数据,已经能正式使用,可以下载看看,做参考。
echarts-java 通过phantomjs java后台生成echats图表,echartspoi相关jar包及phantomjs都在压缩包内
vue项目创建简单echarts图表 运行过程: 1、npm install 2、npm install echarts --save 3、npm run dev
根据Excel表格数据生成ECharts图表,随便一个浏览器就可以运行。 功能: 可以选择一个固定数据格式的excel文件,根据excel文件的数据,以平铺或堆叠的形式,生成对应的线图或柱状图或饼图。可保存图片到本地。 用到...
jQuery+Echarts图表插件实现按年月数据统计柱状图表代码,按年月分类的访客数据统计分布图表实例代码。
解压后找到文件夹:echarts-2.2.7 原码有柱状图表实例,支持IE与谷歌浏览器且当你改变窗口大小Echats会自适应窗口大小。 echarts插件引用路径:<script src="echarts-2.2.7/doc/example/...