echarts 使用一些配置項整理
阿新 • • 發佈:2022-02-11
1、刻度控制
min:0, //取0為最小刻度 max: 100, //取100為最大刻度 min:'dataMin', //取最小值為最小刻度 max: 'dataMax', //取最大值為最大刻度 min: function(value) {//取最小值向下取整為最小刻度 return Math.floor(value.min) }, max: function(value) {//取最大值向上取整為最大刻度 return Math.ceil(value.max) }, scale: true, //自適應 minInterval: 0.1, //分割刻度
2、控制圖表位置(也可限制大小)
grid: { left:"12", right:'35%', top:'0', bottom:'0', containLabel: true, },
3、控制軸字型樣式
splitLine: { show: false, }, inverse:true,//翻轉順序 axisLabel: { textStyle: { color: "white", //y軸字型顏色 fontSize: "16", align:"left", }, },
4、series 表中data顯示
{ // name: '銷量', type: "bar", data: [28.71, 19.45, 15.91, 10.15, 6.53, 5.16,3.59,3.03,2.40,1.92,1.52,1.35,0.20,0.09,0.01,0.00,0.00], itemStyle: { //上方顯示數值 normal: { label: { show:true, //開啟顯示 position: 'right', //在上方顯示 textStyle: { //數值樣式 color: 'white', fontSize: 16 } } } }, barWidth: 20, //柱圖寬度 },
5、柱狀圖陰影
{//shadow type:'bar', name:'目標', barWidth: 20, //柱圖寬度 barGap:'-100%',//左移一個位置 barCategoryGap:'0%', data:[10,15,18,20,22,24,26,30,25,24,22,20,18,16,14,10,10,10,10,10,10,10,10], itemStyle: { //上方顯示數值 normal: { color:'rgba(220, 220, 220,0.4)', label: { textStyle: { //數值樣式 color: 'white', fontSize: 16 } } } }, },
個人隨筆,各位大牛見諒哈,畢竟頭一次寫這玩意兒,不喜勿噴,也是為了我自己後邊使用的方便才這麼寫的