echars
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>
效果如下：