ECharts Liquid Fill Chart-7-解决切换tab页时，水球图波浪颜色不变化问题

2、代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title></title>
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<!--   引入jQuery -->
	<script src="../../scripts/jquery.js" type="text/javascript"></script>
	<script src='dist/echarts.js'></script>
	<script src='dist/echarts-liquidfill.js'></script>
	<script type="text/javascript" >
//<![CDATA[

$(function(){
	var data1=[100,200,300];
	var $div_li =$("div.tab_menu ul li");
	showEchart(0,data1);
	$('#main').removeAttr('_echarts_instance_');

	$div_li.click(function(){
		//1、点击事件
			$(this).addClass("selected")            //当前<li>元素高亮
				   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
         //2、  
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
            // $("#main").hover(function(){
            // 	$(this).addClass("hover");
            // },function(){
            // 	$(this).removeClass("hover");
            // });
            showEchart(index,data1);
            $('#main').removeAttr('_echarts_instance_');



});
});

var showEchart=function(index,data1){

	//红色系列
	var redcolor=['red','pink','red'];
	var bluecolor=['blue','green','blue'];
			
	var setdata=180;//设定值
	if (data1[index]>=setdata) {//大于设定值，显示红色
		var temp=redcolor;
	}else{//显示蓝色
		var temp=bluecolor;
	}
	// var wave1=temp[0];
	// var wave2=temp[1];
	var chart = echarts.init(document.getElementById('main'));
				// ECharts 水球图插件，需要额外插件脚本，参见上方“脚本”
// 完整配置参数参见：https://github.com/ecomfe/echarts-liquidfill
//两种方式的formatter
var option = {
	series: [{
		type: 'liquidFill',
            name: 'series name', //series name
            radius: '55%',
            center: ['50%', '60%'],

            data: [{
                name: 'data name', //data name
                value: data1[index]
            }, 0.5, 0.4],
            color: ['#FFF', temp[0],temp[1]],//设置颜色系列

            backgroundStyle: {
                borderWidth: 5, //内边框宽度
                borderColor: temp[2], //背景内边框
                color: 'white', //背景颜色
                shadowColor: temp[2], //阴影
                shadowBlur: 10, //阴影模糊
            },
            outline: {
                borderDistance: 20, //边框距离
                itemStyle: {
                	borderWidth: 5,
                	borderColor: temp[2],
                	shadowBlur: 10,
                	shadowColor: temp[2]
                }
            },
            label: {
                normal: { //如果不加normal,则没有效果
                	formatter: function(param) {
                		return param.seriesName + '\n' +
                		param.name + '\n' +
                		+param.value + '人';
                	},
                	textStyle: {
                        color: temp[2], //波浪上文本颜色
                        insideColor: '#fff', //波浪内部字体颜色
                        fontSize: 14
                    }
                }
            }
        }]
    };
    chart.setOption(option,true);

}

//]]>
</script>
</head>
<body>

	<div class="tab">
		<div class="tab_menu">
			<ul>
				<li class="selected">第1个球</li>
				<li>第2个球</li>
				<li>第3个球</li>
			</ul>
		</div>
		<div id="main" style="width: 400px;height: 400px;"></div>
	</div>

</body>
</html>
ECharts Liquid Fill Chart-7-解决切换tab页时，水球图波浪颜色不变化问题

猜你喜欢
