特殊的象形柱图echarts

最新推荐文章于 2024-05-28 21:17:54 发布
最新推荐文章于 2024-05-28 21:17:54 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： echarts 文章标签： echarts 象形柱图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ya_nan_zhang/article/details/90642601
版权

效果图

在这里插入图片描述

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>特殊---柱图</title>
	<link rel="stylesheet" type="text/css" href="css/css-reset.css"/>
	<style type="text/css">
		.kk-echarts{
			background: #2322ac;
			width: 535px;
			height: 214px;
		}
		#kkEcharts1,#kkEcharts2{
			width: 100%;
			height: 107px
		}
	</style>
</head>
<body>
	<div class="kk-echarts">
		<div id="kkEcharts1"></div>
		<div id="kkEcharts2"></div>
	</div>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/demo-opt.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var kkOpt = JSON.parse(JSON.stringify(barOption));
	var kkBar = echarts.init(document.getElementById('kkEcharts1'));
	kkOpt.series[0].label.normal.formatter = function(param){
		return param.data.name;
	}
	kkOpt.tooltip.formatter = function(param){
		console.log(param);
		return param[0].axisValue+'<br/>'+param[0].marker+' '+param[0].seriesName+'：'+param[0].data.value+'%'
	}
	kkBar.setOption(kkOpt);
	var kkOpt1 = JSON.parse(JSON.stringify(barOption));
	var kkBar1 = echarts.init(document.getElementById('kkEcharts2'));
	kkOpt1.xAxis[0].position = 'top';
	kkOpt1.yAxis[0].inverse = true;
	kkOpt1.grid.top = '-15';
	kkOpt1.grid.bottom = '50';
	kkOpt1.series[1].symbolOffset = ['0','100%'];
	kkOpt1.series[0].label.normal.position = ['0','150%'];
	kkOpt1.series[0].label.normal.formatter = function(param){
		return param.data.name;
	}
	    kkBar1.setOption(kkOpt1);
</script>
</body>
</html>

js

var barOption = {
    backgroundColor:'#2423af',
	"color": ["#17e1f4"],
	"tooltip": {
		"trigger": "axis",
		"axisPointer": {
			"type": "shadow"
		}
	},
	"grid": {
		"left": "3%",
		"right": "4%",
		 top:50,
		"bottom": "-10",
		"containLabel": true
	},
	"xAxis": [{
		"type": "category",
		"data": ["Mon", "Tue", "Wed", "Thu", "Fri"],
		"axisTick": {
			"alignWithLabel": true
		},
		axisLine: {
            show: true,
            lineStyle:{
            	color: '#7696ec'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
        	show:false,
            textStyle: {
                color: '#7696ec'
            },
            formatter: '{value}'
        }
	}],
	"yAxis": [{
		"type": "value",
		min:0,
		max:30,
		interval:10,
		axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
        	show:true,
            textStyle: {
                color: '#7696ec'
            },
             formatter: '{value}'
        },
        splitLine:{
        	show:false,
        	lineStyle:{
        		color: '#7696ec'
        	}
        }
	}],
	"series": [{
		"name": "完成进度",
		"type": "bar",
		"barWidth": "1",
		label:{
			normal: {
                show: true,
                position: ['0', '-110%']
           }
		},
		"data": [{
		    name:'1',
		    value:24,
		     symbolSize:  ['19', '22'],
		     symbol:'image//data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAWCAYAAAAinad/AAAB0klEQVQ4jZ3UT4iNURjH8c/l0jR3oSlybW5J/iwYmkhJiihN2CghaqaI8neBBaUsZCELkmIxhYWFUkpTY6NZKKEURSnKXV0LCXNDV8PivPfOceadccdv9Z6n5/m+v3POc57C3A8j2tRi/MbbOFirlFrf09olYTse4yj60ZkmTAU2hNm4jAGcSeunAnuJRrQ+hUa5Wr/6P7AGbgjnBsWsfn+5Wt9artY7Cm1cwCxsxlJcwjJcy9axrhdzikvoxQaszoqbeftwEj04ji14gGG8iJ0VcBjn0PUPt49wCG/yWqMg3NCVHNDXHNh63EmDTdgx9E3gYg2e5cQXGtt+C9Yh9MxE6hZ6LFUnVqawdUIzpjqC+5mzAWxCGRejnG1xQVF4c3laLmx9OuZhl3CmS6KcXpyOnf1IIB+xE2uFvvqMd6higXBZTXWXq/UZMexVAuvCfKzCCeFhD2EQr5PcAubEsKd4HyXMxAXsxQju4VOWtyKBjWbOW7BRnDVePZmb80Ijf8/JeV6rlFrx+AXcxp6cgsnUV6uUbsbOmuoXpkK7GsStOBDDfuEAdgg3N5mGsdvYOBoHa+ouFmVOH+Jb9LMnOIiN+JIWtjPPCGPpZwb8S/HU+APop2XlShWUqwAAAABJRU5ErkJggg=='
		},{
		    name:'1',
		    value:24,
		     symbolSize:  ['19', '22'],
		     symbol:'image//data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAWCAYAAAAinad/AAAB0klEQVQ4jZ3UT4iNURjH8c/l0jR3oSlybW5J/iwYmkhJiihN2CghaqaI8neBBaUsZCELkmIxhYWFUkpTY6NZKKEURSnKXV0LCXNDV8PivPfOceadccdv9Z6n5/m+v3POc57C3A8j2tRi/MbbOFirlFrf09olYTse4yj60ZkmTAU2hNm4jAGcSeunAnuJRrQ+hUa5Wr/6P7AGbgjnBsWsfn+5Wt9artY7Cm1cwCxsxlJcwjJcy9axrhdzikvoxQaszoqbeftwEj04ji14gGG8iJ0VcBjn0PUPt49wCG/yWqMg3NCVHNDXHNh63EmDTdgx9E3gYg2e5cQXGtt+C9Yh9MxE6hZ6LFUnVqawdUIzpjqC+5mzAWxCGRejnG1xQVF4c3laLmx9OuZhl3CmS6KcXpyOnf1IIB+xE2uFvvqMd6higXBZTXWXq/UZMexVAuvCfKzCCeFhD2EQr5PcAubEsKd4HyXMxAXsxQju4VOWtyKBjWbOW7BRnDVePZmb80Ijf8/JeV6rlFrx+AXcxp6cgsnUV6uUbsbOmuoXpkK7GsStOBDDfuEAdgg3N5mGsdvYOBoHa+ouFmVOH+Jb9LMnOIiN+JIWtjPPCGPpZwb8S/HU+APop2XlShWUqwAAAABJRU5ErkJggg=='
		},{
		    name:'1',
		    value:24,
		     symbolSize:  ['19', '22'],
		     symbol:'image//data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAWCAYAAAAinad/AAAB0klEQVQ4jZ3UT4iNURjH8c/l0jR3oSlybW5J/iwYmkhJiihN2CghaqaI8neBBaUsZCELkmIxhYWFUkpTY6NZKKEURSnKXV0LCXNDV8PivPfOceadccdv9Z6n5/m+v3POc57C3A8j2tRi/MbbOFirlFrf09olYTse4yj60ZkmTAU2hNm4jAGcSeunAnuJRrQ+hUa5Wr/6P7AGbgjnBsWsfn+5Wt9artY7Cm1cwCxsxlJcwjJcy9axrhdzikvoxQaszoqbeftwEj04ji14gGG8iJ0VcBjn0PUPt49wCG/yWqMg3NCVHNDXHNh63EmDTdgx9E3gYg2e5cQXGtt+C9Yh9MxE6hZ6LFUnVqawdUIzpjqC+5mzAWxCGRejnG1xQVF4c3laLmx9OuZhl3CmS6KcXpyOnf1IIB+xE2uFvvqMd6higXBZTXWXq/UZMexVAuvCfKzCCeFhD2EQr5PcAubEsKd4HyXMxAXsxQju4VOWtyKBjWbOW7BRnDVePZmb80Ijf8/JeV6rlFrx+AXcxp6cgsnUV6uUbsbOmuoXpkK7GsStOBDDfuEAdgg3N5mGsdvYOBoHa+ouFmVOH+Jb9LMnOIiN+JIWtjPPCGPpZwb8S/HU+APop2XlShWUqwAAAABJRU5ErkJggg=='
		},{
		    name:'1',
		    value:24,
		     symbolSize:  ['19', '22'],
		     symbol:'image//data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAWCAYAAAAinad/AAAB0klEQVQ4jZ3UT4iNURjH8c/l0jR3oSlybW5J/iwYmkhJiihN2CghaqaI8neBBaUsZCELkmIxhYWFUkpTY6NZKKEURSnKXV0LCXNDV8PivPfOceadccdv9Z6n5/m+v3POc57C3A8j2tRi/MbbOFirlFrf09olYTse4yj60ZkmTAU2hNm4jAGcSeunAnuJRrQ+hUa5Wr/6P7AGbgjnBsWsfn+5Wt9artY7Cm1cwCxsxlJcwjJcy9axrhdzikvoxQaszoqbeftwEj04ji14gGG8iJ0VcBjn0PUPt49wCG/yWqMg3NCVHNDXHNh63EmDTdgx9E3gYg2e5cQXGtt+C9Yh9MxE6hZ6LFUnVqawdUIzpjqC+5mzAWxCGRejnG1xQVF4c3laLmx9OuZhl3CmS6KcXpyOnf1IIB+xE2uFvvqMd6higXBZTXWXq/UZMexVAuvCfKzCCeFhD2EQr5PcAubEsKd4HyXMxAXsxQju4VOWtyKBjWbOW7BRnDVePZmb80Ijf8/JeV6rlFrx+AXcxp6cgsnUV6uUbsbOmuoXpkK7GsStOBDDfuEAdgg3N5mGsdvYOBoHa+ouFmVOH+Jb9LMnOIiN+JIWtjPPCGPpZwb8S/HU+APop2XlShWUqwAAAABJRU5ErkJggg=='
		},{
		    name:'1',
		    value:24,
		     symbolSize:  ['19', '22'],
		     symbol:'image//data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAWCAYAAAAinad/AAAB0klEQVQ4jZ3UT4iNURjH8c/l0jR3oSlybW5J/iwYmkhJiihN2CghaqaI8neBBaUsZCELkmIxhYWFUkpTY6NZKKEURSnKXV0LCXNDV8PivPfOceadccdv9Z6n5/m+v3POc57C3A8j2tRi/MbbOFirlFrf09olYTse4yj60ZkmTAU2hNm4jAGcSeunAnuJRrQ+hUa5Wr/6P7AGbgjnBsWsfn+5Wt9artY7Cm1cwCxsxlJcwjJcy9axrhdzikvoxQaszoqbeftwEj04ji14gGG8iJ0VcBjn0PUPt49wCG/yWqMg3NCVHNDXHNh63EmDTdgx9E3gYg2e5cQXGtt+C9Yh9MxE6hZ6LFUnVqawdUIzpjqC+5mzAWxCGRejnG1xQVF4c3laLmx9OuZhl3CmS6KcXpyOnf1IIB+xE2uFvvqMd6higXBZTXWXq/UZMexVAuvCfKzCCeFhD2EQr5PcAubEsKd4HyXMxAXsxQju4VOWtyKBjWbOW7BRnDVePZmb80Ijf8/JeV6rlFrx+AXcxp6cgsnUV6uUbsbOmuoXpkK7GsStOBDDfuEAdgg3N5mGsdvYOBoHa+ouFmVOH+Jb9LMnOIiN+JIWtjPPCGPpZwb8S/HU+APop2XlShWUqwAAAABJRU5ErkJggg=='
		}]
	}, {
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolRotate: 0,
            symbolOffset: ['3', '-100%'],
            data:[{
    		    name:'1',
    		    value:24,
    		     symbolSize: ['19', '22'],
    		     symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAWCAYAAAAinad/AAAB0klEQVQ4jZ3UT4iNURjH8c/l0jR3oSlybW5J/iwYmkhJiihN2CghaqaI8neBBaUsZCELkmIxhYWFUkpTY6NZKKEURSnKXV0LCXNDV8PivPfOceadccdv9Z6n5/m+v3POc57C3A8j2tRi/MbbOFirlFrf09olYTse4yj60ZkmTAU2hNm4jAGcSeunAnuJRrQ+hUa5Wr/6P7AGbgjnBsWsfn+5Wt9artY7Cm1cwCxsxlJcwjJcy9axrhdzikvoxQaszoqbeftwEj04ji14gGG8iJ0VcBjn0PUPt49wCG/yWqMg3NCVHNDXHNh63EmDTdgx9E3gYg2e5cQXGtt+C9Yh9MxE6hZ6LFUnVqawdUIzpjqC+5mzAWxCGRejnG1xQVF4c3laLmx9OuZhl3CmS6KcXpyOnf1IIB+xE2uFvvqMd6higXBZTXWXq/UZMexVAuvCfKzCCeFhD2EQr5PcAubEsKd4HyXMxAXsxQju4VOWtyKBjWbOW7BRnDVePZmb80Ijf8/JeV6rlFrx+AXcxp6cgsnUV6uUbsbOmuoXpkK7GsStOBDDfuEAdgg3N5mGsdvYOBoHa+ouFmVOH+Jb9LMnOIiN+JIWtjPPCGPpZwb8S/HU+APop2XlShWUqwAAAABJRU5ErkJggg=='
    		},{
    		    name:'1',
    		    value:24,
    		     symbolSize: ['19', '22'],
    		     symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAWCAYAAAAinad/AAAB0klEQVQ4jZ3UT4iNURjH8c/l0jR3oSlybW5J/iwYmkhJiihN2CghaqaI8neBBaUsZCELkmIxhYWFUkpTY6NZKKEURSnKXV0LCXNDV8PivPfOceadccdv9Z6n5/m+v3POc57C3A8j2tRi/MbbOFirlFrf09olYTse4yj60ZkmTAU2hNm4jAGcSeunAnuJRrQ+hUa5Wr/6P7AGbgjnBsWsfn+5Wt9artY7Cm1cwCxsxlJcwjJcy9axrhdzikvoxQaszoqbeftwEj04ji14gGG8iJ0VcBjn0PUPt49wCG/yWqMg3NCVHNDXHNh63EmDTdgx9E3gYg2e5cQXGtt+C9Yh9MxE6hZ6LFUnVqawdUIzpjqC+5mzAWxCGRejnG1xQVF4c3laLmx9OuZhl3CmS6KcXpyOnf1IIB+xE2uFvvqMd6higXBZTXWXq/UZMexVAuvCfKzCCeFhD2EQr5PcAubEsKd4HyXMxAXsxQju4VOWtyKBjWbOW7BRnDVePZmb80Ijf8/JeV6rlFrx+AXcxp6cgsnUV6uUbsbOmuoXpkK7GsStOBDDfuEAdgg3N5mGsdvYOBoHa+ouFmVOH+Jb9LMnOIiN+JIWtjPPCGPpZwb8S/HU+APop2XlShWUqwAAAABJRU5ErkJggg=='
    		},{
    		    name:'1',
    		    value:24,
    		     symbolSize: ['19', '22'],
    		     symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAWCAYAAAAinad/AAAB0klEQVQ4jZ3UT4iNURjH8c/l0jR3oSlybW5J/iwYmkhJiihN2CghaqaI8neBBaUsZCELkmIxhYWFUkpTY6NZKKEURSnKXV0LCXNDV8PivPfOceadccdv9Z6n5/m+v3POc57C3A8j2tRi/MbbOFirlFrf09olYTse4yj60ZkmTAU2hNm4jAGcSeunAnuJRrQ+hUa5Wr/6P7AGbgjnBsWsfn+5Wt9artY7Cm1cwCxsxlJcwjJcy9axrhdzikvoxQaszoqbeftwEj04ji14gGG8iJ0VcBjn0PUPt49wCG/yWqMg3NCVHNDXHNh63EmDTdgx9E3gYg2e5cQXGtt+C9Yh9MxE6hZ6LFUnVqawdUIzpjqC+5mzAWxCGRejnG1xQVF4c3laLmx9OuZhl3CmS6KcXpyOnf1IIB+xE2uFvvqMd6higXBZTXWXq/UZMexVAuvCfKzCCeFhD2EQr5PcAubEsKd4HyXMxAXsxQju4VOWtyKBjWbOW7BRnDVePZmb80Ijf8/JeV6rlFrx+AXcxp6cgsnUV6uUbsbOmuoXpkK7GsStOBDDfuEAdgg3N5mGsdvYOBoHa+ouFmVOH+Jb9LMnOIiN+JIWtjPPCGPpZwb8S/HU+APop2XlShWUqwAAAABJRU5ErkJggg=='
    		},{
    		    name:'1',
    		    value:24,
    		     symbolSize: ['19', '22'],
    		     symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAWCAYAAAAinad/AAAB0klEQVQ4jZ3UT4iNURjH8c/l0jR3oSlybW5J/iwYmkhJiihN2CghaqaI8neBBaUsZCELkmIxhYWFUkpTY6NZKKEURSnKXV0LCXNDV8PivPfOceadccdv9Z6n5/m+v3POc57C3A8j2tRi/MbbOFirlFrf09olYTse4yj60ZkmTAU2hNm4jAGcSeunAnuJRrQ+hUa5Wr/6P7AGbgjnBsWsfn+5Wt9artY7Cm1cwCxsxlJcwjJcy9axrhdzikvoxQaszoqbeftwEj04ji14gGG8iJ0VcBjn0PUPt49wCG/yWqMg3NCVHNDXHNh63EmDTdgx9E3gYg2e5cQXGtt+C9Yh9MxE6hZ6LFUnVqawdUIzpjqC+5mzAWxCGRejnG1xQVF4c3laLmx9OuZhl3CmS6KcXpyOnf1IIB+xE2uFvvqMd6higXBZTXWXq/UZMexVAuvCfKzCCeFhD2EQr5PcAubEsKd4HyXMxAXsxQju4VOWtyKBjWbOW7BRnDVePZmb80Ijf8/JeV6rlFrx+AXcxp6cgsnUV6uUbsbOmuoXpkK7GsStOBDDfuEAdgg3N5mGsdvYOBoHa+ouFmVOH+Jb9LMnOIiN+JIWtjPPCGPpZwb8S/HU+APop2XlShWUqwAAAABJRU5ErkJggg=='
    		},{
    		    name:'1',
    		    value:24,
    		     symbolSize: ['19', '22'],
    		     symbol:'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAWCAYAAAAinad/AAAB0klEQVQ4jZ3UT4iNURjH8c/l0jR3oSlybW5J/iwYmkhJiihN2CghaqaI8neBBaUsZCELkmIxhYWFUkpTY6NZKKEURSnKXV0LCXNDV8PivPfOceadccdv9Z6n5/m+v3POc57C3A8j2tRi/MbbOFirlFrf09olYTse4yj60ZkmTAU2hNm4jAGcSeunAnuJRrQ+hUa5Wr/6P7AGbgjnBsWsfn+5Wt9artY7Cm1cwCxsxlJcwjJcy9axrhdzikvoxQaszoqbeftwEj04ji14gGG8iJ0VcBjn0PUPt49wCG/yWqMg3NCVHNDXHNh63EmDTdgx9E3gYg2e5cQXGtt+C9Yh9MxE6hZ6LFUnVqawdUIzpjqC+5mzAWxCGRejnG1xQVF4c3laLmx9OuZhl3CmS6KcXpyOnf1IIB+xE2uFvvqMd6higXBZTXWXq/UZMexVAuvCfKzCCeFhD2EQr5PcAubEsKd4HyXMxAXsxQju4VOWtyKBjWbOW7BRnDVePZmb80Ijf8/JeV6rlFrx+AXcxp6cgsnUV6uUbsbOmuoXpkK7GsStOBDDfuEAdgg3N5mGsdvYOBoHa+ouFmVOH+Jb9LMnOIiN+JIWtjPPCGPpZwb8S/HU+APop2XlShWUqwAAAABJRU5ErkJggg=='
    		}]
        }]
}

效果二

在这里插入图片描述

const coalLineOption = {
	title:{
        text:'dkfjdkfjd ',
        left:'center',
		top:'top',
        textStyle:{
            color:'#fff',
            fontSize:30
        }
    },
    legend:{
      data:[{
       name:'日最大负载率',
       icon:'rect'
      }],
	  textStyle:{
        color:'#6ab0ff',
        fontSize:24
      },
      top:'10%',
      itemWidth:58,
      itemHeight:8
    },
    tooltip: {
        trigger: 'axis',
        formatter:'',
        axisPointer: {
            show:false,
            type:'line',
            lineStyle: {
                type:'dashed',
                color: '#53658c',
                width: 2,
            }
        }
    },
    grid: {
        left: '0',
        right: '5%',
        bottom: '10%',
        top: '20%',
        containLabel: true
    },
    xAxis: [
        {
        type: 'category',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#17104c'
            }
        },
        axisLabel: {
            margin: 10,
            formatter: '{value}',
            textStyle: {
                fontSize: 22,
                color: '#c3fbff'
            }
        },
        axisTick: {
            show: false
        },
        data: [3,6,9,23,45,56,78,89]
    }],
    yAxis: [{
        type: 'value',
        name: '(%)',
		nameTextStyle:{
             color: '#6ab0ff',
             fontSize:22,
             padding:[0,50,0,0]
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show:false,
            lineStyle: {
                color: '#0E2A43'
            }
        },
        axisLabel: {
            show:true,
            margin: 10,
            textStyle: {
                fontSize: 22,
                color: '#6ab0ff'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#201b55',
				width:2
            }
        },
        data:[5,6,7,23,12,23]
    }],
    series: [{
        name: '日最大负载率',
        type: 'line',
        smooth: true,
		 symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxOTlCQkMxOEMyMzExRTk5OUEyREFFNTQ1QzJFMDAyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxOTlCQkMyOEMyMzExRTk5OUEyREFFNTQ1QzJFMDAyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjE5OUJCQkY4QzIzMTFFOTk5QTJEQUU1NDVDMkUwMDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjE5OUJCQzA4QzIzMTFFOTk5QTJEQUU1NDVDMkUwMDIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4S/U3WAAAFN0lEQVR42rya348UNwzHk0z2btkeBXEStE+0UtXHtiD+AP7/Fw5eQAgJeDuqXlUV7sfu7UyYIAf5vms7mWXESNbkfkwmn7Fjx068S8l94+UrP1tXqvw86Yp7DtxPgPETBp+EdpobxgsAXgD0E7TDB5sMAA//szeMNlBLNHj86gijiWs1xdioDRxwENrBgHMCCJcB7thuAooVEK+AaIJw2pwZBAgUD0BJmVMmjDc0UQbdsXsHv0M4NDNp8D2787YHYFNDsRFEgogMhrc7gPGCiQ0w+CxbaHsAdTWgWJnwCBHZ4LksWFsCcoJW+MCzXLN2YHBoqgPry2swFkgHEAuQAwCKgnZQK1sA2dD9WtBqDx99YH1+BYqNJtYBxAHIIQNaMA0F5ggcaGXLBr+hZzbsOc1Ek/K3rzAYExAiChAZYAn38rcIQByGm9aGZA0arbl2jFVftGM5AEkrBSLLLYK4xdqHDCrCV04AU0CuSKIy1zAeBUE7O5rR5gpqpYCsQDhUMbnSh2O23zPTyhCXArwWYAcl6O5oRgKKglYKyA8kR6y9IpglzJ2iGT5XikYuGEwQPJcUlwJzAqIDQE8maaYMtMDcHuVHArpNv8uwD0b5dZR7DKwA/DvK21E+kFY4uFcCK49HHYDcCJp+gplxzRwRSJY7BPPTKH+Mcl+YuGU+3SHQv0d5Mcop04qDudWDC+dQqB1vaSYIIEswsyMa3N1Rfhvl0YS0IgM/HeXZKG8YyLYi2upCjDM1zaCZZfl9lMcTs8zy/if0vlfMy10zb7dhcchcLsXGYGnNm2xaf+0Bwj9ifv4/ijfFMSzpvhDilphuhEqc0dwzjy+PwP3uc3UEtAL3fgBesbOCalDWZqFhFZBN7udRjt081zFp+VAAiUKKsZOih4YVgDaHsjx0814PhfWdlieZmqkBSavnezPDHAsgXQOId0Jq6xW4oMAtZ4ZZVVJxs2YXJpSXJM0dzAwTKytmb9XlQqWulSrVlX5mmG1DmUktHIaG6qFWRelpkTjndSEsKvn7zYJGqHz5wSg+ZDmbGeaM1QJ6KGgMQgpwAyo0guDCr6S772eGec/63gJUDWgnEdKW31h4KKnu6YzaOaP+1uwdFlTS5oymGdTGBjLEbOMnMziCnvq5oH6vBCBeIFQ1o9V+Na3wDPGcvubJN+ytJHr+lPq7YO+wtLMz7thQbeQgawayYOnua/L3f05cdOb+n9Pz/4/yifouQGtDOzuF9aiYGQfidS1Jiqm+pJRYyzTxKpnmBwLJ8pEBXQpAKkiBqZlYJwB1sMQoFcr84n+oBvALrbVW9MyWBpkn+juCKKb6iUA4jKQZ09QszaCZaRleYhliMcGP5GYXQt2suN41cyLnDOpccASWExDT5qTUg6VFH64OePloCbkIwmjOhMulMWfUWBOFivoA2wlbYzcsQYVyCSXaKRXNS7hr7lmNNdGo4ZbNnl4Akar5ZWBYzZRqzb0QgK/grsWZXttNQ8042KXqhSU3miOHkbJESZPSLsBaqMhcV9yyq2lGcgSWk+Aw0v6MtKVR25+R1me9UWsWHQBuCll5DsLMuXMmVTC1GGMGTQ+7wlpAxQFpObsT+pTSCr6v2ZICVDdopfXVADAdg+pY3Xfu3eYBTGuoHXqIjQcGBnAQgRWue6MA4Stmqp0BGBogms4BSM7ACxuiw3c8oZGU7T+obNhHtKwDPy3nZ7QTGq3nZpKxjzkZRivxfI9TTamhUrQXjDO+tnX2TNOMZdKuoWI0C4yrDHafbY1UgW2+PgswABXtfEsliz0qAAAAAElFTkSuQmCC',
        symbolSize: [51,51],
        showSymbol: false,
        lineStyle: {
            normal: {
                width: 6,
                color:'#02d4df',
                opacity: 0.9
            }
        },
        areaStyle: {
            normal: {
            	color: {
				    type: 'linear',
				    x: 0,
				    y: 0,
				    x2: 0,
				    y2: 1,
				    colorStops: [{//'rgba(7, 76, 122, 1)'
				        offset: 0, color: 'rgba(1, 241, 245, 1)' // 0% 处的颜色
				    }, {
				        offset: 1, color: 'rgba(10,0,65, 0.1)' // 100% 处的颜色
				    }],
				    globalCoord: false // 缺省为 false
				},
            }
        },
        itemStyle: {
            normal: {
                color: '#00f0ff',
                borderColor: '#00f0ff',
                borderWidth: 1
            }
        },
         markLine: {
            silent: false,
            label:{
              show:false  
            },
            lineStyle:{
              width:2,
				color:'#0fff00'
            },
            symbol:'none',
            data: [{
                yAxis: 50
            }]
        },
        data: [1,123,34,543,45,23,43,45,23]
    } ]
};
看雪看月亮
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts象形柱图 pictorialBar
zm_miner的博客
05-05 1万+
项目需求 这种属于series-> type的类型是pictorialBar 很多怪形的柱形图都是使用它, 只需要修改series -> symbol的值就可以, 在这里他的类型值是'react' 我建议可以复制我这段代码 自己跑一下 <!DOCTYPE html> <html lang="en"> <head> <meta char...
Echarts--象形柱图
qq_44903607的博客
09-23 455
效果展示： 主要代码： option = { // backgroundColor: "#000643", //间距 grid: { left: "3%", //左边距 // right: "4%", //右边距 top: "3%", //上边距 // bottom: "5%", //下边距 containLabel: true },
NLP 自然语言初体验
热门推荐
yisuoyanyv的博客
08-13 59万+
本资料整理自 Kaggle上的Spooky NLP and Topic Modelling tutorial import base64 import numpy as np import pandas as pd #Plotly imports 一种可视化工具 import plotly.offline as py py.init_notebook_mode(connected=True) ...
echarts象形柱图自定义样式（类似柱状图）
miracle__Y的博客
02-10 8708
象形柱图是可以设置各种具象图形元素（如图片、SVG PathData等）的柱状图，往往用在信息图中，用于有至少一个类目轴或时间轴的直角坐标系上。 先上一个简单的效果： 其实实现思路主要在于：绘制具有颜色定义的背景以及对应的数据标识列，废话咱也不多说，直接上代码，此代码可直接复制至echarts官网运行查看。 var maxData = 2000; option = { g...
echarts-象形柱图
最新发布
m0_74019046的博客
05-28 623
一般的柱图都是纯色柱图，使用象形柱图可以给柱图定义自己的样式。样式的调节与柱图一样，核心在于symbol调节柱图的组成。使用symbol设置图形类型symbolRepeat:指定图形元素是否重复。设置symbolRepeat后图形会堆叠。设置 symbolSize调整大小后会有层叠的效果。
175Echarts - 象形柱图（Spirits）
阿甘兄
05-05 7589
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
Echarts实战案例代码(24)：柱图数据顶部显示图片的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
08-04 1310
调用的图片 var weatherIcons = { 'icon1': 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png', 'icon2':'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png', 'icon3':'https://echarts.apache.org/examples/da.
echarts象形柱状图
M__Yang_的博客
08-24 915
象形柱状图
echarts象形柱图
07-31
echarts象形柱图
Echarts5开源可视化图表库开发的象形柱图世界旅游景点日记照片墙
02-10
Echarts5开源可视化图表库 1. 图表基础框架的搭建； 2. series-pictorialBar，象形柱图； 3. series-bar，柱状图； 4. dataZoom 组件，用于区域缩放； 5. on方法添加事件处理函数；
echarts 实现圆柱体图形.zip
05-14
首先，我们要理解 ECharts 中柱状图的基本原理。柱状图是通过设置 `series` 中的 `type` 为 `'bar'` 来创建的。在默认情况下，ECharts 会绘制出二维的矩形柱状图。要将柱状图转变为圆柱体，我们需要利用 ECharts ...
象形柱状图加渐变 加随机数.html
04-28
Echarts象形柱状图渐变色加随机数,下载后可直接看效果
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts 柱状图 详解与使用集合
2401_84094868的博客
04-12 1594
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取[外链图片转存中…(img-qwNR1035-1712875473585)][外链图片转存中…(img-TcxGDPdY-1712875473585)]
echarts 特效柱状图
Heby的博客
01-26 1698
option = { backgroundColor:'#031d33', legend: { top: "20", x: "center", textStyle: { fontSize: 16, color: "rgba(101, 213, 255, 1)" }, icon: "path://M512 881...
HTML之图片标签
qq_34550459的博客
04-17 1208
图片标签用于向当前页面中引入一个外部图片 使用img标签来引入外部图片，img标签是一个自结束标签 img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点） 属性： src 属性指定的是外部图片的路径（路径规则和超链接是一样的） alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示 搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所...
Android WebView 优化、WebV离线包开发出现Crash： Fatal signal 5 , code 1, fault addr 0x6e1f33c798 in tid 32217
weixin_44158429的博客
04-14 7万+
Android WebView 优化/离线包出现Crash： A Fatal signal 5 , code 1, fault addr 0x6e1f33c798 in tid 32217。WebView Chrom内核出现错误。WebView离线包功能对资源进行拦截。Fresco缓存可关闭的引用CloseableReference：1. 调用者拥有这个引用2. 持有者在离开作用域之前，需要关闭引用3. 不要自己释放资源！4. 除了引用的持有者，闲杂人等等不得关闭引用5. 在赋值给变量前，先进行clone
echarts象形图pictorialBar
weixin_42274795的博客
08-05 3469
象形柱图的官方解释 象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示，它利用图片和形状表现数据，具体来说它既可以用图形的长宽变形表现数据，也可以用图形的个数、甚至是图形的颜色、透明度变化表现数据。 代码实现 var category = ['服务器数（台）', '计算容量（核）', '内存容量（GB）', '存储容量（PB）']; var barData = [0, ~~(Math.random() * 100), ~~(Math.random() * 100), ~
echarts 象形柱图pictorialBar
weixin_43294560的博客
08-11 8479
象形柱图可以被想象为是个柱状图,但是柱状图的柱子并不显示,这些柱子称为基准柱,根据基准柱来定位和显示各种象形图形 1、配置data data:[{ value:n, symbol:'circle', 自定义图像 symbolSize:['100%','100%'] 当symbolBoundingData未设置时,默认填充整个图像高度到value对应的高度 ['30%', '50%']，那么最终图形的尺寸是： 宽度：基准柱的宽度 * 30%。 高度：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值