<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="./js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 800px;height:700px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 模拟数据
const aDataList = [
{ name: '贾汪区', value: 421 },
{ name: '丰县', value: 563 },
{ name: '沛县', value: 147 },
{ name: '铜山区', value: 365 },
{ name: '睢宁区', value: 413 },
{ name: '新沂区', value: 741 },
{ name: '邳州市', value: 951 },
{ name: '徐州市', value: 951 }
];
const bDataList = [
{ name: '贾汪区', value: 421 },
{ name: '丰县', value: 563 },
{ name: '沛县', value: 147 },
{ name: '铜山区', value: 365 },
{ name: '睢宁区', value: 413 },
{ name: '新沂区', value: 741 },
{ name: '邳州市', value: 951 },
{ name: '徐州市', value: 951 }
];
const cDataList = [
{ name: '贾汪区', value: 421 },
{ name: '丰县', value: 563 },
{ name: '沛县', value: 147 },
{ name: '铜山区', value: 365 },
{ name: '睢宁区', value: 413 },
{ name: '新沂区', value: 741 },
{ name: '邳州市', value: 951 },
{ name: '徐州市', value: 951 }
];
option = {
backgroundColor:"#e5e5e5",
xAxis: [
{
type: 'category',
data: aDataList.map((item) => item.name)
}
],
yAxis: [
{
type: 'value'
}
],
series: [
// a
{
name: '去年人数',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{
offset: 0,
color: 'rgba(255,208,0,0.30)' // 0% 处的颜色
},
{
offset: 1,
color: '#FF9E00' // 100% 处的颜色
}
],
false
)
}
},
data: aDataList.map((item) => item.value),
barGap: 0
},
{
name: '去年人数',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{
offset: 0,
color: 'rgba(255,208,0,0.30)' // 0% 处的颜色
},
{
offset: 1,
color: '#FFB000' // 100% 处的颜色
}
],
false
)
}
},
barGap: 0,
data: aDataList.map((item) => item.value),
// label: {
// show: true,
// position: 'top',
// textStyle: {
// color: 'white',
// fontSize: 10
// }
// }
},
{
name: '去年人数',
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
borderWidth: 1,
borderColor: '#FFC000',
color: '#FFC000' // 控制顶部方形的颜色
},
symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
symbolSize: ['20', '7'], // 第一个值控制顶部方形大小
symbolOffset: ['-20', '-4'], // 控制顶部放行 左右和上下
symbolRotate: -16,
symbolPosition: 'end',
data: aDataList.map((item) => item.value),
z: 3
},
// b
{
name: '今年人数',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,1,0,0,
[
{
offset: 0,
color: 'rgba(3,200,195,0.20)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(3,200,195,.5)' // 0% 处的颜色
}
],
false
)
}
},
data: bDataList.map((item) => item.value),
barGap: 0
},
{
name: '今年人数',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{
offset: 0,
color: 'rgba(3,200,195,0.20) ' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(3,200,195,.9)' // 100% 处的颜色
}
],
false
)
}
},
barGap: 0,
data: bDataList.map((item) => item.value),
// label: {
// show: true,
// position: 'top',
// textStyle: {
// color: 'white',
// fontSize: 10
// }
// }
},
{
name: '今年人数',
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
borderWidth: 1,
borderColor: '#03C8C3',
color: '#03C8C3' // 顶部方块的颜色
},
symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
symbolSize: ['20', '7'], // 第一个值控制顶部方形大小
symbolOffset: ['0', '-4'], // 控制顶部放行 左右和上下
symbolRotate: -16,
symbolPosition: 'end',
data: bDataList.map((item) => item.value),
z: 3
},
// c
{
name: '今年人数',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,1,0,0,
[
{
offset: 0,
color: 'rgba(3,20,195,0.20)' // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(3,20,195,.5)' // 0% 处的颜色
}
],
false
)
}
},
data: cDataList.map((item) => item.value),
barGap: 0
},
{
name: '今年人数',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[
{
offset: 0,
color: 'rgba(3,200,195,0.20) ' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(3,20,195,.9)' // 100% 处的颜色
}
],
false
)
}
},
barGap: 0,
data: cDataList.map((item) => item.value),
// label: {
// show: true,
// position: 'top',
// textStyle: {
// color: 'white',
// fontSize: 10
// }
// }
},
{
name: '今年人数',
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
borderWidth: 1,
borderColor: '#03C8C3',
color: '#03C8C3' // 顶部方块的颜色
},
symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
symbolSize: ['20', '7'], // 第一个值控制顶部方形大小
symbolOffset: ['20', '-4'], // 控制顶部放行 左右和上下
symbolRotate: -16,
symbolPosition: 'end',
data: cDataList.map((item) => item.value),
z: 3
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
symbolOffset: ['-20', '-4'], // 控制顶部方位的位置 左右和上下