echarts.js的柱状图的⼤⼩，颜⾊以及显⽰的设置1.设置柱状图的⼤⼩
//设置柱的宽度，要是数据太少，柱⼦太宽不美观~
barWidth:40,
2.设置柱状图的颜⾊
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
具体页⾯的HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro.css" media="all">
<link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-icons.css" media="all">
<link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-responsive.css" media="all">
<link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-ui-light.css" media="all">
<script type="text/javascript" src="content/jquery/jquery.min.js"></script>
<script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootstrap.min.js"></script>
<script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-icons-ie7.min.js"></script>
<script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-charms.min.js"></script>
<script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-panorama.min.js"></script>
<script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-pivot.min.js"></script>
<script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro.min.js"></script>
<script type="text/javascript" src="content/layui/echarts.js"></script>
</head>
<style>
html {
height: 100%;
width: 100%;
min-width: 1680px;
}
body {
height: 100%;
width: 100%;
}
.newdiv1{
background-color:#ffffff;
height:45%;
width:100%;
display: inline-block;
margin-top:3%;
margin-left:2%;
border:1px solid #1CAFB5;
}
.
newdiv2{
height:90%;
width:30%;
display: inline-block;
border:1px solid #1CAFB5;
border-radius:14px;
border-top:8px solid #0172C7;
margin-right:3%;
margin-top:1%;
}
.newsdiv1{
layui和bootstrap哪个好background-color:#ffffff;
height:45%;
width:100%;
display: inline-block;
margin-top:3%;
margin-left:2%;
border:1px solid #1CAFB5;
}
.newsdiv2{
height:90%;
width:97%;
display: inline-block;
border:1px solid #1CAFB5;
border-radius:14px;
border-top:8px solid #0172C7;
margin-right:3%;
margin-top:1%;
}
</style>
<script>
$(function(){
var myChart = echarts.ElementById('chart1'));
/
/ 指定图表的配置项和数据
var option = {
title: {
text: '年度⽤电设备排⾏'
},
tooltip: {},
legend: {
data:['千⽡时']
},
xAxis: {
type : 'category',
name:'额度',
//这是设置的false，就不不显⽰下⽅的x轴，默认是true的
show: true,
data: ["投影机","灯光1","灯光2","电动窗帘","显⽰屏","电脑","摄像头"],
axisLabel: {
//这个是倾斜⾓度，也是考虑到⽂字过多的时候，⽅式覆盖采⽤倾斜
// rotate: 30,
//这⾥是考虑到x轴⽂件过多的时候设置的，如果⽂字太多，默认是间隔显⽰，设置为0，标⽰全部显⽰，当然，如果x轴都不显⽰，那也就没有意义了
interval :0
interval :0
}
},
yAxis: {
type : 'value',
name:'千⽡时',
//下⾯的就很简单了，最⼩是多少，最⼤是多少，默认⼀次增加多少
min: 0,
max: 500,
interval: 100,
//下⾯是显⽰格式化，⼀般来说还是⽤的上的
axisLabel: {
formatter: '{value}'
}
},
series: [{
//设置中间标题
name: '千⽡时',
type: 'bar',
itemStyle: {
normal: {
//好，这⾥就是重头戏了，定义⼀个list，然后根据所以取得不同的值，这样就实现了， color: function(params) {
// build a color map as your need.
//设置柱状图的显⽰颜⾊
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
//以下为是否显⽰，显⽰位置和显⽰格式的设置了
label: {
show: true,
position: 'top',
/
/表⽰柱状图中显⽰数据的值
formatter: '{c}'
//表⽰柱状图中显⽰数据的值以及对应的名称的数量
<!-- formatter: '{b}\n{c}' -->
}
}
},
//设置柱的宽度，要是数据太少，柱⼦太宽不美观~
barWidth:40,
//设置柱状图的值
//设置柱状图的值
data: [500,440,300,280,250,200,100]
}]
};
// 使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(option);
//以下是默认的柱状图
var myChart2 = echarts.ElementById('chart2'));
// 指定图表的配置项和数据
var option2 = {
title: {
text: '年度⽤电设备排⾏'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["投影机","灯光1","灯光2","电动窗帘","显⽰屏","电脑","摄像头"] },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20,4]
}]
};
// 使⽤刚指定的配置项和数据显⽰图表。
myChart2.setOption(option2);
var myChart3 = echarts.ElementById('chart3'));
// 指定图表的配置项和数据
var option3 = {
title: {
text: '年度⽤电设备排⾏'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["投影机","灯光1","灯光2","电动窗帘","显⽰屏","电脑","摄像头"] },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20,4]
}]
};
// 使⽤刚指定的配置项和数据显⽰图表。
myChart3.setOption(option3);
})
</script>
<body>
<div class="newdiv1">
<div class="newdiv2" >
<div class="newdiv2" >
<div >
<span >时间</span>
<select >
<option>2019</option>
<option>2018</option>
</select>
<a href="index.html" >[外链图⽚转存失败(img-3xMWdjmp-1562056029085)(mp.csdn/md editor/content/img/add.png)]</a>
</div>
<div id="chart1" ></div>
</div>
<div class="newdiv2" >
<div >
<span >时间</span>
<select >
<option>2019</option>
<option>2018</option>
</select>
<a href="index.html" >[外链图⽚转存失败(img-e9yK2Uw7-1562056029086)(mp.csdn/mde ditor/content/img/add.png)]</a>
</div>
<div id="chart2" ></div>
</div>
<div class="newdiv2" >
<div >
<span >时间</span>
<select >
<option>2019</option>
<option>2018</option>
</select>
<a href="index.html" >[外链图⽚转存失败(img-5cUjdAOd-1562056029088)(mp.csdn/mde ditor/content/img/add.png)]</a>
</div>
<div id="chart3" ></div>
</div>
</div>
<div class="newdiv1">
<div class="newsdiv2"></div>
</div>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论