0.步驟
1.引入ECharts文件
2.為ECharts準(zhǔn)備一個(gè)具備大小的DOM
3.基于準(zhǔn)備好的dom,初始化ECharts實(shí)例
4.制定圖標(biāo)的配置項(xiàng)和數(shù)據(jù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--2.為ECharts準(zhǔn)備一個(gè)具備大小的DOM-->
<div id="main" style="width: 600px;height: 400px; border: 1px solid #000;"></div>
<!--1.引入ECharts文件-->
<script src="echarts.min.js"></script>
<script>
//
// 可以通過(guò) echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過(guò) setOption 方法生成一個(gè)簡(jiǎn)單的柱狀圖
//
//
// 3.基于準(zhǔn)備好的dom,初始化ECharts實(shí)例
var myChart = echarts.init(document.getElementById("main"));
//4.制定圖標(biāo)的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts\n入門示例',//主標(biāo)題文本
subtext: "我是副文本",//副標(biāo)題文本
show: true,//標(biāo)題是否顯示 默認(rèn)為true
x: 'left',//標(biāo)題的位置 默認(rèn)是left
textStyle:{//主標(biāo)題文字的樣式
color:"#f0f",
},
},
tooltip: {
left:"10px"
},//鼠標(biāo)放上面出現(xiàn)懸浮
legend: {//圖標(biāo)
data:[{
name:'銷量1',
// 強(qiáng)制設(shè)置圖形為圓殊橙。
icon:"circle",
// 設(shè)置文本為紅色
textStyle: {
color: 'red'
}
}],
//data:data.title,
//icon:"circle",//這種設(shè)置圖例圖標(biāo)樣式 是在數(shù)據(jù)是后臺(tái)給的數(shù)據(jù)時(shí)的設(shè)置
bottom:0,//圖例組件離容器下側(cè)的距離咧虎。
orient:"vertical",//圖例列表的布局朝向
textStyle:{//圖例的公用文本樣式。
color:"#666"
}
},
grid:{//直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
show:true,//是否顯示直角坐標(biāo)系網(wǎng)格爬坑。[ default: false ]
left:"20%",//grid 組件離容器左側(cè)的距離巷挥。
right:"30px",
borderColor:"#c45455",//網(wǎng)格的邊框顏色
},
xAxis: {
data: ["襯衫11111","羊毛衫111","雪紡衫111","褲子111","高跟鞋11","襪子111"],//x軸中的數(shù)據(jù)
name:"123",//坐標(biāo)軸名稱婆芦。
nameLocation:'end',//坐標(biāo)軸名稱顯示位置狱掂。
triggerEvent:true,//坐標(biāo)軸的標(biāo)簽是否響應(yīng)和觸發(fā)鼠標(biāo)事件，默認(rèn)不響應(yīng)始花。
axisLine:{},
},
yAxis: {
type : 'value',//坐標(biāo)軸類型杏瞻。'category"就是橫柱狀圖了
},//在使用echarts.js的柱狀圖的時(shí)候一定要配置xAxis,yAxis,series這三個(gè)參數(shù)，如果是不想設(shè)置的話也要初始化可以將其設(shè)置為空J(rèn)SON就可以了衙荐，要不然會(huì)出項(xiàng)報(bào)錯(cuò)，同時(shí)要保證在echarts.init之前的對(duì)象是有寬高的浮创，要不然也會(huì)出現(xiàn)錯(cuò)誤
//name=legend.data的時(shí)候才能顯示圖例(銷量)
series: [{//echarts中必不可少的部分:用于指定圖標(biāo)的類型(餅圖,柱狀圖)之類
name: '銷量1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 5.使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表忧吟。
myChart.setOption(option);
</script>
</body>
</html>
參考echartsapi文檔 http://echarts.baidu.com/option.html#title
image.png
