使用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   //字體大小
                    }
                }
            }
        }
    ]
};