运用Echarts 制作柱状折现

来源：互联网发布：linux ssh限制ip 编辑：程序博客网时间：2024/05/18 03:32

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱状图渐变</title>
<style>
body {

background-color: #000C3B;
}
</style>
</head>
<body>
<div id="demo" style="width: 600px;height: 300px;border: 1px solid antiquewhite;background: transparent;margin:40px auto;"></div>
</body>
<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js"></script>
<script>
/*月份*/
var mouth = ["01月","02月","03月","04月","05月","06月"];
/*柱状数据 -- 半年最大值自适应*/
var bar = [19054, 33540, 62109, 61876, 68613, 86604];
/*折线数据 -- 半年共100%*/
var line = [45,23,30,56,80,60];
InShow(bar, line, mouth, 'demo');
function InShow(xl, Permeate, mouth, id) {
var demo = echarts.init(document.getElementById(id));
var bgMax = Math.ceil(Math.max.apply(Math, xl) / Math.pow(10, Math.max.apply(Math, xl).toString().length - 1)) * (Math.pow(10, Math.max.apply(Math, xl).toString().length - 1));
// 指定图表的配置项和数据
var option_demo = {
/*工具提示*/
tooltip: {
show: true
},
/*图例*/
legend: {
data: ['月累收入','完成率'],
top: '10px',
right: '20px',
textStyle: {
color: '#6B737E'
}
},
color: ['#43CBF1', '#E72B34', '#000', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
/*直角坐标系网格可控制位置*/
grid: {
show: false,
// x: '17%',
// y: '15%',
// x2: 10,
// y2: 60,
// borderColor: '#ccc'
},
xAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#A6A6A6',
width: 1
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff',
fontSize: "12px"
}

},
/*分割线*/
/*splitLine: {
show: true,
lineStyle: {
color: ['#E0E0E0'],
type: 'dotted',
opacity: 0.5
}
},*/
data: mouth
},
yAxis: [
{
type: 'value',
name: '收入(万元)',
nameTextStyle: {
color: '#fff'
},
/*计算数组中的最大值*/
max: Math.ceil(Math.max.apply(Math, xl) / Math.pow(10, Math.max.apply(Math, xl).toString().length - 1)) * (Math.pow(10, Math.max.apply(Math, xl).toString().length - 1)),
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#A6A6A6',
width: 1
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#fff'],
type: 'solid',
opacity: 0.08
}
},
/*分割区域*/
splitArea: {
show: true,
interval: 'auto',
areaStyle: {
color: ['transparent']
// color: ['#EFEFEF', '#FFFFFF']
}
}
},
{
type: 'value',
/*分割线*/
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#0183BF',
width: 2,
}
},
/*坐标轴刻度标签*/
axisLabel: {
show: false
}
}
],
/*
* rgba(88,255,255,1)
*
* rgba(52,167,232,1)
* */
series: [
{
type: 'bar',
itemStyle: {
normal: {
color: 'rgba(41,64,94,0.4)'
}
},
silent: true,
barWidth: '50%',
barGap: '-100%', // Make series be overlap
data: [bgMax, bgMax, bgMax, bgMax, bgMax, bgMax]
},
{
name: '月累收入',
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(88,255,255,1)'
}, {
offset: 1,
color: 'rgba(52,167,232,1)'
}])
}
},
barWidth: '50%',
z: 10,
data: xl
},
{
name: '完成率',
type: 'line',
label: {

normal: {
show: true,
position: 'top',
formatter: '{c}%',
textStyle: {
color: '#E72B34'
}
}

},
lineStyle: {
normal: {
width: 2,
color: '#E72B34'
}
},
itemStyle: {
normal: {
color: '#E72B34',
borderColor: '#E72B34',
borderWidth: 4
}
},
yAxisIndex: 1,
z: 100,
data: Permeate
}
]
};
// 使用刚指定的配置项和数据显示图表。
demo.setOption(option_demo);
}
</script>
</html>

阅读全文

1 0