Echarts入门--基本结构
来学Echarts
Chiffon
Wednesday, May 06, 2015
Echarts 入门简析
使用实例的代码理解echarts的基本构成(结构),见Echarts入门中的标签式单文件引入
标签式单文件引入
标签式单文件引入会把echarts里面的所有文件都引入到图表里面,载入会慢一些…
- 准备一个具备大小的DOM(div),可以只有height
<div id="main" style="height:400px"></div>
- 标签式单文件引入
- 用init方法将options传入div
var myChart = echarts.init(document.getElementById(‘main’));
- 用setOption传入mycharts数据
myChart.setOption(option);
自己刷一遍代码:
<div id = "main" style = ‘height:400px’></div>
<script src = "http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type = "text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var options = {
tooltip: {
show: true
},
legend: {
data:[‘销量’]
},
xAxis : [
{
type : ‘category’,
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : ‘value’
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
myChart.setOption(options);
</script>效果
模块化单文件引入
模块化单文件引入需要自己定义路径,并在这个路径下选择你需要使用的echarts模块,当然,之前标签式单文件引入所有的步骤也是需要的.
- 准备一个具备大小的DOM(div),可以只有height
<div id="main" style="height:400px"></div>
- Echarts单文件引入
- 配置引用路径
require.config({ paths: { echarts: ‘http://echarts.baidu.com/build/dist' } });
- 用require函数调用模块和需要的函数
require([module],function)- 其中
[module]是’echarts’和相关并需要的图模块,比如echarts/chart/bar function是一个无名函数,对应之前标签式单文件引入的init,setOption.
再自己手刷一遍模块单文件引入的代码:
<div id = "main2" style = "height:400px"></div>
<script src = "http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type = "text/javascript">
require.config({
paths:{
echarts: "http://echarts.baidu.com/build/dist"
}
});
require([
‘echarts’,
‘echarts/chart/bar’
],
function(ec) {
var myChart = ec.init(document.getElementById("main2"));
var options = {
tooltip: {
show: true
},
legend: {
data:[‘销量’]
},
xAxis : [
{
type : ‘category’,
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : ‘value’
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
myChart.setOption(options);
});
</script>