<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#chart-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 1000px;
height: 750px;
}
</style>
<script src="./lib/5.5.0/echarts.min.js"></script>
</head>
<body>
<div id="chart-panel"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">
//初始化图表对象。
var myChart = echarts.init(document.getElementById('chart-panel'));
//图表配置。
var testData = [{
name: "累计完成",
value: 612.5
},
{
name: "标准进度",
value: 548.7
},
{
name: "上月完成率",
value: 300.2
},
{
name: "本月完成率",
value: 300
},
];
var total = 1000;
let option = {
toolbox: {
show: true,
feature: {
saveAsImage: {},
},
},
backgroundColor: '#071347',
grid: {
left: 250,
top: 100,
right: 250,
bottom: 100
},
xAxis: {
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
},
yAxis: [{
type: "category",
data: testData.map((item) => {
return item.name
}),
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 14
},
distance: 20,
},
}],
series: [
{
//普通条形图。
type: "bar",
barWidth: 28,
itemStyle: {
color: "#1588D1"
},
label: {
show: false
},
data: testData,
z: 1,
animationEasing: "elasticOut"
},
{
//在普通条形图上覆盖的带有间隔的象形柱图。
type: "pictorialBar",
itemStyle: {
color: "#07314a"
},
symbolRepeat: "fixed",
symbolMargin: 2,
symbol: "rect",
symbolSize: [3, 28],
symbolPosition: "start",
symbolOffset: [3, -4],
data: [total, total, total, total],
z: 2,
animationEasing: "elasticOut",
},
{
//外框。
type: "bar",
barGap: "-130%",
data: [total, total, total, total],
barWidth: 45,
itemStyle: {
barBorderRadius: [5, 5, 5, 5],
color: "transparent", // 填充色
barBorderColor: "#1588D1", // 边框色
barBorderWidth: 3, // 边框宽度
},
label: {
show: true,
formatter: (params) => {
var text = '{f| ' + (testData[params.dataIndex].value * 100 / total).toFixed(2) + '%}';
return text;
},
rich: {
f: {
color: "#ffffff"
}
},
position: 'right',
},
z: 0
},
{
//条形图最后的的凸出点位装饰。
type: 'scatter',
symbol: 'roundRect',
symbolSize: [7, 20],
symbolOffset: [3, -5],
itemStyle: {
color: "#1588D1"
},
data: [total, total, total, total],
}
]
}
//将图表对象和图表配置进行关联。
myChart.setOption(option);
</script>
</body>
</html>
ECharts柱状图-柱图24.rar （3个子文件） 
图表 lib 5.5.0 
echarts.js 3.21MB echarts.min.js 1005KB svg geo 
index.html 5KB images json 资源评论
图表制作解说(目标1000个图表)
- 粉丝: 1878
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
