Echarts柱形圖 例項
阿新 • • 發佈：2020-08-26
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="echarts.min.js"></script> </head> <body> <div id="a" style="width: 500px; height: 500px;"></div> </body> <script> //繫結div var myChart = echarts.init(document.getElementById('a')) var dataAxis = ['點', '擊', '柱', '子', '或', '者', '兩', '指', '在', '觸', '屏', '上', '滑', '動', '能', '夠', '自', '動', '縮', '放']; var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; // var yMax = 500; // var dataShadow = []; //這個第二條柱子合併產生陰影，迴圈的是上面定義的變數然後根據資料多少來給下面陰影加資料 // for (var i = 0; i < data.length; i++) { // dataShadow.push(yMax); // } option = { // 標題 title: { // 主標題 text: '接警日趨勢（近7天）', //主標題內容樣式 textStyle:{ color:'#000' }, // 副標題 subtext: '', // 副標題內容樣式 subtextStyle:{ color:'#bbb' }, //標題位置,因為圖形是是放在一個dom中,因此用padding屬性來定位 padding:[10,0,0,30] }, // 滑鼠放上顯示提示 tooltip: { trigger: 'axis', //觸發型別 'item'資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用，'axis'座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。 axisPointer: { //座標軸指示器，座標軸觸發有效 type: 'cross', //預設為直線，可選line shadow cross crossStyle: { color: '#fff' } } }, // x軸 xAxis: { show:true, data: dataAxis, axisPointer: { //寫到X軸就是給X軸改的滑鼠放上後的樣式 type: 'shadow', }, // 座標軸標籤 axisLabel: { inside: true, textStyle: { color: '#fff' } }, //X座標刻度 axisTick: { show: false, //座標軸線是否顯示 inside:true, //座標軸線是否朝內 }, //X座標標籤 就是文字 axisLabel:{ show:true, //座標標籤是否顯示 inside:false, //座標標籤是否朝內 }, //grid 區域中的分隔線 axisLine: { show: false }, // 網格區域 splitArea:{ show:false }, data: ["1月","2月","3月","4月","5月","6月","7月"], z: 10 }, // y軸 yAxis: { show:false, //是否顯示 position:'right', //顯示位置 offset:0, //y軸相對於預設位置的偏移 type:'value', //軸的型別 name:'銷量', //軸的名稱 nameLocation:'end', // 座標名稱的樣式 顏色 內邊距 字型大小等 nameTextStyle:{ color:"#000", padding:[5,0,0,10], }, nameGap:20, //座標名稱和軸線的距離 // nameRotate:270, //座標名字的旋轉 // 座標軸 軸線 axisLine: { show: true, // 箭頭 symbol:['none','arrow'], //['none','arrow']這是隻在末端顯示箭頭，'arrow'兩端都顯示箭頭 'none'就是不顯示 symbolSize:[8, 8] , //---箭頭大小 symbolOffset:[0,7], //---箭頭位置 //線 lineStyle:{ color:'green', //線的顏色 width:1, //線的寬度 type:'solide' //顯得型別 } }, //座標軸 刻度 就是縱向多出來的小線 axisTick: { show: true, inside:false, //---是否朝內 lengt:3, //長度 lineStyle:{ //color:'red', //---預設取軸線的顏色 width:1, type:'solid', }, }, //座標軸標籤 座標軸顯示的數值 axisLabel: { show:true, //---是否顯示 inside:false, //---是否朝內 rotate:0, //---旋轉角度 margin: 8, //---刻度標籤與軸線之間的距離 textStyle: { color: '#999' } }, //--網格區域 splitArea:{ show:false, //---是否顯示，預設false }, }, // 資料區域的縮放 dataZoom: [ { type: 'inside' } ], //內容資料 series: [ { // name:'銷量', //系列名稱 跟圖例相對應 也就是那個帶顏色的小圖示 type: 'bar', // 生成的一條柱子來產生陰影 // itemStyle: { // color: 'rgba(0,0,0,0.05)' // }, // barGap: '-100%', // barCategoryGap: '40%', // data: dataShadow, // animation: false }, { type: 'bar', // 圖形形狀 itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ // 柱子0%的顏色 {offset: 0, color: '#01F4D4'}, //柱子50%的顏色 {offset: 0.5, color: '#02E2E8'}, //柱子100%的顏色 {offset: 1, color: '#02D2F9'} ] ) }, //滑鼠放到柱子上的樣式 emphasis: { itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#2378f7'}, {offset: 0.7, color: '#2378f7'}, {offset: 1, color: '#83bff6'} ] ) } }, barWidth:'30', //調節柱子的寬度 barCategoryGap:'30%', //調節柱子之間的距離 data: [3020, 4800, 3600, 6050, 4320, 6200,5050] } ] }; // Enable data zoom when user click bar. var zoomSize = 6; myChart.on('click', function (params) { console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); myChart.dispatchAction({ type: 'dataZoom', startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] }); }); //例項化顯示圖表 myChart.setOption(option) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./echarts.min.js"></script> </head> <body> <div id="a" style="width: 500px; height: 500px;"></div> </body> <script> var myChart = echarts.init(document.getElementById('a')) option = { tooltip: { trigger: 'axis', axisPointer: { // 座標軸指示器，座標軸觸發有效 type: 'shadow' // 預設為直線，可選為：'line' | 'shadow' } }, legend: { type:'plain', right:'0%', data: ['直接訪問', '郵件營銷', '聯盟廣告'], }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['4月', '5月', '6月', '7月', '8月', '9月'], axisTick: { show: false }, }, yAxis: { show:false, type: 'value', }, series: [ { name: '直接訪問', type: 'bar', stack: '總量', label: { show: true, position: 'insideRight' }, itemStyle: { color: '#00B7EE', }, data: [320, 302, 301, 334, 390, 330] }, { name: '郵件營銷', type: 'bar', stack: '總量', label: { show: true, position: 'insideRight' }, itemStyle: { color: '#5AFFAE', }, data: [120, 132, 101, 134, 90, 230] }, { name: '聯盟廣告', type: 'bar', stack: '總量', label: { show: true, position: 'insideRight' }, itemStyle: { color: '#fff100', }, data: [220, 182, 191, 234, 290, 330] }, ] }; myChart.setOption(option) window.onresize=function(){ myChart.resize() } </script> </html>