echarts学习
echarts学习
Marlon520 发表于1年前
echarts学习
  • 发表于 1年前
  • 阅读 33
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

引入ECharts

1:模块化包引入

只需要配置好packages路径指向src即可

//from echarts example require.config({ packages: [ { name: 'echarts', location: '../../src', main: 'echarts' }, { name: 'zrender', location: '../../../zrender/src', // zrender与echarts在同一级目录 main: 'zrender' } ] });

 

2:模块化单文件引入(推荐)

  • dist(文件夹) : 经过合并、压缩的单文件
    • echarts.js : 这是包含AMD加载器的echarts主文件,需要通过script最先引入
    • chart(文件夹) : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件,根据应用需求可实现图表类型按需加载
      • line.js : 折线图(如需折柱动态类型切换,require时还需要echarts/chart/bar)
      • bar.js : 柱形图(如需折柱动态类型切换,require时还需要echarts/chart/line)
      • scatter.js : 散点图
      • k.js : K线图
      • pie.js : 饼图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/funnel)
      • radar.js : 雷达图
      • map.js : 地图
      • force.js : 力导向布局图(如需力导和弦动态类型切换,require时还需要echarts/chart/chord)
      • chord.js : 和弦图(如需力导和弦动态类型切换,require时还需要echarts/chart/force)
      • funnel.js : 漏斗图(如需饼漏斗图动态类型切换,require时还需要echarts/chart/pie)
      • gauge.js : 仪表盘
      • eventRiver.js : 事件河流图
      • treemap.js : 矩阵树图
      • venn.js : 韦恩图
  • source(文件夹) : 经过合并,但并没有压缩的单文件,内容同dist,可用于调试

//from echarts example <body> <div id="main" style="height:400px;"></div> /*包含AMD加载器的echarts主文件*/ <script src="./js/echarts.js"></script> <script type="text/javascript">

/*配置require.conifg*/ require.config({ paths: { echarts: './js/dist' } });

/*动态加载使用echarts*/ require( [ 'echarts', 'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('main')); var option = {}; myChart.setOption(option); } ); </script> </body>

总结:模块化单文件引入ECharts,你需要如下4步:

  1. 为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)
  2. 通过script标签引入echarts主文件
  3. 为模块加载器配置echarts的路径,从当前页面链接到echarts.js所在目录,见上述说明
  4. 动态加载echarts及所需图表然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require('echarts').init(dom)就行)

3:标签式单文件引入

需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持,如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错,解决的办法就是把标签移动到body内(后)

标签式引入环境中,常用模块的引用可通过命名空间直取,同模块化下的路径结构,如:

echarts.config = require('echarts/config'), zrender.tool.color = require('zrender/tool/color')

//from echarts example <body> <div id="main" style="height:400px;"></div> <script src="/js/dist/echarts-all.js"></script> <script> var myChart = echarts.init(document.getElementById('main')); var option = {}; myChart.setOption(option); </script> </body>

可以直接引入的单文件如下:

  • dist/echarts-all.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据
  • source/echarts-all.js : 未压缩,全图表,包含world,china以及34个省市级地图数据,可用于调试

初始化

通过require获得echarts接口(或者命名空间)后可实例化图表,echarts接口仅有一个方法init,执行init时传入一个具备大小的dom节点(width、height可被计算得到即可,不一定可见)后即可实例化出图表对象,图表库实现为多实例的

名称 参数 描述
{ECharts}init {dom} dom,
{string | Object =} theme
初始化接口,返回ECharts实例,其中dom为图表所在节点,theme为可选的主题,内置主题('macarons', 'infographic')直接传入名称,自定义扩展主题可传入主题对象。如:
var myCharts = echarts.init(document.getElementById('main'), 'macarons');

实例方法

实例指的就是接口init()返回的对象,即上述代码中的“myChart”,非get接口均返回自身self支持链式调用

名称 参数 描述
{self}setOption {Object} option, 
{boolean=}notMerge
万能接口,配置图表实例任何可配置选项(详见option),多次调用时option选项默认是合并(merge)的,merge的设计可以让setOption很方便的成为更新任何属性的万能方法,比如你仅需要改title文字,则仅需要:
    setOption({title : {text : '新标题'}}); 
如果不需要,可以通过notMerger参数为true阻止与上次option的合并,如多次setOption间数据改变、长度不一致等的场景。 

2.0.0起支持timeline组件,option中包含timeline(详见timeline)时每一个独立的option应该放置到命名为options的数组内,如myCharts.setOption({
timeline : {...},
options : [
{ // option1
title : {...},
series : [...]
},
{...}, // option2
...
]
});
{Object}getOption {void} 返回内部持有的当前显示option克隆(拷贝)。
{self} setSeries {Array} series, 
{boolean=}notMerge
数据接口,驱动图表生成的数据内容(详见series),效果等同调用 setOption({series : {...}}, notMerge)
{Object}getSeries {void} 返回内部持有的当前显示series克隆(拷贝),效果同 getOption().series
{self} addData 单组数据: 
{number} seriesIdx 
{number | Object}data 
{boolean=} isHead 
{boolean=} dataGrow
{string=}additionData 
多组数据添加: 
{Array} params
动态数据接口,try this (Line & Bar) » try this (Scatter & K) » try this (Pie & Radar) » 
seriesIdx 系列索引 
data 增加数据 
isHead 是否队头加入,默认,不指定或false时为队尾插入 
dataGrow 是否增长数据队列长度,默认,不指定或false时移出目标数组对位数据 
additionData 是否增加类目轴(饼图为图例)数据,附加操作同isHead和dataGrow 
多组数据添加时参数为: 
params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
{self} on {string} eventName, 
{Function}eventListener
事件绑定,事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用,当前版本支持事件有: 
-----------------------基础事件----------------------- 
REFRESH(刷新), 
RESTORE(还原), 
RESIZE(显示空间变化), 
CLICK(点击), 
DBLCLICK(双击), 
HOVER(悬浮), 
MOUSEOUT(鼠标离开数据图形), 
---------------------交互逻辑事件-------------------- 
DATA_CHANGED(数据修改,如拖拽重计算), 
DATA_VIEW_CHANGED(数据视图修改), 
MAGIC_TYPE_CHANGED(动态类型切换), 
TIMELINE_CHANGED(时间轴变化), 
DATA_ZOOM(数据区域缩放), 
DATA_RANGE(值域漫游), 
DATA_RANGE_SELECTED(值域开关选择), 
DATA_RANGE_HOVERLINK(值域漫游hover), 
LEGEND_SELECTED(图例开关选择), 
LEGEND_HOVERLINK(图例hover), 
MAP_ROAM(地图漫游), 
MAP_SELECTED(地图选择), 
PIE_SELECTED(饼图选择), 
FORCE_LAYOUT_END(力导向布局结束)

改变柱状图颜色:

series : [ { name:‘蒸发量‘, type:‘bar‘, data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = [ ‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘, ‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘, ‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘ ]; return colorList[params.dataIndex] } } } } ]

标签: 统计报表
共有 人打赏支持
粉丝 0
博文 37
码字总数 12967
×
Marlon520
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: