echarts中自定义图片的矢量路径设置

最新推荐文章于 2024-08-05 05:00:00 发布

置顶小小虎牙牙

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量2.2w

点赞数 12

分类专栏： echarts 文章标签： echarts symbol 象形柱图矢量路径

本文链接：https://blog.csdn.net/huhaixx/article/details/83144157

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echarts中自定义图片的矢量路径设置

在echarts象形柱图中要使用自定义的图片有三种格式，如下图：
在这里插入图片描述

前面两种方式我们项目中也常用到，第三种是矢量路径，如何获取这个矢量路径呢，方法如下：
第一步：下载svg格式的矢量图片
第二步：用Notepad++或记事本等可以编辑代码的工具打开该图片
第三步：将标签中的b属性值复制出来，组成如上图中所示个格式数据即可

在echarts中可以使用自定义图标的地方都可以用矢量图，比如象形柱图中的自定义图标symbol，地图中的特效图形标记symbol等，以下代码示例的是象形柱图

示例：
下载一张小汽车的图片
在这里插入图片描述
打开文件

组成所需要的矢量路径

把图片引入到echarts象形柱图中，运行结果：

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>象形柱图</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="echart/echarts-3.8.4.js"></script>
  </head>
  <body>
	<div id="chart" style="width:500px;height:400px;border:1px solid #ddd;margin:50px auto;"></div>
  </body>
  <script>
		$(function(){
			var itemData=["北京","上海","广州","重庆","武汉"];
			var valData=[11289,12387,15987,9876,10289];
			iniPictorialBar("chart",itemData,valData);
		});
		function iniPictorialBar(id,itemData,valData){
			var spirit = 'path://M874.666667 469.333333c17.28 42.666667 42.666667 85.333333 42.666666 128v213.333334c0 27.946667-23.893333 42.666667-64 42.666666s-64-17.28-64-42.666666v-42.666667H234.666667v42.666667c0 25.386667-23.893333 42.666667-64 42.666666s-64-14.72-64-42.666666V597.333333c0-42.666667 25.386667-85.333333 42.666666-128s-64-37.333333-64-64 5.333333-42.666667 42.666667-42.666666h64s30.293333-87.04 42.666667-128 64-64 106.666666-64h341.333334c42.666667 0 94.293333 23.04 106.666666 64s42.666667 128 42.666667 128h64c37.333333 0 42.666667 16 42.666667 42.666666s-81.28 21.333333-64 64z m-469.333334 149.333334a21.333333 21.333333 0 0 0 21.333334 21.333333h170.666666a21.333333 21.333333 0 0 0 21.333334-21.333333v-21.333334a21.333333 21.333333 0 0 0-21.333334-21.333333h-170.666666a21.333333 21.333333 0 0 0-21.333334 21.333333v21.333334zM192 618.666667a64 64 0 1 0 64-64 64 64 0 0 0-64 64z m597.333333-256c0-21.333333-42.666667-106.666667-42.666666-106.666667H277.333333s-42.666667 85.333333-42.666666 106.666667v21.333333a42.666667 42.666667 0 0 0 42.666666 42.666667h469.333334a42.666667 42.666667 0 0 0 42.666666-42.666667v-21.333333z m-21.333333 192a64 64 0 1 0 64 64 64 64 0 0 0-64-64z';
			var itemFontsize=16;
			var lableSize = 16;
			var gridLeft = 80;
			var gridRight = 100;
			var symbolSize = [25, 20];
			var symbolColor = ["#0DAC5D"];
			var fontColor='#197346';
			var max = 0;
			for(var i=0;i<valData.length;i++){
				if(valData[i]>max){
					max = valData[i];
				}
			}
			max = max*1.2;
			var height = $("#"+id).height();
			var maxData = max;
			var myChart = echarts.init(document.getElementById(id));
			var option = {
			    tooltip: {
			    	show:false
			    },
			    xAxis: {
			        max: maxData,
			        splitLine: {show: false},
			        offset: 10,
			        axisLine: {
			        	show:false,
			            lineStyle: {
			                color: fontColor
			            }
			        },
			        axisTick: {show: false},
			        axisLabel: {show:false}
			    },
			    yAxis: {
			        data: itemData,
			        inverse: true,
			        axisTick: {show: false},
			        axisLine: {show: false},
			        axisLabel: {
			            margin: 20,
			            textStyle: {
			                color: fontColor,
		                    fontSize: itemFontsize,
		                    fontFamily:'Microsoft YaHei',
		                    fontWeight:600
			            }
			        }
			    },
			    grid: {
			        top: 'center',
			        height:height,
			        left: gridLeft,
			        right: gridRight
			    },
			    series: [{
			        type: 'pictorialBar',
			        symbol: spirit,
			        symbolRepeat: 'fixed',
			        symbolMargin: '10%',
			        symbolClip: true,
			        symbolSize: symbolSize,
			        symbolBoundingData: maxData,
			        color:symbolColor,
			        data: valData,
			        z: 10
			    }, {
			        type: 'pictorialBar',
			        color:symbolColor,
			        itemStyle: {
			            normal: {
			                opacity: 0.2
			            }
			        },
			        label: {
			            normal: {
			                show: true,
			                formatter: '{c}',
			                position: 'right',
			                align:'right',
			                offset: [gridRight-30, 0],
			                textStyle: {
			                    color: fontColor,
			                    fontSize: lableSize,
			                    fontFamily:'Microsoft YaHei'
			                }
			            }
			        },
			        animationDuration: 0,
			        symbolRepeat: 'fixed',
			        symbolMargin: '10%',
			        symbol: spirit,
			        symbolSize: symbolSize,
			        symbolBoundingData: maxData,
			        data: valData,
			        z: 5
			    }]
			};
			myChart.setOption(option);
		}
	</script>
</html>