eCharts_基于eCharts开发的一个多图表页面
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-switch.css" />
<link rel="stylesheet" href="css/index.css" />
<script src="js/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-switch.min.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/echarts.min.js"></script>
</head> <body>
<div class="perfor_container">
<div class="perfor_bg">
<img class="title_img" src="data:images/title@2x.png" style="width: 354px;" />
<div class="perfor_content">
<div class="perfor_nav">
<ul class="areaSelect"> <li class="didian"><img src="data:images/didian@2x.png" /><span>全网<span class="Xarrows">﹤</span></span>
</li>
<div class="area">
<!--二级导航-->
<ul class="areaAll hide1">
<li class="areaSelected" data-id="1">业务数据</li>
<li data-id="2">分组</li>
</ul> <!--三级导航-->
<div class="areaThird">
<ul class="areaRegion innerbox hide1">
<li data-id="1" class="innerbox">华南</li>
<li data-id="2" class="innerbox">华北</li>
<li data-id="3" class="innerbox">华东</li>
<li data-id="4" class="innerbox">中西</li>
</ul>
<ul class="areaGrouping innerbox hide1">
<li>分组一</li>
<li>分组一</li>
<li>分组一</li>
<li>分组一</li>
<li>分组一</li>
<li>分组一</li>
<li>分组一</li>
<li>分组一</li>
<li>分组一</li>
<li>分组一</li>
</ul>
</div>
<!--四级导航-->
<div class="areaFourthly">
<ul class="huanan innerbox hide1">
<li>金华区01</li>
<li>台州区</li>
<li>皖南区</li>
<li>金华区</li>
<li>台州区</li>
<li>皖南区</li>
<li>金华区</li>
<li>台州区</li>
<li>皖南区</li>
<li>金华区</li>
<li>台州区</li>
<li>皖南区</li>
<li>金华区</li>
<li>台州区</li>
<li>皖南区</li>
<li>金华区</li>
<li>台州区</li>
<li>皖南区</li>
<li>金华区</li>
<li>台州区</li>
<li>皖南区</li>
<li>金华区</li>
<li>台州区</li>
<li>皖南区</li>
</ul>
<ul class="huabei innerbox hide1">
<li>海南区01</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
<li>海南区</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
<li>海南区</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
<li>海南区</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
<li>海南区</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
</ul>
<ul class="huadong innerbox hide1">
<li>山西区01</li>
<li>冀州区</li>
<li>黑龙江区</li>
<li>济南区</li>
<li>海南区</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
<li>海南区</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
<li>海南区</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
</ul>
<ul class="zhongxi innerbox hide1">
<li>湘南区01</li>
<li>豫北区</li>
<li>陕西区</li>
<li>宁夏区</li>
<li>海南区</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
<li>海南区</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
<li>海南区</li>
<li>潮汕区</li>
<li>赣南区</li>
<li>赣北区</li>
</ul>
</div> </div>
</ul>
<div class="dateSelect">
<!--<img src="data:images/shijian@2x.png" />--><input size="16" type="text" id="datetimeStart" readonly class="form_datetime" value=""></div>
<div id="bNav" class="bNav">
<ul class="perforNav">
<li class="navSelected">重货产品：</li>
<li>陆运零担</li>
<li>物流普运</li>
<li>重货包裹</li>
<li>小票零担</li>
<li>重货快运</li>
<li>重货专运</li>
<li>专线普运</li>
</ul>
</div>
</div>
<div class="dataChart">
<ul class="column1 chart_ul">
<li class="chart_li">
<p>今日情況</p>
<div class="todaySur">
<div>
<h3>今日收入</h3>
<h1><span>2560</span><span>万</span></h1>
<p><span>年度峰值：3560万</span> <span>3月5日</span></p>
</div>
<div>
<h3>今日运单总重量</h3>
<h1><span>2560</span><span>T</span></h1>
<p><span>年度峰值：3560T</span> <span>3月5日</span></p>
</div>
</div>
</li>
<li class="chart_li">
<p>日收入趋势（万）</p>
<div id="echarts01"></div>
</li>
<li class="chart_li">
<p class="dayNumber"><span class="daySelected">日均完成量</span><span>平均重量</span></p>
<div id="echarts02"></div>
</li>
</ul>
<ul class="column2 chart_ul">
<li style="height: 360px;" class="chart_li">
<div>
<p style="float: left;">业务数据和排名</p>
<ul class="yearSwitch" data-id="1">
<li class="year">年</li>
<li class="month">月</li>
<li class="mask"></li>
</ul>
<!--<input name="status" type="checkbox" data-size="small">-->
</div>
<div class="business">
<div class="businessDetail">
<div><canvas id="canvas" width="230" height="150"></div>
<ul class="business_detail">
<li>
<span>
<p>月累计货量</p>
<h2>187562</h2>
</span>
<span>
<p>月累计收入</p>
<h2>61434</h2>
</span>
</li>
<li>
<span>
<p>日均货量</p>
<h2>5917</h2>
</span>
<span>
<p>差值</p>
<h2>5917</h2>
</span>
</li>
</ul>
</div>
<div class="business-rank">
<div class="selectRank"><span class="selectedRank">前10</span><span>后10</span></div>
<ul class="businessRank">
<li><span>排名</span><span>区域</span><span>完成比</span></li>
<ul>
<li><span>1</span><span>常州区</span><span>124.5%</span></li>
<li><span>2</span><span>常州区</span><span>124.5%</span></li>
<li><span>3</span><span>常州区</span><span>124.5%</span></li>
<li><span>4</span><span>常州区</span><span>124.5%</span></li>
<li><span>5</span><span>常州区</span><span>124.5%</span></li>
<li><span>6</span><span>常州区</span><span>124.5%</span></li>
<li><span>7</span><span>常州区</span><span>124.5%</span></li>
<li><span>8</span><span>常州区</span><span>124.5%</span></li>
<li><span>9</span><span>常州区</span><span>124.5%</span></li>
<li><span>10</span><span>常州区</span><span>124.5%</span></li>
</ul>
</ul>
</div>
</div>
</li>
<li class="chart_li">
<div class="monthlyIncome">
<span class="selectIncome" data-id="1">月度收入</span>
<span data-id="2">月度单价</span>
<span data-id="3">月度投保率</span>
<span data-id="4">月度待营比</span>
</div>
<div id="echarts03"></div>
</li>
</ul>
<ul class="column3 chart_ul">
<li class="chart_li">
<p>月度趋势</p>
<div id="echarts04"></div>
</li>
<li class="chart_li">
<p>月度公斤段占比（货量）</p>
<div id="echarts05"></div>
</li>
</ul>
</div> </div> </div> </div> <script type="text/javascript">$(document).ready(function() {
//添加角落的边框
$(".dataChart .chart_ul .chart_li").append('<div class="angle"><div class="angleSZ"></div><div class="angleSY"></div><div class="angleXZ"></div><div class="angleXY"></div></div>') $("#datetimeStart").val(getNowFormatDate());
//图表所需要的数据 //图表一数据，为数值
var data1 = [10, 20, 30, 40, 50, 60, 70, 80, 50, 100, 30, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130],
//图表二数据，都为数值
data2 = [6000, 7000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000],
//图表三数据，都为百分比
data3 = [12, 5, 1.2, 5, 1.2, 50, 1.2, 2, 100, 5, 3, 3],
//图表四数据，都为百分比
data4 = {
data01: [1, 2, 3, 20, 60, 3, 40, 6, 30],
data02: [8, 9, 10, 8, 9, 10, 8, 9, 10]
},
//图表五的数据，均为百分比
data5 = {
data01: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
data02: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
data03: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
data04: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10]
}; eCharts(data1, data2, data3, data4, data5); function eCharts(data1, data2, data3, data4, data5) {
//echarts图表
//图标顺序从上到下，从左到右
var dom01 = document.getElementById("echarts01");
var dom02 = document.getElementById("echarts02");
var dom03 = document.getElementById("echarts03");
var dom04 = document.getElementById("echarts04");
var dom05 = document.getElementById("echarts05"); var myChart01 = echarts.init(dom01);
var myChart02 = echarts.init(dom02);
var myChart03 = echarts.init(dom03);
var myChart04 = echarts.init(dom04);
var myChart05 = echarts.init(dom05); //图表自适应页面
window.addEventListener("resize", function() {
myChart01.resize();
myChart02.resize();
myChart03.resize();
myChart04.resize();
myChart05.resize();
}); var app = {};
option = null;
var tyleChart3; chart1();
chart2();
chart3();
chart4();
chart5(); //图表二导航点击
$(".dayNumber span").click(function() {
$(".dayNumber span").removeClass("daySelected");
$(this).addClass("daySelected");
data2 = [6000, 5000, 5000, 5000, 5000, 5000, 5000, 1000, 5000, 3000, 4000, 2000],
chart2();
}); //图表三导航点击
$(".monthlyIncome span").click(function() {
var id = this.dataset.id;
$(".monthlyIncome span").removeClass("selectIncome");
$(this).addClass("selectIncome");
data3 = [12, 5, 1.2, 5, 1.2, 20, 1.2, 2, 9, 5, 3, 5];
if(id == 1 || id == 2) {
data3 = [12, 5, 1.2, 5, 1.2, 50, 1.2, 2, 100, 5, 3, 3];
tyleChart3 = 1;
chart3();
} else {
tyleChart3 = 0;
chart3();
}
}); function chart1() {
//图表一
option = {
//添加横线滚动条
dataZoom: {
type: 'inside',
start: 0, //默认为0
end: 100 - 1500 / 31, //默认为100
},
//底部滚动条
/*dataZoom: {
start: 0, //默认为0
end: 60 - 1500 / 31, //默认为100
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 6, //组件高度
left: 20, //左边的距离
right: 20, //右边的距离
bottom: 30, //右边的距离
handleColor: '#CBBCDB', //h滑动图标的颜色
handleStyle: {
borderColor: "#CBBCDB",
borderWidth: "1",
shadowBlur: 2,
background: "#CBBCDB",
shadowColor: "#CBBCDB",
},
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'rgba(255,255,255,.4)'
}, {
offset: 1,
color: 'rgba(255,255,255,.4)'
}]),
backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
filterMode: 'filter',
},*/
grid: {
x: 30,
y: 10,
x2: 30,
y2: 70,
top: 10,
height: 150,
borderWidth: 1
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#999'
}
},
//全局字体颜色
textStyle: {
color: '#B3B3B3'
},
itemStyle: {
color: '#666'
},
//X轴参数设置
xAxis: {
type: 'category',
boundaryGap: false,
data: [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
/*axisLabel: {
interval: 0
},*/
axisTick: {
show: false,
},
},
//Y轴参数设置
yAxis: [{
type: 'value',
//data: [0, 30, 60, 90, 120, 150, ],
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
axisLabel: {
interval: 0
},
axisTick: {
show: false,
},
splitLine: {
show: false,
}
}],
//服务数据
series: [{
name: '目标占比',
type: 'line',
smooth: true,
stack: '总量',
data: data1,
itemStyle: {
normal: {
color: '#6FA9D9',
lineStyle: {
color: '#6FA9D9'
}
}
},
}, ]
};
//实例化图表
if(option && typeof option === "object") {
myChart01.setOption(option, true);
};
//end
} function chart2() {
//图表二
//日均完成量
option = {
textStyle: {
color: '#B3B3B3'
},
grid: {
x: 60,
y: 20,
x2: 30,
y2: 70,
top: 20,
height: 130,
//rotate:40width: 300,
//left: 50,
borderWidth: 1
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}, },
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: 40,
showMaxLabel: true,
textStyle: {
color: '#B3B3B3',
}
},
//露出的部分
axisTick: {
show: false,
},
//横线
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
width: 1.5,
color: "#414B71",
}, },
//data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
},
yAxis: {
type: 'value',
axisLabel: {
interval: 0
},
//露出的部分
axisTick: {
show: false,
},
//横线
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
},
series: [{
data: data2,
type: 'bar',
barWidth: 10,
//顶部数字展示pzr
itemStyle: {
//柱形图圆角，鼠标移上去效果
emphasis: {
barBorderRadius: 40
}, normal: {
//柱形图圆角，初始化效果
barBorderRadius: 30,
color: '#F0C476',
}
},
}]
}; if(option && typeof option === "object") {
myChart02.setOption(option, true);
};
//end
} function chart3() {
if(tyleChart3 == 1) {
var formatter01 = '{b0}<br />{a}：{c}',
formatter02 = '{value}';
} else {
var formatter01 = '{b0}<br />{a}：{c}%',
formatter02 = '{value} %';
} //图表三
option = {
tooltip: {
trigger: 'axis',
textStyle: {
color: '#999'
},
formatter: formatter01
},
grid: {
x: 50,
y: 20,
x2: 30,
y2: 70,
top: 20,
height: 200,
borderWidth: 1
},
textStyle: {
color: '#B3B3B3'
},
itemStyle: {
color: '#666'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
axisLabel: {
interval: 0
},
axisTick: {
show: false,
},
},
yAxis: [{
type: 'value',
axisLabel: {
show: true,
interval: '0',
formatter: formatter02
},
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
}
}],
series: [{
name: '目标占比',
type: 'line',
smooth: true,
stack: '总量',
data: data3,
itemStyle: {
normal: {
color: '#F0C476',
lineStyle: {
color: '#F0C476'
},
}
},
}, ]
};
if(option && typeof option === "object") {
myChart03.setOption(option, true);
};
//end
} function chart4() {
//图表四
option = {
tooltip: {
trigger: 'axis',
textStyle: {
color: '#999'
},
formatter: '{b}<br />{a0}：{c0}%<br />{a1}：{c1}%'
},
grid: {
x: 50,
y: 20,
x2: 30,
y2: 70,
top: 30,
height: 190,
borderWidth: 1
},
legend: {
data: ['目标占比', '实际占比'],
selectedMode: false,
textStyle: {
color: '#B3B3B3'
},
top: -5,
},
textStyle: {
color: '#B3B3B3'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
axisLabel: {
interval: 0,
rotate: 40,
},
axisTick: {
show: false,
},
},
yAxis: [{
type: 'value',
axisLabel: {
show: true,
interval: '0',
formatter: '{value} %'
},
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
}
}],
series: [{
name: '目标占比',
type: 'line',
smooth: true,
stack: '总量',
data: data4.data01,
itemStyle: {
normal: {
color: '#6FA9D9',
lineStyle: {
color: '#6FA9D9'
}
}
},
},
{
name: '实际占比',
type: 'line',
smooth: true,
stack: '总量2',
data: data4.data02,
itemStyle: {
normal: {
color: '#FAD567',
lineStyle: {
color: '#FAD567'
}
}
},
}, ]
};
if(option && typeof option === "object") {
myChart04.setOption(option, true);
};
//end
} function chart5() {
//图表五
option = {
textStyle: {
color: '#B3B3B3'
},
grid: {
x: 60,
y: 20,
x2: 30,
y2: 70,
top: 40,
height: 235,
//bottom: 20,
borderWidth: 1
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#999'
},
formatter: '{b}<br />{a0}：{c0}%<br />{a1}：{c1}%<br />{a2}：{c2}%<br />{a3}：{c3}%'
},
legend: {
itemWidth: 10,
itemHeight: 10,
data: ['T>500', '100<T≤500', '20<T≤100', 'T≤20', ],
selectedMode: false,
textStyle: {
color: '#B3B3B3'
},
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
//轴线颜色
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
axisLabel: {
interval: 0,
rotate: 40,
},
//露出的部分
axisTick: {
show: false,
},
//横线
splitLine: {
show: false,
}
}, ],
yAxis: [{
type: 'value',
//data: [25, 50, 75, 100],
axisLabel: {
show: true,
interval: '0',
formatter: '{value} %'
},
//轴线颜色
axisLine: {
lineStyle: {
color: "#414B71",
width: 1.5,
},
},
//露出的部分
axisTick: {
show: false,
},
//横线
splitLine: {
show: false,
}
}],
series: [{
name: 'T>500',
type: 'bar',
stack: '广告',
data: data5.data01,
barWidth: 8,
itemStyle: {
normal: {
color: "#426BC5"
}
},
},
{
name: '100<T≤500',
type: 'bar',
stack: '广告',
data: data5.data02,
barWidth: 8,
itemStyle: {
normal: {
color: "#1FA985"
}
},
},
{
name: '20<T≤100',
type: 'bar',
stack: '广告',
data: data5.data03,
barWidth: 8,
itemStyle: {
normal: {
color: "#DAC37F"
}
},
},
{
name: 'T≤20',
type: 'bar',
stack: '广告',
data: data5.data04,
barWidth: 8,
itemStyle: {
normal: {
color: "#66A0D1"
}
},
}
]
}; if(option && typeof option === "object") {
myChart05.setOption(option, true);
};
//-------------end---------------
} } //点击事件 //地区选择hover
$(".areaAll li").hover(function() {
var id = this.dataset.id;
$(".areaAll li").removeClass('areaSelected');
$(this).addClass('areaSelected');
$(".areaThird ul").hide();
if(id == 1) {
$(".areaRegion").show();
} else if(id == 2) {
$(".areaFourthly ul").hide();
$(".areaGrouping").show();
}
}); $(".areaRegion li").hover(function() {
var id = this.dataset.id;
$(".areaRegion li").removeClass('areaSelected');
$(this).addClass('areaSelected');
$(".areaFourthly ul").hide();
if(id == 1) {
$(".huanan").show();
} else if(id == 2) {
$(".huabei").show();
} else if(id == 3) {
$(".huadong").show();
} else {
$(".zhongxi").show();
}
}); $(".area").hover(function() { }, function() {
$(".areaAll,.areaThird ul,.areaFourthly ul").hide();
}) $(".areaThird li").hover(function() {
$(".areaThird li").removeClass('areaSelected');
$(this).addClass('areaSelected');
}); $(".areaFourthly li").hover(function() {
$(".areaFourthly li").removeClass('areaSelected');
$(this).addClass('areaSelected');
});
$(".didian").hover(function() {
$(".areaAll").show();
});
//--------------end--------------- $(".areaThird li,.areaFourthly li").click(function() {
$(".areaAll,.areaThird ul,.areaFourthly ul").hide();
}); //导航点击
$(".perforNav li").click(function() {
$(".perforNav li").removeClass('navSelected');
$(this).addClass('navSelected');
}); //排名选择
$(".selectRank span").click(function() {
$(".selectRank span").removeClass("selectedRank");
$(this).addClass("selectedRank");
}); //endDate : new Date(),
//日期选择
$("#datetimeStart").datetimepicker({
format: 'yyyy-mm-dd',
minView: 'month',
language: 'zh-CN',
autoclose: true,
todayHighlight: 1, //选中高亮
initialDate: new Date(), //初始化的时间
startDate: "2003-01-01", //只显示一年的日期365天
endDate: "2020-02-14",
}).on("click", function() {
//$("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
}); $(".yearSwitch").click(function(){
var id = this.dataset.id;
if(id == 1){
//月
$(".mask").css("left","20px")
this.dataset.id = 0;
}else{
//年
$(".mask").css("left","0")
this.dataset.id = 1;
} }) //--------------end--------------- //第一个参数为外圆的百分比，第二个参数为内圆的百分比
toCanvas('canvas', 80, 89);
//环形进度条
function toCanvas(id, progress, progress2) {
//canvas进度条
var canvas = document.getElementById(id),
ctx = canvas.getContext("2d"),
percent = progress,
percent2 = progress2,
//最终百分比
circleX = canvas.width / 3, //* 中心x坐标*/
circleY = canvas.height / 2, //中心y坐标
radius = 50, //圆环半径
lineWidth = 6, // 圆形线条的宽度
fontSize = 10; //字体大小 //画圆
function circle(cx, cy, r) {
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#eee';
ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
ctx.stroke();
state();
} //进度条说明
function state() {
ctx.beginPath();
ctx.arc(150, 40, 3, 0, 360, false);
ctx.fillStyle = "#1582CF"; //填充颜色,默认是黑色
ctx.fill(); //画实心圆 ctx.beginPath();
ctx.arc(150, 60, 3, 0, 360, false);
ctx.fillStyle = "#0DBA4C"; //填充颜色,默认是黑色
ctx.fill(); //画实心圆 ctx.beginPath();
ctx.arc(150, 80, 3, 0, 360, false);
ctx.fillStyle = "#DB0432"; //填充颜色,默认是黑色
ctx.fill(); //画实心圆
ctx.closePath(); ctx.fillStyle = "#fff";
//ctx.fillWeight = "normal";
ctx.font = "14px April"; ctx.fillText("时间进度", 190, 40); ctx.fillText(">时间进度", 190, 60); ctx.fillText("<时间进度", 190, 80); } //画弧线
function sector(cx, cy, r, startAngle, endAngle, anti) {
ctx.beginPath();
ctx.lineWidth = lineWidth;
endAngle > 100 ? ctx.strokeStyle = "#DB0432" : ctx.strokeStyle = "#1582CF";
//圆弧两端的样式
ctx.lineCap = 'round';
ctx.arc(cx, cy, r, Math.PI, Math.PI * (1 + endAngle / 100));
ctx.stroke();
} //画弧线02
function sector2(cx, cy, r, startAngle, endAngle, anti) {
ctx.beginPath();
ctx.lineWidth = lineWidth;
endAngle > 100 ? ctx.strokeStyle = "#DB0432" : ctx.strokeStyle = "#0DBA4C";
//圆弧两端的样式
ctx.lineCap = 'round';
ctx.arc(cx, cy, r * 3 / 4, Math.PI, Math.PI * (1 + endAngle / 100));
ctx.stroke();
}
//刷新
function loading() {
var percent3 = progress;
if(percent < percent2) percent = percent2;
if(process >= percent) clearInterval(circleLoading);
if(process2 >= percent) clearInterval(circleLoading);
//清除canvas内容
ctx.clearRect(0, 0, circleX * 2, circleY * 2); //中间的字
ctx.font = "20px April"; ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#0DBA4C';
ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY * 4 / 5);
ctx.fillStyle = '#fff';
ctx.font = "10px April";
ctx.fillText("月度完成比", circleX, circleY + 5); //圆形
circle(circleX, circleY, radius); //圆弧
sector(circleX, circleY, radius, Math.PI * 2 / 3, process);
sector2(circleX, circleY, radius, Math.PI * 2 / 3, process2);
//两端圆点
//smallcircle1(50 + Math.cos(2 * Math.PI / 360 * 120) * 100, 150 + Math.sin(2 * Math.PI / 360 * 120) * 100, 5);
//smallcircle2(50 + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * 100, 150 + Math.sin(2 * Math.PI / 360 * (120 + process * 3)) * 100, 5);
//控制结束时动画的速度
if(process < percent3) {
if(process / percent > 0.90) {
process += 0.30;
} else if(process / percent > 0.80) {
process += 0.55;
} else if(process / percent > 0.70) {
process += 0.75;
} else {
process += 1.0;
}
} if(process2 < percent2) {
if(process2 / percent > 0.90) {
process2 += 0.30;
} else if(process2 / percent > 0.80) {
process2 += 0.55;
} else if(process2 / percent > 0.70) {
process2 += 0.75;
} else {
process2 += 1.0;
}
} } var process = 0.0;
var process2 = 0.0; var circleLoading = window.setInterval(function() {
loading();
}, 20); } //echarts不同屏幕字体大小调整
var getDpr = function getDpr() {
var dpr =document.body.clientWidth;
if(dpr > 1226) {
return 12;
} else if(dpr == 2) {
return 24;
} else {
return 36;
}
}; //获取当天日期
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if(month >= 1 && month <= 9) {
month = "0" + month;
}
if(strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
} })</script>
</body> </html>
eCharts_基于eCharts开发的一个多图表页面的更多相关文章
- 基于 React 开发了一个 Markdown 文档站点生成工具
Create React Doc 是一个使用 React 的 markdown 文档站点生成工具.就像 create-react-app 一样,开发者可以使用 Create React Doc 来开发 ...
- 基于Spring开发的一个BIO-RPC框架(对新人很友好)
PART1:先来整体看下项目的构成 其中bio-rpc-core就是所谓的rpc框架 bio-rpc-example-client即所谓的服务调用方(你的项目中想要调用服务的地方) bio-rpc-e ...
- vue中，基于echarts 地图实现一个人才回流的大数据展示效果
0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...
- 使用echarts开发电子屏数据展示页面
背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...
- vue可视化图表 基于Echarts封装好的v-charts简介
**vue可视化图表 基于Echarts封装好的v-charts** 近期公司又一个新的需求,要做一个订单和销售额统计的项目,需要用到可视化图表来更直观的展示数据.首先我想到的是Echarts,众所周 ...
- 基于gulp编写的一个简单实用的前端开发环境好了，安装完Gulp后，接下来是你大展身手的时候了，在你自己的电脑上面随便哪个地方建一个目录，打开命令行，然后进入创建好的目录里面，开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json，打开的速度看你的网速了注意:以下是为了演示 ，我建的一个目录结构，你自己可以根据项目需求自己建目
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- 基于SpringBoot开发一个Restful服务，实现增删改查功能
前言 在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练. ...
- 基于线程开发一个FTP服务器
一,项目题目:基于线程开发一个FTP服务器 二,项目要求: 基本要求: 1.用户加密认证 2.允许同时多用户登录 3.每个用户有自己的家目录 ,且只能访问自己的家目录 4.对用户进行磁盘配 ...
- 一个基于NodeJS开发的APP管理CMS系统
花了大概3周独立开发了一个基于NodeJS的CMS系统,用于公司APP的内容管理( **公司APP?广告放在最后 ^_^ ** ,管理员请理解~~~ )晚上看了部电影还不想睡,闲着也是闲着就作下小小总 ...
随机推荐
- SVM之核函数
SVM之问题形式化 SVM之对偶问题 >>>SVM之核函数 SVM之解决线性不可分 写在SVM之前——凸优化与对偶问题 上一篇SVM之对偶问题中讨论到,SVM最终形式化为以下优化问题 ...
- QWidget一生，从创建到销毁事件流
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QWidget一生,从创建到销毁事件流 本文地址:http://techieliang ...
- 简单名称值对节点类NameValuePair
本类位于System.Data.dll中,名为:System.Data.Common.NameValuePair.主要用途是在DBConnectionString类中,解析ConnectionStri ...
- Qt MetaObject System详解
网上的资源比较乱,该文章整理自地址:http://www.xuebuyuan.com/735789.html Qt meta-object系统基于三个方面: 1.QObject提供一个基类,方便派生类 ...
- Python爬虫requests判断请求超时并重新发送请求
下面是简单的一个重复请求过程,更高级更简单的请移步本博客: https://www.cnblogs.com/fanjp666888/p/9796943.html 在爬虫的执行当中,总会遇到请求连接 ...
- C#中的反射和扩展方法的运用
前段时间做了一个练手的小项目,采用的是三层架构,也就是Models,IDAL,DAL,BLL 和 Web , 在DAL层中各个类中有一个方法比较常用,那就是 RowToClass ,顾名思义,也就是将 ...
- 将下载到本地的JAR包手动添加到Maven仓库(转)
常用Maven仓库网址:http://mvnrepository.com/http://search.maven.org/http://repository.sonatype.org/content/ ...
- BZOJ 1221 软件开发(费用流)
容易看出这是显然的费用流模型. 把每天需要的餐巾数作为限制.需要将天数拆点,x’表示每天需要的餐巾,x’’表示每天用完的餐巾.所以加边 (s,x',INF,0),(x'',t,INF,0). 餐巾可以 ...
- BZOJ3139/BZOJ1306 HNOI2013比赛/CQOI2009循环赛（搜索）
搜索好难啊. 1.对于每个分数集合记忆化. 2.某人得分超过总分,剪枝. 3.某人之后全赢也无法达到总分,剪枝. 4.每有一场比赛分出胜负总分会多三分,而平局则会多两分.某人的分出胜负场次或平局场次超 ...
- 【转】c# 类反射简单操作
转:http://www.jb51.net/article/25863.htm 首先建立一个测试的类 复制代码代码如下: public class MyClass { public int one ...