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