<!DOCTYPE html>
<html>
<head>
<title>echarts</title>
</head>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<body style="background-color:#333;"><!--? -->
<div id="_top" style="width:600px;height: 400px;margin-top:100px;margin-left: 300px;">
</div>
</body>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('_top'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
? ? ? ? var option = {
? ? ? ? //--------------? ? 標(biāo)題 title? ----------------
? ? ? ? ? ? title: { ? ? ?
? ? ? ? ? ? ? ? text: '主標(biāo)題',? ? ? ? ? ? ?
? ? ? ? ? ? ? ? textStyle:{ //---主標(biāo)題內(nèi)容樣式
? ? ? ? ? ? ? ? color:'#fff'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? subtext:'副標(biāo)題', //---副標(biāo)題內(nèi)容樣式
? ? ? ? ? ? ? ? subtextStyle:{
? ? ? ? ? ? ? ? color:'#bbb'? ? ? ? ?
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? padding:[0,0,100,100] //---標(biāo)題位置,因?yàn)閳D形是是放在一個(gè)dom中,因此用padding屬性來(lái)定位
? ? ? ? ? ? },
? ? ? ? ? //----------------? 圖例 legend? -----------------
? ? ? ? ? ? legend: {
? ? ? ? ? ? type:'plain', //----圖例類(lèi)型，默認(rèn)為'plain'，當(dāng)圖例很多時(shí)可使用'scroll'
? ? ? ? ? ? top:'1%', //----圖例相對(duì)容器位置,top\bottom\left\right? ? ? ?
? ? ? ? ? ? selected:{
? ? ? ? ? ? '銷(xiāo)量':true, //----圖例選擇,圖形加載出來(lái)會(huì)顯示選擇的圖例决乎，默認(rèn)為true
? ? ? ? ? ? },
? ? ? ? ? ? textStyle:{ //----圖例內(nèi)容樣式
? ? ? ? ? ? color:'#fff', //---所有圖例的字體顏色
? ? ? ? ? ? //backgroundColor:'black', //---所有圖例的字體背景色
? ? ? ? ? ? },? ? ? ?
? ? ? ? ? ? tooltip:{ //圖例提示框，默認(rèn)不顯示
? ? ? ? ? ? show:true,
? ? ? ? ? ? color:'red',
? ? ? ? ? ? },
? ? ? ? ? ? ? ? data:[ //----圖例內(nèi)容
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? name:'銷(xiāo)量',
? ? ? ? ? ? ? ? icon:'circle', //----圖例的外框樣式
? ? ? ? ? ? ? ? textStyle:{
? ? ? ? ? ? ? ? color:'#fff', //----單獨(dú)設(shè)置某一個(gè)圖例的顏色
? ? ? ? ? ? ? ? //backgroundColor:'black',//---單獨(dú)設(shè)置某一個(gè)圖例的字體背景色
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? },
? ? ? ? ? ? //--------------? 提示框 -----------------
? ? ? ? ? ? tooltip: {
? ? ? ? ? ? show:true, //---是否顯示提示框,默認(rèn)為true
? ? ? ? ? ? trigger:'item', //---數(shù)據(jù)項(xiàng)圖形觸發(fā)
? ? ? ? ? ? axisPointer:{ //---指示樣式
? ? ? ? ? ? type:'shadow',
? ? ? ? ? ? axis:'auto',
? ? ? ? ? ? },
? ? ? ? ? ? padding:5,
? ? ? ? ? ? textStyle:{ //---提示框內(nèi)容樣式
? ? ? ? ? ? color:"#fff",
? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? //-------------? grid區(qū)域? ----------------
? ? ? ? ? ? grid:{
? ? ? ? ? ? show:false, //---是否顯示直角坐標(biāo)系網(wǎng)格
? ? ? ? ? ? top:80, //---相對(duì)位置，top\bottom\left\right
? ? ? ? ? ? containLabel:false, //---grid 區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽
? ? ? ? ? ? tooltip:{ //---鼠標(biāo)焦點(diǎn)放在圖形上河泳，產(chǎn)生的提示框
? ? ? ? ? ? show:true,
? ? ? ? ? ? trigger:'item', //---觸發(fā)類(lèi)型
? ? ? ? ? ? textStyle:{
? ? ? ? ? ? color:'#666',
? ? ? ? ? ? },
? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? //-------------? x軸? -------------------
? ? ? ? ? ? xAxis: {
? ? ? ? ? ? show:true, //---是否顯示
? ? ? ? ? ? position:'bottom', //---x軸位置
? ? ? ? ? ? offset:0, //---x軸相對(duì)于默認(rèn)位置的偏移
? ? ? ? ? ? type:'category', //---軸類(lèi)型蛉签，默認(rèn)'category'
? ? ? ? ? ? name:'月份', //---軸名稱(chēng)
? ? ? ? ? ? nameLocation:'end', //---軸名稱(chēng)相對(duì)位置
? ? ? ? ? ? nameTextStyle:{ //---坐標(biāo)軸名稱(chēng)樣式
? ? ? ? ? ? color:"#fff",
? ? ? ? ? ? padding:[5,0,0,-5], //---坐標(biāo)軸名稱(chēng)相對(duì)位置
? ? ? ? ? ? },
? ? ? ? ? ? nameGap:15, //---坐標(biāo)軸名稱(chēng)與軸線之間的距離
? ? ? ? ? ? //nameRotate:270, //---坐標(biāo)軸名字旋轉(zhuǎn)
? ? ? ? ? ? axisLine:{ //---坐標(biāo)軸 軸線
? ? ? ? ? ? show:true, //---是否顯示
? ? ? ? ? ? //------------------- 箭頭 -------------------------
? ? ? ? ? ? symbol:['none', 'arrow'], //---是否顯示軸線箭頭
? ? ? ? ? ? symbolSize:[8, 8] , //---箭頭大小
? ? ? ? ? ? symbolOffset:[0,7], //---箭頭位置
? ? ? ? ? ? //------------------- 線 -------------------------
? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? color:'#fff',
? ? ? ? ? ? width:1,
? ? ? ? ? ? type:'solid',
? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? axisTick:{ //---坐標(biāo)軸 刻度
? ? ? ? ? ? show:true, //---是否顯示
? ? ? ? ? ? inside:true, //---是否朝內(nèi)
? ? ? ? ? ? lengt:3, //---長(zhǎng)度
? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? //color:'red', //---默認(rèn)取軸線的顏色
? ? ? ? ? ? width:1,
? ? ? ? ? ? type:'solid',
? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? axisLabel:{ //---坐標(biāo)軸 標(biāo)簽
? ? ? ? ? ? show:true, //---是否顯示
? ? ? ? ? ? inside:false, //---是否朝內(nèi)
? ? ? ? ? ? rotate:0, //---旋轉(zhuǎn)角度
? ? ? ? ? ? margin: 5, //---刻度標(biāo)簽與軸線之間的距離
? ? ? ? ? ? //color:'red', //---默認(rèn)取軸線的顏色
? ? ? ? ? ? },
? ? ? ? ? ? splitLine:{ //---grid 區(qū)域中的分隔線
? ? ? ? ? ? show:false, //---是否顯示组砚，'category'類(lèi)目軸不顯示，此時(shí)我的X軸為類(lèi)目軸违诗，splitLine屬性是無(wú)意義的
? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? //color:'red',
? ? ? ? ? ? //width:1,
? ? ? ? ? ? //type:'solid',
? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? splitArea:{ //--網(wǎng)格區(qū)域
? ? ? ? ? ? show:false, //---是否顯示某抓，默認(rèn)false
? ? ? ? ? ? },? ? ? ?
? ? ? ? ? ? ? ? data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//內(nèi)容
? ? ? ? ? ? },
? ? ? ? ? ? //----------------------? y軸? ------------------------
? ? ? ? ? ? yAxis: {
? ? ? ? ? ? show:true, //---是否顯示
? ? ? ? ? ? position:'left', //---y軸位置
? ? ? ? ? ? offset:0, //---y軸相對(duì)于默認(rèn)位置的偏移
? ? ? ? ? ? type:'value', //---軸類(lèi)型纸兔，默認(rèn)'category'
? ? ? ? ? ? name:'銷(xiāo)量', //---軸名稱(chēng)
? ? ? ? ? ? nameLocation:'end', //---軸名稱(chēng)相對(duì)位置value
? ? ? ? ? ? nameTextStyle:{ //---坐標(biāo)軸名稱(chēng)樣式
? ? ? ? ? ? color:"#fff",
? ? ? ? ? ? padding:[5,0,0,5], //---坐標(biāo)軸名稱(chēng)相對(duì)位置
? ? ? ? ? ? },
? ? ? ? ? ? nameGap:15, //---坐標(biāo)軸名稱(chēng)與軸線之間的距離
? ? ? ? ? ? //nameRotate:270, //---坐標(biāo)軸名字旋轉(zhuǎn)
? ? ? ? ? ? axisLine:{ //---坐標(biāo)軸 軸線
? ? ? ? ? ? show:true, //---是否顯示
? ? ? ? ? ? //------------------- 箭頭 -------------------------
? ? ? ? ? ? symbol:['none', 'arrow'], //---是否顯示軸線箭頭
? ? ? ? ? ? symbolSize:[8, 8] , //---箭頭大小
? ? ? ? ? ? symbolOffset:[0,7], //---箭頭位置
? ? ? ? ? ? //------------------- 線 -------------------------
? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? color:'#fff',
? ? ? ? ? ? width:1,
? ? ? ? ? ? type:'solid',
? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? axisTick:{ //---坐標(biāo)軸 刻度
? ? ? ? ? ? show:true, //---是否顯示
? ? ? ? ? ? inside:true, //---是否朝內(nèi)
? ? ? ? ? ? lengt:3, //---長(zhǎng)度
? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? //color:'red', //---默認(rèn)取軸線的顏色
? ? ? ? ? ? width:1,
? ? ? ? ? ? type:'solid',
? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? axisLabel:{ //---坐標(biāo)軸 標(biāo)簽
? ? ? ? ? ? show:true, //---是否顯示
? ? ? ? ? ? inside:false, //---是否朝內(nèi)
? ? ? ? ? ? rotate:0, //---旋轉(zhuǎn)角度
? ? ? ? ? ? margin: 8, //---刻度標(biāo)簽與軸線之間的距離
? ? ? ? ? ? //color:'red', //---默認(rèn)取軸線的顏色
? ? ? ? ? ? },
? ? ? ? ? ? splitLine:{ //---grid 區(qū)域中的分隔線
? ? ? ? ? ? show:true, //---是否顯示，'category'類(lèi)目軸不顯示否副，此時(shí)我的y軸為類(lèi)目軸汉矿，splitLine屬性是有意義的
? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? color:'#666',
? ? ? ? ? ? width:1,
? ? ? ? ? ? type:'dashed', //---類(lèi)型
? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? splitArea:{ //--網(wǎng)格區(qū)域
? ? ? ? ? ? show:false, //---是否顯示，默認(rèn)false
? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? },
? ? ? ? ? ? //------------ 內(nèi)容數(shù)據(jù)? -----------------
? ? ? ? ? ? series: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: '銷(xiāo)量', //---系列名稱(chēng)
? ? ? ? ? ? ? ? type: 'bar', //---類(lèi)型
? ? ? ? ? ? ? ? legendHoverLink:true, //---是否啟用圖例 hover 時(shí)的聯(lián)動(dòng)高亮
? ? ? ? ? ? ? ? label:{ //---圖形上的文本標(biāo)簽
? ? ? ? ? ? ? ? show:false,
? ? ? ? ? ? ? ? position:'insideTop', //---相對(duì)位置
? ? ? ? ? ? ? ? rotate:0, //---旋轉(zhuǎn)角度
? ? ? ? ? ? ? ? color:'#eee',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? itemStyle:{ //---圖形形狀
? ? ? ? ? ? ? ? color:'blue',
? ? ? ? ? ? ? ? barBorderRadius:[18,18,0,0],
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? barWidth:'20', //---柱形寬度
? ? ? ? ? ? ? ? barCategoryGap:'20%', //---柱形間距
? ? ? ? ? ? ? ? data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? };
? ? ? ? // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表备禀。
? ? ? ? myChart.setOption(option);
</script>
</html>
