echars

最新推荐文章于 2024-08-13 18:13:57 发布

开心就好__

最新推荐文章于 2024-08-13 18:13:57 发布

阅读量293

点赞数

分类专栏：其他文章标签： echars使用

本文链接：https://blog.csdn.net/qq_43564857/article/details/89333985

版权

其他专栏收录该内容

7 篇文章 0 订阅

订阅专栏

echars js文件

/*echars.js如何调用：
实例化InitCircular
var _init = new InitCircular();
创建空数组
var zjxArr = [];
向数组里添加需要显示的数据（value可以直接填写数据）
zjxArr.push(_init.circularArr(initId("zjx_myAsset_ztzc"),'在途资产（元）','#47b2fc'),_init.circularArr(initId("zjx_myAsset_gdlc"),'高端理财（元）','#b662a2'),_init.circularArr(initId("zjx_myAsset_slb"),'生利宝（元）','#F75355'),_init.circularArr(initId("zjx_myAsset_gmjj"),'公募基金（元）','#fec461'));
使用刚指定的配置项和数据显示图表。
_initEchars("zjx_circular").setOption(_init.zjxCircular("我的资产",zjxArr));*/

//获取id为某值的元素的值（例如：生利宝（元））
function initId(id){
	var _this = document.getElementById(id).innerHTML.replace(/,/g,'');
	return _this;
}
//基于准备好的dom，初始化echarts实例
function _initEchars(id){//id，在何处显示图表
	var myChart = echarts.init(document.getElementById(id));
	return myChart;
}
//配置echars
function InitCircular(){
	 this.zjxCircular = function(title,arr){
	// 指定图表的配置项和数据
    	var dataArr = arr;
      	var option = {
      		//显示提示框
		    tooltip: {
		        formatter: "{b}:<br/> {c} ({d}%)"//显示格式
		    },
		    series: [
		        {
		            name:title,//名称
		            type:'pie',//类型，圆
		            radius: ['75%', '85%'],//内外环大小
		            avoidLabelOverlap: false,//文字重叠
		            label: {
		                normal: {
		                    show: false,//是否显示name值
		                    position: 'center'//显示位置
		                }
		            },
		            data:dataArr//悬浮窗显示内容
		        }
		    ]
		};
		return option;
    },
    //设置每个模块的值，名称，圆环颜色
    this.circularArr = function(value,name,color){
    	var arr = {value:value, name:name,itemStyle:{normal:{color:color}}};
    	return arr;
    }
}




//配置折线图表
function InitLineChart(){
	//七日年化收益率
	this.zjxLineChartSeven = function(timeArr,incomeRoteArr,xNum){
		var timeArr = timeArr;
		var incomeRoteArr =  incomeRoteArr;
		var option = {
		    tooltip: {
		        trigger: 'axis',
		        formatter: '{b}<br />{a0}: {c0}'
		    },
		    legend: {
		        show:false,
		        data:['七日年化收益率']
		    },
		    grid: {
		        width:'90%',
		        height:'85%',
		        top:'10%',
		        left:'2%',
		        containLabel:true
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: timeArr,//x轴显示数据
		        splitLine:{  
		            show:true,
		            lineStyle: {
		               color: ['#eaeff0'],
		               width:1
		            }
		        },
		        axisLine:{
		            lineStyle: {
		                color: ['#eaeff0'],
		                width:1
		             }
		        },
		        axisLabel:{
		            textStyle:{
		                color:['#333'],
		                fontSize:12,
		            },
		            interval:xNum//x轴间隔数量
		        },
		        axisTick:{
		            show:false
		        }
		    },
		    yAxis: {
		        type: 'value',
		        scale:true,
		        interval:0,
		        splitLine:{  
		            show:true,
		             lineStyle: {
		                color: ['#eaeff0'],
		                width:1
		             }
		        },
		        axisLine:{
		            show:true,
		            lineStyle: {
		                color: ['#fff'],
		                width:1
		            }
		        },
		        axisLabel:{
		        	formatter: function (value, index) {           
	                	return value.toFixed(3);      
	                },  
		            textStyle:{
		                color:['#333']
		            }
		        },
		        axisTick:{
		            show:false
		        }
		    },
		    series: [
		        {
		            name:'七日年化收益率',
		            type:'line',
		            stack: '总量',
		            symbol:'none',
		            itemStyle : {  
                        normal : {  
                            lineStyle:{  
                                color:'#ae9b84'  
                            }  
                        }  
                    },
		            data:incomeRoteArr//七日年化收益率
		        }
		    ]
		};
		return option;
	},
	//万元收益
	this.zjxLineChartEarn = function(timeArr,incomeArr,xNum){
		var timeArr = timeArr;
		var incomeArr =  incomeArr;
		var option = {
		    tooltip: {
		        trigger: 'axis',
		        formatter: '{b}<br />{a0}: {c0}'
		    },
		    legend: {
		        show:false,
		        data:['七日年化收益率']
		    },
		    grid: {
		        width:'90%',
		        height:'85%',
		        top:'10%',
		        left:'2%',
		        containLabel:true
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: timeArr,//x轴显示数据
		        splitLine:{  
		            show:true,
		            lineStyle: {
		               color: ['#eaeff0'],
		               width:1
		            }
		        },
		        axisLine:{
		            lineStyle: {
		                color: ['#eaeff0'],
		                width:1
		             }
		        },
		        axisLabel:{
		            textStyle:{
		                color:['#333'],
		                fontSize:12,
		            },
		            interval:xNum//x轴间隔数量
		        },
		        axisTick:{
		            show:false
		        }
		    },
		    yAxis: {
		        type: 'value',
		        scale:true,
		        interval:0,
		        splitLine:{  
		            show:true,
		             lineStyle: {
		                color: ['#eaeff0'],
		                width:1
		             }
		        },
		        axisLine:{
		            show:true,
		            lineStyle: {
		                color: ['#fff'],
		                width:1
		            }
		        },
		        axisLabel:{
		        	formatter: function (value, index) {           
	                	return value.toFixed(3);      
	                },  
		            textStyle:{
		                color:['#333']
		            }
		        },
		        axisTick:{
		            show:false
		        }
		    },
		    series: [
		        {
		            name:'每万元收益',
		            type:'line',
		            stack: '总量',
		            symbol:'none',
		            itemStyle : {  
                        normal : {  
                            lineStyle:{  
                                color:'#f1975d'  
                            }  
                        }  
                    },
		            data:incomeArr//七日年化收益率
		        }
		    ]
		};
		return option;
	},
	this.timeLine = function(timeArr){
		var timeArr = timeArr;
		return timeArr;
	},
	this.incomeRote = function(incomeRoteArr){
		var incomeRoteArr = incomeRoteArr;
		return incomeRoteArr;
	}
	this.income = function(incomeArr){
		var incomeArr = incomeArr;
		return incomeArr;
	}
}

使用示例：

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../include/head.jsp" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>```</title>
    <%@include file="../include/innerHead.html" %>
</head>
<body>
<%@include file="../include/pageHead.jsp" %>
<!--主体内容-->
<div class="zjx-slb-mainContainer">
    <div class="zjx-slb-chartmain m0a pt30 pb60">
        <p class="zjx-slb-title">...</p>
        <div class="zjx-slb-chartContainer">
            <div class="zjx-slb-chartLeft ml46">
                <p>
                    <span class="dib zjx-slb-chartcolor bgcae9b84"></span>
                    <span class="dib fz12 caaa">7日年化收益率</span>
                    <span class="dib mr20 w30 fz12 deepRed" id="sevenDay"></span>
                </p>
                <div class="zjx-slb-lineChart" id="zjx-slb-chartSeven"></div>
            </div>
            <i class="zjx-slb-chartParting"></i>
            <div class="zjx-slb-chartRight">
                <p>
                    <span class="dib zjx-slb-chartcolor bgcf1975d"></span>
                    <span class="dib fz12 caaa">每万份收益</span>
                    <span class="dib mr20 w30 fz12 deepRed" id="tenThousandShareIncome"></span>
                </p>
                <div class="zjx-slb-lineChart" id="zjx-slb-chartEarn"></div>
            </div>
        </div>
        <div class="zjx-form-confirmBtn"><a href="${ctx}/trade/buyPre.do?fundCode=000662">立即申购</a></div>
    </div>
</div>
<script>

    function loadLineChart() {
        var _initLinechart = new InitLineChart();
        var timeArr = [], incomeRateArr = [], tenThousandShareIncomeArr = [];

        <c:if test="${not empty fundMarketList}">
            <c:forEach items="${fundMarketList}" var="slbMarket">
                timeArr.push('${slbMarket.navDate}');
                incomeRateArr.push('${slbMarket.incomeRate7}');
                tenThousandShareIncomeArr.push('${slbMarket.incomeW}');
            </c:forEach>
        </c:if>

        var xNum = 0;
        var dateLength = timeArr.length;
        if (dateLength <= 5) {
            xNum = 0;
        } else {
            xNum = Math.floor(dateLength / 5);
        }
        _initEchars("zjx-slb-chartSeven").setOption(_initLinechart.zjxLineChartSeven(timeArr, incomeRateArr, xNum));//zjx-slb-chartSeven是图表显示位置id
        _initEchars("zjx-slb-chartEarn").setOption(_initLinechart.zjxLineChartEarn(timeArr, tenThousandShareIncomeArr, xNum));
    }
    
    $(function () {
        loadLineChart();
        
        //echarts鼠标悬浮动态显示数据
        $("#zjx-slb-chartSeven").on("mousemove", function () {
            var canvasHtml = $("#zjx-slb-chartSeven").find("div:nth-child(2)").html();
            if("" == canvasHtml){
                $("#sevenDay").html("0.000%");
            } else {
                $("#sevenDay").html(canvasHtml.substr(canvasHtml.indexOf(":") + 1, 6) + "%");
            }
        })
        $("#zjx-slb-chartSeven").on("mouseout", function () {
            $("#sevenDay").html("");
        })
        $("#zjx-slb-chartEarn").on("mousemove", function () {
            var canvasHtml = $("#zjx-slb-chartEarn").find("div:nth-child(2)").html();
            if("" == canvasHtml){
                $("#tenThousandShareIncome").html("0.0000");
            } else {
                $("#tenThousandShareIncome").html(canvasHtml.substr(canvasHtml.indexOf(":") + 1, 7));
            }
        })
        $("#zjx-slb-chartEarn").on("mouseout", function () {
            $("#tenThousandShareIncome").html("");
        })
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述