从如何使用echart,接口,option和echart如何工作四个方面学习了echart。
如何使用:(模板项目)上周的10+微博用户可视化主要是模板项目
1.引入一个模块加载器,esl.js或者require.js
2.为ECharts准备一个具备大小宽高的Dom
3.为模块加载器配置echart的路径,连接到echarts.js定义所需图标路径。
require.config({
path:{
echarts:‘./js/echarts‘,
‘echarts/chart/bar‘:‘./js/echarts‘,
‘echarts/chart/line‘:‘./js/echarts‘
}});
4.动态加载echarts然后在回调函数中开始使用,不管是单文件还是包引入都需要显式按需加载图表。
require(
[
‘echarts‘,
‘echarts/chart/bar‘,
‘echarts/chart/line‘
],
function(ec){
var dom=document.getElementById(‘main‘);
var myChart=ec.init(dom);
var option={.....} 拷option当模板?
myChart.setOption(option); })
(非模板项目)
1.直接script标签式引入
2.为ECharts准备一个具备大小宽高的Dom
3.echarts和zrender被写入为全局接口直接使用
var myChart=echarts.init(document.getElementById(‘main‘));
myChart.setOption({
tooltip:{
trigger:‘axis‘
},
legend:{
data:[‘蒸发量‘,‘降水量‘]}
}),
4.拷option当模板
接口:
初始化(实例化)唯一接口方法:init
通过require获得echarts接口后可通过init方法实例化图表,执行init时传入一个具备大小的dom节点后即可实例化出图表对象,echarts实现为多实例的,同一页面可多次init出多个图表。