调整柱状图圆角弧度_html-js-css

概述<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="

<!DOCTYPE HTML>
<HTML lang="en">
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0">
<Meta name="description" content="ECharts">
<Title>Echarts学习记录</Title>
<script type="text/JavaScript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.Js"></script>
</head>
<script type="text/JavaScript">
var wIDth;
var height;
var myChart;
$(function(){
//自适应设置
wIDth = $(window).wIDth();
height = $(window).height();
$("#mainbar").CSS("wIDth",wIDth-40);
$("#mainbar").CSS("height",height-40);
console.log(height);
setEcharts();
});

$(window).resize(function() {
wIDth = $(window).wIDth();
height = $(window).height();
$("#mainbar").CSS("wIDth",height-40);
});

function setEcharts(){
myChart = echarts.init(document.getElementByID(‘mainbar‘));
//自适应
window.onresize = myChart.resize;

myChart.setoption({

Title : {
text: ‘未来一周气温变化‘,
subtext: ‘纯属虚构‘
},
legend: {
data:[‘蒸发量‘,‘降水量‘]
},
calculable : true,
xAxis : [
{
//show:false,//影藏
type : ‘category‘,
data : [‘1月‘,‘2月‘,‘3月‘,‘4月‘,‘5月‘,‘6月‘,‘7月‘,‘8月‘,‘9月‘,‘10月‘,‘11月‘,‘12月‘],
}
],
yAxis : [
{
type : ‘value‘,
serIEs : [
{
name:‘蒸发量‘,
type:‘bar‘,
data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3]
},
{
name:‘降水量‘,
data:[2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3],
//顶部数字展示pzr
itemStyle: {
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
emphasis: {
barborderRadius: 30
},

normal: {
//柱形图圆角，初始化效果
barborderRadius:[10,10,10],
label: {
show: true,//是否展示
textStyle: {
FontWeight:‘bolder‘,
FontSize : ‘12‘,
FontFamily : ‘微软雅黑‘,
}
}
}
},
}
]
});
}

</script>

总结

以上是内存溢出为你收集整理的调整柱状图圆角弧度全部内容，希望文章能够帮你解决调整柱状图圆角弧度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1051528.html