Echarts柱狀圖每個柱設(shè)置不同的顏色 效果如下圖

image.png

series:[
    {
        name:'郵箱',
        type:'bar',
        barWidth:'60%',
        label:{
            normal:{
                show:true,
                position:'top'
            }
        },
        itemStyle:{
            normal:{
                color:function(params){
                    letcolorList=[
                        '#1c88c9',
                        '#2e5399',
                        '#9f4176',
                        '#2c7c7d',
                        '#2ab1b5',
                    ];
                    returncolorList[params.dataIndex];
                }
                //每個柱子的顏色即為colorList數(shù)組里的每一項，如果柱子數(shù)目多于colorList的長度，則柱子顏色循環(huán)使用該數(shù)組
            },
        },
        data:[22,55,22,55,666]
    },
]

Echarts取消網(wǎng)格線

image.png

xAxis:{
    type:'value',
    show:false,
    splitLine:{
        show:false
    }
}

比如X軸的設(shè)置 show屬性是設(shè)置X軸是否顯示 splitLine是設(shè)置網(wǎng)格線是否顯示
然后如上圖 要使Y軸是柱型數(shù)據(jù)

Echarts設(shè)置漸變色

image.png

series:[
    {
        type:'bar',
        barWidth:'30%',
        itemStyle:{
            normal:{
                //重點在于利用Echarts內(nèi)置的漸變色生成器，其中
                color:new echarts.graphic.LinearGradient( 
                1,0,0,1,
                [
                    {offset:1,color:'#14c8d4'},
                    {offset:0,color:'#43eec6'}
                ]
            ),
            //有關(guān)shadow的屬性用來設(shè)置陰影顏色及偏移
            shadowBlur:10,
            shadowColor:'rgba(67,138,298,0.3)',
            shadowOffsetX:[1],
            shadowOffsetY:[1],
        },
    },
]

南丁格爾圖，通過半徑區(qū)分?jǐn)?shù)據(jù)大小

可選擇兩種模式：
'radius' 扇區(qū)圓心角展現(xiàn)數(shù)據(jù)的百分比，半徑展現(xiàn)數(shù)據(jù)的大小。
'area' 所有扇區(qū)圓心角相同，僅通過半徑展現(xiàn)數(shù)據(jù)大小。

image.png

關(guān)鍵代碼如下:

series : [
        {
            roseType: 'radius'
        }
]

比較復(fù)雜的label寫法

image.png

 series: [
        {
            name:'訪問來源',
            type:'pie',
            radius: ['40%', '55%'],
            label: {
                normal: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|：}{c}  {per|u0z1t8os%}  ',
                    backgroundColor: '#eee',
                    borderColor: '#aaa',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                        a: {
                            color: '#999',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#aaa',
                            width: '100%',
                            borderWidth: 0.5,
                            height: 0
                        },
                        b: {
                            fontSize: 16,
                            lineHeight: 33
                        },
                        per: {
                            color: '#eee',
                            backgroundColor: '#334455',
                            padding: [2, 4],
                            borderRadius: 2
                        }
                    }
                }
            },
        }
    ]

配置餅圖的顏色 線性漸變或者自定義圖片背景

image.png

image.png

// 線性漸變，前四個參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當(dāng)于在圖形包圍盒中的百分比，如果 globalCoord 為 `true`，則該四個值是絕對的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 處的顏色
    }, {
        offset: 1, color: 'blue' // 100% 處的顏色
    }],
    globalCoord: false // 缺省為 false
}
// 徑向漸變，前三個參數(shù)分別是圓心 x, y 和半徑，取值同線性漸變
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 處的顏色
    }, {
        offset: 1, color: 'blue' // 100% 處的顏色
    }],
    globalCoord: false // 缺省為 false
}
// 紋理填充
color: {
    image: imageDom, // 支持為 HTMLImageElement, HTMLCanvasElement，不支持路徑字符串
    repeat: 'repeat' // 是否平鋪, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

關(guān)于tooltip的位置可能超出圖表容器

未超出.png

已超出容器.png

設(shè)置tooltip的位置 代碼如下

  // 絕對位置，相對于容器左側(cè) 10px, 上側(cè) 10 px
  position: [10, 10]
  // 相對位置，放置在容器正中間
  position: ['50%', '50%']
  position: function (point, params, dom, rect, size) {
      // 固定在頂部
      return [point[0], '10%'];
  }

參數(shù)：
point: 鼠標(biāo)位置，如 [20, 40]。
params: 同 formatter 的參數(shù)相同。
dom: tooltip 的 dom 對象。
rect: 只有鼠標(biāo)在圖形上時有效，是一個用x, y, width, height四個屬性表達(dá)的圖形包圍盒。
size: 包括 dom 的尺寸和 echarts 容器的當(dāng)前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。
返回值：
可以是一個表示 tooltip 位置的數(shù)組，數(shù)組值可以是絕對的像素值，也可以是相 百分比。
也可以是一個對象，如：{left: 10, top: 30}，或者 {right: '20%', bottom: 40}。