不写R包的分析师不是好全栈

Echarts入门--基本结构

    JsPy&Others


Echarts 入门简析


使用实例的代码理解echarts的基本构成(结构),见Echarts入门中的标签式单文件引入



标签式单文件引入


标签式单文件引入会把echarts里面的所有文件都引入到图表里面,载入会慢一些…



  1. 准备一个具备大小的DOM(div),可以只有height



  • <div id="main" style="height:400px"></div>




  1. 标签式单文件引入






  1. 用init方法将options传入div



  • var myChart = echarts.init(document.getElementById(‘main’));



  1. 用setOption传入mycharts数据



  • myChart.setOption(option);



自己刷一遍代码:


<div id = "main" style = ‘height:400px’></div>

<script src = "http://echarts.baidu.com/build/dist/echarts-all.js"></script&gt;

<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模块,当然,之前标签式单文件引入所有的步骤也是需要的.



  1. 准备一个具备大小的DOM(div),可以只有height



  • <div id="main" style="height:400px"></div>



  1. Echarts单文件引入




  1. 配置引用路径




  1. 用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&gt;

<script type = "text/javascript">
require.config({
paths:{
echarts: "http://echarts.baidu.com/build/dist&quot;
}
});

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>


效果













page PV:  ・  site PV:  ・  site UV: