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>

echarts中自定义图片的矢量路径设置相关推荐

echarts中自定义图片的矢量路径
在echarts象形柱图中要使用自定义的图片有三种格式,如下图: 前面两种方式我们项目中也常用到,第三种是矢量路径,如何获取这个矢量路径呢,方法如下: 我们可以去阿里巴巴矢量图标库找到自己想要的图标, ...
计算机动作路径教案,PPT中自定义动画之动作路径的应用教案.doc
演示文稿拓展(二) --Powerpoint2003自定义动画之动作路径的应用课题"动作路径"的应用课时第2课时知识技能:1.学会在Powerpiont中设置 " ...
jeecg uedit 自定义图片上传路径
jeecg uedit 图片上传配置自定义物理路径,简单描述:我们知道 jeecg 中使用的 uedit 默认图片上传路径为 "当前项目\plug-in\ueditor\jsp\upload ...
HTML中提取图片的SRC路径
Public Function CheckName(Str) Checkname=True Dim Rep,pass Set Rep=New RegExp ' 建立正则表达式. Rep.Global= ...
vue中静态资源文件中的图片element.style.backgroundImage设置url无效问题
静态文件中的图片直接通过以下这种方式是无效的 element.style.backgroundImage = 'url("@/assets/img/btn_checkbox_nor@2x.p ...
cad添加自己线性_CAD中自定义线型的两种设置方法
我们在进行装修深化或水电施工图的过程中,经常会用到一些特殊的线型来表示不同的线路,CAD中自带的线型远无法满足我们的需求,其实在CAD中可以自己动手绘制中间插入文字或是其它各类的线型,做好后打包,用的 ...
H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）
自定义分享链接是什么? 自定义微信分享链接是指将一条网页链接通过微信接口生成一张卡片,并且该卡片的标题,内容和图片都可以自己编辑.如下图效果 ● 自定义网页链接示例(带标题,内容简介,缩略图) ● 未 ...
h5 修改title 微信_H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）...
最近开发h5网页,在分享网页到微信好友时,发现我的分享链接只有标题和链接地址: 图一却不像自定义微信分享链接一样,分享的链接像生成一张卡片,有对应的标题,内容和图片: 图二要达到上图自定义文案与图 ...
Echarts 实现自定义图片关系图
百度echart 实现带图片头像的关系图 <!DOCTYPE html> <html style="height: 100%"><head>&l ...

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

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

echarts中自定义图片的矢量路径设置相关推荐

最新文章

热门文章