使用echarts水球圖

使用echarts水球圖

官方實例中沒有水球圖樣式，當咱們須要用到水球圖的時候須要下載echarts-liquidfill.js.

使用

• 在echarts以後引入 echarts-liquidfill.js
• 準備一個定寬高的DOM用來掛載水球圖
• 初始化水球圖

var  chart = echarts.init(document.getElementById("dom"))

• 設置水球參數,並渲染到DOM元素

var option={
    series:[
        {
            type:'liquidFill',
            data:[0.7,0.5]  //兩個波紋
        }
    ]
};
chart.setOption(option);

配置水球圖

• 單個波的配置
  • 每一個水波都是單獨配置的，單獨的配置會覆蓋統一配置。
  • 改變波紋防線顏色

var option={
    series:[
        {
            type:'liquidFill',
            data:[0.7,{
                value:"0.5",
                direction:'left',
                itemStyle:{
                    normal:{
                        color:"red"
                    }
                }
            }]
        }
    ]
};

//第二條波紋變爲將變爲紅色

• 文字配置
  • 水波中間顯示 的文字也是能夠配置的，處於水波背景和默認背景上的文字顏色是不一樣的，固然也能夠設置成同樣的。
  • 文字配置

var option={
    series:[
        {
            name:"系列名稱",
            type:'liquidFill',
            data:[0.7,{
                name:"數據名稱",
                value:"0.5",
                direction:'left',
                itemStyle:{
                    normal:{
                        color:"red"
                    }
                }
            }],
            label:{
                normal:{
                    formatter:"顯示文字",  //顯示在水球圖中間的文字，能夠是字符串，能夠是佔位符，也能夠是一個函數。
                    //若是使用{a}\n{b}\nValue: {c} ，a表明系列名稱，b表明數據名稱，c表明數據值。
                    textStyle:{
                        color:'red',  //默認背景下的文字顏色
                        insideColor:'blue', //水波背景下的文字顏色
                        fontsize:40   //字體大小
                    }
                }
            }
        }
    ]
};