作为一个后端人员,搞前端,搞了很长时间,这里面用到的是echarts,里面有相关的引入路径,如果是本地的,你们自己百度去下载.
不多说,直接贴代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>·系·统·建·议·</title>
<style type="text/css">
body{
background: url("http://r.photo.store.qq.com/psb?/V129ilfv3emliO/RVjgkg6JvYTBw8WDY*Y3pXaZwc3NU.GAbXTOIISe1ho!/r/dL8AAAAAAAAA");
background-attachment: fixed;
}
#top{
background-color: #080135;
width: 100%;
color: white;
font-size: 4em;
font-weight: bold;
margin: 0 auto;
}
#advise{
background-color: #13227a;
width: 90%;
padding: 50px;
border-radius: 10px;
margin-left: 5%;
margin-bottom: 5%;
filter:alpha(Opacity=75);-moz-opacity:0.75;opacity: 0.75;
}
caption{
font-size: 2em;
color: white;
}
td{
color:red;
font-size: 1.5em;
text-align: left;
}
th{
color:#d4237a;
font-size: 1.8em;
}
</style>
</head>
<body style="height: 100%; margin: 0">
<div id="top" align="center">·门·店·考·核·</div>
<hr>
<div id="container" style="min-width:400px;height:400px"></div>
<div>
<img style="filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7;width:40px;margin:20px 0 50px 5%;padding-top: 10px;"
src="http://r.photo.store.qq.com/psb?/V129ilfv3emliO/5ZKF6*DJjQZwJeJMpXbD.Ux8ZZ.Iw7kqntLMsVIUrXI!/r/dLYAAAAAAAAA"/>
<font style="font-size: 3em;color: #1296db;font-weight: bold">系统建议</font>
</div>
<div id="advise">
<table class="table">
<caption>系统建议一</caption>
<thead>
<tr>
<th></th>
<th>建议</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:10%;"><input id="checkBox1" type="checkbox" name="vehicle" value="selected" checked="checked" onclick="changeData1()"/></td>
<td>开启店铺满就送活动撒大声地所多所多大大</td>
</tr>
<tr>
<td><input id="checkBox2" type="checkbox" name="vehicle" value="selected" checked="checked" onclick="changeData2()"/></td>
<td>S开启店铺满就送活动优惠券大大立减,让你想不到的优惠</td>
</tr>
</tbody>
</table>
<table class="table">
<caption>系统建议二</caption>
<thead>
<tr>
<th></th>
<th>建议</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:10%;"><input id="checkBox3" type="checkbox" name="vehicle" value="selected" checked="checked" onclick="changeData3()"/></td>
<td>线下充值优惠返利</td>
</tr>
</tbody>
</table>
<table class="table">
<caption>系统建议三</caption>
<thead>
<tr>
<th></th>
<th>建议</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:10%;"><input id="checkBox4" type="checkbox" name="vehicle" value="selected" checked="checked" onclick="changeData4()"/></td>
<td>二维码扫描成为本店会员领取优惠券</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
var list =[{name:'特惠交易客户数',value:[120, 132, 101, 285]},{name:'特惠交易量',value:[220, 182, 191, 234]},{name:'产能比',value:[150, 232, 201, 154]}];
var name1=list[0].name;
var name2=list[1].name;
var name3=list[2].name;
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
let date = new Date();
var months=[];
var year = date.getFullYear();
var month =date.getMonth()+1;
if(month==1){
months.push((year-1)+'年'+(month+10)+'月');
months.push((year-1)+'年'+(month+11)+'月');
months.push(year+'年'+month+'月');
months.push(year+'年'+(month+1)+'月');
}
if(month==2){
months.push((year-1)+'年'+(month+10)+'月');
months.push(year+'年'+(month-1)+'月');
months.push(year+'年'+month+'月');
months.push(year+'年'+(month+1)+'月');
}
if(month==12){
months.push(year+'年'+(month-2)+'月');
months.push(year+'年'+(month-1)+'月');
months.push(year+'年'+month+'月');
months.push((year+1)+'年'+(month-11)+'月');
}
if(month !=1||month !=2||month !=12){
months.push(year+'年'+(month-2)+'月');
months.push(year+'年'+(month-1)+'月');
months.push(year+'年'+month+'月');
months.push(year+'年'+(month+1)+'月');
}
option= null;
option = {
title: {
text: '建议收益 vs 原本收益',
x: 'center',
textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
borderColor: '#ccc',
//fontStyle: 'normal',
fontWeight: 'bolder',
color:'#2EBBD9'
},
},
color: ['#1296db',"#1afa29","#d4237a"], // 图例文字颜色
legend: {
data:[name1,name2,name3],
x:'right',
y:'bottom',
orient: 'vertical',
icon: "circle", // 这个字段控制形状
itemHeight: 50,
itemGap: 40,
padding: [0,50,100,0],
selectedMode: "single",//控制data只显示一条数据
textStyle: {
fontSize:20,
color:'#ccc',
},
selected: {
name1: true,
name2: false,
name3: false,
}
},
calculable : true,
grid : {
left : '10%', //组件离容器左侧的距离
right : '30%',
bottom : '5%',
containLabel : true //grid 区域是否包含坐标轴的刻度标签
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : months,
axisLine:{
lineStyle:{
color:'#f4ea2a',
width:3,//这里是为了突出显示加上的
}
},
axisLabel: {
show: true,
textStyle: {
color: '#1afa29', //更改坐标轴文字颜色
fontSize : 20 //更改坐标轴文字大小
}
},
}
],
yAxis : [
{
type : 'value',
name: '收益效果', //定义Y轴名称
nameLocation: "middle", //左侧居中
nameTextStyle: {
color: '#1296db',//设置name的颜色
fontSize:20
},
axisTick: { // 坐标轴小标记
show:true
},
splitLine: {show:false},
axisLabel: {
interval:1,
show: false,//关闭y轴的数值
/* textStyle: {
color: '#666', //这里可以不写
} */
},
axisLine:{
lineStyle:{
color:'#f4ea2a',
width:3,//这里是为了突出显示加上的
}
}
}
],
series : [
{
name:list[0].name,
type:'line',
data:list[0].value
},
{
name:list[1].name,
type:'line',
data:list[1].value
},
{
name:list[2].name,
type:'line',
data:list[2].value
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
var v1 = list[0].value[3];
var v2 = list[1].value[3];
var v3 = list[2].value[3];
var values1 = [];
var values2 = [];
var values3 = [];
values1.push(list[0].value[0]);
values1.push(list[0].value[1]);
values1.push(list[0].value[2]);
values2.push(list[1].value[0]);
values2.push(list[1].value[1]);
values2.push(list[1].value[2]);
values3.push(list[2].value[0]);
values3.push(list[2].value[1]);
values3.push(list[2].value[2]);
var map={};
function changeData1() {
var checkBox1 = document.getElementById("checkBox1").checked;
map = changeData(checkBox1,values1,values2,values3);
updateData(map[0], map[1], map[2]);
}
function changeData2(){
var checkBox2 = document.getElementById("checkBox2").checked;
map = changeData(checkBox2,values1,values2,values3);
updateData(map[0], map[1], map[2]);
}
function changeData3(){
var checkBox3 = document.getElementById("checkBox3").checked;
map = changeData(checkBox3,values1,values2,values3);
updateData(map[0], map[1], map[2]);
}
function changeData4(){
var checkBox4 = document.getElementById("checkBox4").checked;
map = changeData(checkBox4,values1,values2,values3);
updateData(map[0], map[1], map[2]);
}
function changeData(f,values1,values2,values3){
map={};
if (f) {
v1 = v1 * 1.3;
v2 = v2 * 1.3;
v3 = v3 * 1.3;
if(values1.length===4){
values1.splice(3,1);//指定位置移除数据
}
if(values2.length===4){
values2.splice(3,1);
}
if(values3.length===4){
values3.splice(3,1);
}
values1.push(v1);
values2.push(v2);
values3.push(v3);
map[0]=values1;
map[1]=values2;
map[2]=values3;
} else {
v1 = v1 / 1.3;
v2 = v2 / 1.3;
v3 = v3 / 1.3;
if(values1.length===4){
values1.splice(3,1);
}
if(values2.length===4){
values2.splice(3,1);
}
if(values3.length===4){
values3.splice(3,1);
}
values1.push(v1);
values2.push(v2);
values3.push(v3);
map[0]=values1;
map[1]=values2;
map[2]=values3;
}
return map;
}
function updateData(data1,data2,data3){
myChart.setOption({
series : [
{
name:list[0].name,
type:'line',
data:data1
},
{
name:list[1].name,
type:'line',
data:data2
},
{
name:list[2].name,
type:'line',
data:data3
}
]
});
}
</script>
</html>
这里提醒自己的,如果是集合,没有什么add()和push(),而是:
//往集合里面添加数据
var map={};
map[0]=data1;
map[1]=data2;
map[3]=data3;
是直接往里面赋值的!
9011
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
