echart圖示js中的欄位意思
阿新 • • 發佈：2021-11-03
var org='1'; function curOrgUp(org){ var myChart = echarts.init(document.getElementById('container')); // 指定圖表的配置項和資料 var option = { //-------------- 標題 title ---------------- title: { // text: '主標題', // textStyle:{ //---主標題內容樣式// color:'#fff' // }, // subtext:'副標題', //---副標題內容樣式 // subtextStyle:{ // color:'#bbb' // } padding: [0, 0, 0, 0] //---標題位置,因為圖形是是放在一個dom中,因此用padding屬性來定位 }, //---------------- 圖例 legend -----------------legend: { type: 'plain', top: '20', //----圖例相對容器位置,top\bottom\left\right selected: { '銷量': true, //----圖例選擇,圖形加載出來會顯示選擇的圖例，預設為true }, textStyle: { //----圖例內容樣式 color: '#30395E', //---所有圖例的字型顏色 }, tooltip: { //圖例提示框，預設不顯示 show: true, color: 'red', }, data: [ //----圖例內容 { name: '', icon: 'circle', //----圖例的外框樣式 textStyle: { color: '#30395E', //----單獨設定某一個圖例的顏色 } } ], }, //-------------- 提示框 ----------------- tooltip: { show: true, //---是否顯示提示框,預設為true trigger: 'item', //---資料項圖形觸發 axisPointer: { //---指示樣式 type: 'shadow', axis: 'auto', }, padding: 5, textStyle: { //---提示框內容樣式 color: "#fff", }, }, //------------- grid區域 ---------------- grid: { show: false, //---是否顯示直角座標系網格 top: 20, //---相對位置，top\bottom\left\right containLabel: false, //---grid 區域是否包含座標軸的刻度標籤 tooltip: { //---滑鼠焦點放在圖形上，產生的提示框 show: true, trigger: 'item', //---觸發型別 backgroundColor: 'rgba(255,255,255,0.9)', textStyle: { color: '#30395E', }, } }, //------------- x軸 ------------------- xAxis: { show: true, //---是否顯示 position: 'bottom', //---x軸位置 offset: 0, //---x軸相對於預設位置的偏移 type: 'category', //---軸型別，預設'category' // name:'', //---軸名稱 nameLocation: 'end', //---軸名稱相對位置 nameTextStyle: { //---座標軸名稱樣式 color: "#30395E", padding: [5, 0, 0, -5], //---座標軸名稱相對位置 }, nameGap: 15, //---座標軸名稱與軸線之間的距離 axisLine: { //---座標軸 軸線 show: true, //---是否顯示 //------------------- 箭頭 ------------------------- // symbol:['none', 'arrow'], //---是否顯示軸線箭頭 //------------------- 線 ------------------------- lineStyle: { color: '#30395E', width: 1, type: 'solid', }, }, axisTick: { //---座標軸 刻度 show: true, //---是否顯示 inside: true, //---是否朝內 length: 3, //---長度 lineStyle: { //color:'red', //---預設取軸線的顏色 width: 1, type: 'solid', }, }, axisLabel: { //---座標軸 標籤 show: true, //---是否顯示 inside: false, //---是否朝內 align: "center", verticalAlign: "middle", rotate: -50, //---旋轉角度 margin: 30, //---刻度標籤與軸線之間的距離 //color:'red', //---預設取軸線的顏色 }, splitLine: { //---grid 區域中的分隔線 show: false, //---是否顯示，'category'類目軸不顯示，此時我的X軸為類目軸，splitLine屬性是無意義的 lineStyle: { //color:'red', //width:1, //type:'solid', }, }, splitArea: { //--網格區域 show: false, //---是否顯示，預設false }, data: [], }, //---------------------- y軸 ------------------------ yAxis: { show: true, //---是否顯示 position: 'left', //---y軸位置 offset: 0, //---y軸相對於預設位置的偏移 boundaryGap: [0, "20%"], type: 'value', //---軸型別，預設'category' // name:'', //---軸名稱 nameLocation: 'end', //---軸名稱相對位置value nameTextStyle: { //---座標軸名稱樣式 color: "#30395E", padding: [5, 0, 0, 5], //---座標軸名稱相對位置 }, nameGap: 15, //---座標軸名稱與軸線之間的距離 axisLine: { //---座標軸 軸線 show: true, //---是否顯示 //------------------- 箭頭 ------------------------- // symbol:['none', 'arrow'], //---是否顯示軸線箭頭 //------------------- 線 ------------------------- lineStyle: { color: '#30395E', width: 1, type: 'solid', }, }, axisTick: { //---座標軸 刻度 show: true, //---是否顯示 inside: true, //---是否朝內 length: 1, //---長度 lineStyle: { //color:'red', //---預設取軸線的顏色 width: 1, type: 'solid', }, }, axisLabel: { //---座標軸 標籤 show: true, //---是否顯示 inside: false, //---是否朝內 rotate: 0, //---旋轉角度 margin: 8, //---刻度標籤與軸線之間的距離 //color:'red', //---預設取軸線的顏色 }, splitLine: { //---grid 區域中的分隔線 show: true, //---是否顯示，'category'類目軸不顯示，此時我的y軸為類目軸，splitLine屬性是有意義的 lineStyle: { color: '#CFD3DC', width: 1, type: 'solid', //---型別 }, }, splitArea: { //--網格區域 show: false, //---是否顯示，預設false }, }, //------------ 內容資料 ----------------- series: [ { // name: '', //---系列名稱 type: 'bar', //---型別 legendHoverLink: true, //---是否啟用圖例 hover 時的聯動高亮 label: { //---圖形上的文字標籤 show: false, position: 'insideTop', //---相對位置 rotate: 0, //---旋轉角度 color: '#1F4AB1', }, itemStyle: { //---圖形形狀 color: '#1F4AB1', barBorderRadius: [0, 0, 0, 0], }, barWidth: '24', //---柱形寬度 barCategoryGap: '25%', //---柱形間距 legend: { data: ['數值'], top: '30' }, data: [] } ] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); $.ajax({ url: "/kms/knowledgeView/docOrgNumView.do", type: "POST", data:{type: org}, dataType: "json", success: function (data) { option = { xAxis: { data: data.datas.xAxis }, series: [{ data: data.datas.data }] } myChart.setOption(option); } }); }