1.<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="barMain" style="height:400px"></div>
function loadEcharts(){
//初始化
var myChart = echarts.init(document.getElementById('barMain'));
//指定图表的配置项和数据
var option = {
title：{},//标题
tooltip:{},//提示框
legend:{},
grid:{},
xAxis : [],//x轴
yAxis : [],//y轴
series : []//数据、echarts类型(曲、柱、饼)
};
myChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
}
}
2.例子
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<div id="barMain" 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',
'echarts/chart/line'
],
drawEcharts
);
function drawEcharts(ec){
loadEachatrs(ec);
//drawLine(ec);
}
function loadEachatrs(ec){
var myChart = ec.init(document.getElementById('barMain'));
var option = {
title : {//标题
text: '产品库存关系图',
subtext: '数据来自瞎编',
x: 'center',
align: 'right'
},
tooltip:{//鼠标悬浮在柱状图/曲线图上是否加载提示框
show: true
},
legend:{
data:["种类","物品"],
x: 'left',
y:30,
padding:[5,35,5,5]
},
grid:{//控制图形区域与图表容器之间的间隔，就是绘图区与id为barMain的div的占比http://www.mamicode.com/info-detail-1556089.html
"borderWidth":0,
top:100,
containLabel:true
},
xAxis : [
{
type : 'category',
name:"数据",
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
axisLabel:{//加这个x轴显示字体是倾斜状的
interval:0,
rotate:-30
}
}
],
yAxis : [
{
name: '个数',
type: 'value',
max: 50
}
],
series : [
{
"name":"种类",
"type":"line",//曲线图
"data":[5, 20, 40, 10, 10, 20],
},{
"name":"物品",
"type":"bar",//柱状图
"data":[25, 20, 20, 20, 10, 20],
itemStyle:{normal:{label:{show:true,position:'top'}}}
}
]
};
myChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
}
</script>
</body>
///////////////////////////////////////////////////////////////////////////////////////////////////注释////////////////////////////////////////////////////////////////////////////////////
series 里面name的值要和legend里面data值一样，不然在实现点击legend时，图形不会出现点击消失点击显示的功能