<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="margin: 30px; padding: 10px; border: 1px solid #ddd; width: 800px;height:400px;"></div>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> -->
<!-- <script src="../lib/echarts.min.js"></script> -->
<!-- <script src="../lib/lodash.4.17.5.js"></script> -->
<script src="https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
<script type="text/javascript">
// 借鉴
// 1. https://echarts.apache.org/examples/zh/editor.html?c=bar-waterfall
// 2. https://echarts.apache.org/examples/zh/editor.html?c=bar-waterfall2
var isReverse = false;
var showLabel = true;
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = setOption();
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
function isReverseFn () {
isReverse = !isReverse;
option = setOption();
myChart.setOption(option);
}
function setOption() {
let option;
const category = ["北京", "上海", "南京", "天津", "杭州", "苏州"];
const name = ['苹果收获了', '橙子收获了'];
const data = [
[
[0, 2900],
[1700, 2900],
[1400, 1700],
[1200, 1400],
[300, 900],
[0, 300]
],
[
[3500, 3800],
[3800, 4200],
[2430, 3800],
[2200, 2900],
[1300, 1400],
[800, 3000]
]
]
let first = data[0];
let second = data[1];
first.forEach((item, i) => {
item.push('red')
})
second.forEach((item, i) => {
item.push('blue')
})
let series = [];
data.forEach((item, i) => {
series = [...series, ...createSeries(item, name[i], showLabel, isReverse)]
})
let yAxis = {
type: 'value'
}
let xAxis = {
type: 'category',
splitLine: {
show: false
},
data: category
}
if (isReverse) {
[xAxis, yAxis] = [yAxis, xAxis];
}
option = {
title: {
text: '城市水果收获',
// subtext: 'From ExcelHome',
// sublink: 'http://e.weibo.com/1341556070/AjQH99che'
},
color: ['lawngreen', 'orange'],
legend: {
data: name
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
var html = '';
var axisValue = '';
params.forEach(item => {
axisValue = item.axisValue;
const range = item.data.range;
html += item.marker + item.name + range[0] + ' - ' + range[1] + '<br/>';
})
const {name, data: {range}} = params[0];
return axisValue + '<br/>' + html;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: xAxis,
yAxis: yAxis,
series: series
};
return option;
}
// 轴数据处理
function dataFormat (data, name, isReverse) {
let min = []; // 区间的最小值
let max = []; // 区间的最大值
let minLabel = []; // 显示区间的最小值的 label 数据,在 max 上通过 markpoint 实现,以控制 label 颜色值和显示的柱子颜色值一致,并且显示隐藏有效
data.forEach((item, i) => {
min.push(item[0])
// 横向:coord: [offsetx,y],等同于 xAxis: offsetx, yAxis: y。其中,offsetx 表示偏移值,y 表示bar的索引。
// 竖向:[x, offsety]
const coord = isReverse ? [item[0], i] : [i, item[0]];
minLabel.push({
value: item[0], // 对值进行格式化
coord: item[0] ? coord : []
})
max.push({
value: item[1] - item[0], // 差值作为叠加值
range: item, // tooltip 显示
name, // legend 显示
label: {
formatter: '' + item[1], // 最终值作为显示值
},
itemStyle: {
color: item[2]
}
})
})
return {
min,
max,
minLabel
}
}
// 生成序列数据
function createSeries (arr, name, showLabel, isReverse) {
let newSeries = [];
const {min, max, minLabel} = dataFormat(arr, name, isReverse);
const maxPosition = isReverse ? 'right' : 'top';
const minPosition = isReverse ? 'left' : 'bottom';
newSeries = [
{
type: 'bar',
stack: name,
tooltip: {
show: false
},
// 透明
itemStyle: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
},
emphasis: {
itemStyle: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
label: {
show: false,
},
data: min
},
{
type: 'bar',
stack: name,
name: name,
tooltip: {
show: true,
},
label: {
show: showLabel,
position: maxPosition,
},
markPoint: {
symbol: 'rect',
// 图形上面的小头隐藏
symbolSize: 0.000000000000001,
label: {
show: showLabel,
position: minPosition,
},
data: minLabel
},
data: max,
}
]
return newSeries;
}
</script>
</body>
</html>
echarts柱状图展现区间数据
猜你喜欢
转载自blog.csdn.net/szw2377132528/article/details/129479086
今日推荐
周排行