echarts的使用

由于项目里要用echarts做图表，今天在网上搜了一下echarts的用法。1、模块话加载：

<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'// 使用柱状图就加载bar模块，按需加载

　　],

　　function (ec) {

　　 // 基于准备好的dom，初始化echarts图表

　　 var myChart = ec.init(document.getElementById('main'));

　　 var option = { tooltip: { show: true },

　　 legend: { data:['销量'] },

　　 xAxis : [ { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ],

　　yAxis : [ { type : 'value' } ],

　　 series : [ {

　　 "name":"销量",

　　"type":"bar",

　　"data":[5, 20, 40, 10, 10, 20]

　　} ] };

　　// 为echarts对象加载数据

　　 myChart.setOption(option); } );

</script>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

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

以上内容引自http://echarts.baidu.com/echarts2/doc/start.html

2、<script type="text/javascript" src="../echarts/echarts.min.js"></script>

 

// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));

var option = {
tooltip: {
show: true
},
legend: {
data:['合格','不合格']
},
xAxis : [
{
type : 'category',
axisLabel: {
rotate: 60,
interval:1
},
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
grid: {
x: 80,
x2: 40,
y2: 150
},
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":'合格',
"type":"bar",
"data":[5, 20, 40, 10, 10, 20],
itemStyle: {
normal: {
color:'#2894FF'
}
},
barWidth :3
},
{
"name":'不合格',
"type":"bar",
"data":[5, 20, 40, 10, 10, 20],
itemStyle: {
normal: {
color:'#003D79'
}
},
barWidth :3
}
]
};

 

// 为echarts对象加载数据
myChart.setOption(option);

--------------------------------------------------

以上是我所了解的echarts的两种使用方法。