1. 程式人生 > 其它 >echarts 使用一些配置項整理

echarts 使用一些配置項整理

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
                        }
                    }
                }
            },
          },

  個人隨筆,各位大牛見諒哈,畢竟頭一次寫這玩意兒,不喜勿噴,也是為了我自己後邊使用的方便才這麼寫的