自定义柱状图（水滴图）的填坑之路

先放一张水滴图的效果图。

当然也可以是其它的形状，参考demo链接如下
https://gallery.echartsjs.com/editor.html?c=xV8ro54T3i

我所做的水滴图就是参考这个demo来的，这个demo中，涉及到两个问题点：
1、就是如何应用你想要的形状。
demo中是在img中分别引入两种不同颜色深浅的图片。
在series的data中以symbol的形式引入。
这里引用的链接格式应该是如下文代码所示：

'image://'+你文件所在项目地址。
// 例如我这个是webstorm中运行的项目。var apiDataServerBaseUrl = 'http://localhost:63342/zz-microservice-base-FE/';// 服务器地址
let imgPath = 'image://' + apiDataServerBaseUrl + 'html/portal';
img1: {a: imgPath + "/style/bigScreenImg/drip/o.png",b: imgPath + "/style/bigScreenImg/drip/o-t.png"
},

路径这个地方切记一定要找对。

2、展示的数量，后台给的数据必须是数字，不能是字符串。
在这个地方我自己写的json，模拟的假数据。
开始的时候直接写来一个数组。

datax:["86个", "38个", "67个", "100个", "40个"]

但是这里出现的问题是，无法绑定数据。
所以还是通过formatter的方式进行字符串格式化。

//雨滴形成的横向柱状图
let allYearRainDaysCharts = function (data) {let waterDropElement = echarts.init(document.getElementById("jyts-charts"));
let imgPath = 'image://' + apiDataServerBaseUrl + 'html/portal';
let imgUrl = {img1: {a: imgPath + "/style/bigScreenImg/drip/o.png",b: imgPath + "/style/bigScreenImg/drip/o-t.png"},img2: {a: imgPath + "/style/bigScreenImg/drip/g.png",b: imgPath + "/style/bigScreenImg/drip/g-t.png"},img3: {a: imgPath + "/style/bigScreenImg/drip/y.png",b: imgPath + "/style/bigScreenImg/drip/y-t.png"},img4: {a: imgPath + "/style/bigScreenImg/drip/b.png",b: imgPath + "/style/bigScreenImg/drip/b-t.png"},img5: {a: imgPath + "/style/bigScreenImg/drip/p.png",b: imgPath + "/style/bigScreenImg/drip/p-t.png"}
};let value = 1; // >0let color = ['#e77c16', '#48ffbc', '#03cafc', '#03cafc', '#b531ff'];let dataDrop = [];for (let i = 0; i < data.dataY.length; i++) {let img = "img" + (i + 1);let dropItem = {value: data.dataY[i],symbol: imgUrl[img].a,itemStyle: {color: color[i]}};dataDrop.push(dropItem);
}let option = {title: {textStyle: {color: "#fff",fontSize: 16},left: '4.5%',top: "25%"},grid: {left: "3%",top: "5%",bottom: "5%",right: "10%",containLabel: true},tooltip: {trigger: "item",formatter: '{b}:{c}天'},xAxis: {splitLine: {show: false},axisLine: {show: false},axisLabel: {show: false},axisTick: {show: false}},yAxis: [{type: "category",inverse: false,data: data.dataX,axisLine: {show: false},axisTick: {show: false},splitLine: {show: false,lineStyle: {type: "dashed",color: "#3e86dd"}},axisLabel: {margin: 35,textStyle: {color: "#fff",fontSize: fsz20,}}}],series: [{tooltip: {show: false},z: 4,type: "pictorialBar",symbolSize: ['30', '30'],symbolRepeat: "fixed",data: [{value: value,symbol: imgUrl.img1.b,},{value: value,symbol: imgUrl.img2.b,},{value: value,symbol: imgUrl.img3.b,},{value: value,symbol: imgUrl.img4.b,},{value: value,symbol: imgUrl.img5.b,}]},{z: 6,type: "pictorialBar",symbolSize: ['30', '30'],animation: true,symbolRepeat: "fixed",symbolClip: true,symbolPosition: "start",symbolOffset: [0, 0],data: dataDrop,label: {normal: {show: true,textStyle: {fontSize: fsz30},formatter: function (series) {return series.value + '天';},position: "right",offset: [35, 0]}},},{type: "bar"}]
};

另附json

{"success": true,"code": 0,"count": 0,"totalNum": 1,"nowPage": 1,"data": {"dataX": ["2015年", "2016年", "2017年", "2018年", "2019年"],"dataY": [40, 100, 67, 38, 86]}
}

自定义柱状图（水滴图）的填坑之路相关推荐

Android Studio 3.0~3.x正式版填坑之路
序言总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发现Android Studio 3.0正式版本推送更新了,早听说AS 3.0添加了许多新功能,然后手贱迫不及待地想先睹为快,结果正中 ...
填坑之路！SpringBoot导包坑之spring-boot-starter-parent
填坑之路!SpringBoot导包坑之spring-boot-starter-parent 大誌 2018-11-14 21:03:25 104522 收藏 83 分类专栏: Bug 文章标签: Sp ...
NIOS_II填坑之路——EPCS出现“Cannot open flash device”解决办法
读写EPCS出现"Cannot open flash device"的解决办法 SOPC填坑--第n天代码看了千万遍,Debug千万遍,alt_flash_open_dev(EP ...
一款车载GPS定位产品后端服务器架构的填坑之路(一）
文章名字取得有些唬人.这里说"架构"二字也是有些夸大,其实也就是实现一些简单的位置解析功能.数据存储等功能.整理出来,也只是给后来者一些借鉴.希望看到的能够去除糟粕,取其精华. 2 ...
微信小程序填坑之路其一：wx.request发送与服务端接受
一.序言应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端--小程序:服务端--java:数据库--mysql:服务器--centos7 需求:客户端输入 ...
Android-开发之从掉洞到填坑之路面试必备
前言职场的金三银四跳槽季又来了,不同的是今年比往年「冷」一些,形式更加严峻一些,大家多多少少可能都听到或看到一些信息,就是好多公司在优化裁员,作为求职者来说,面试是一道坎,很多人会恐惧面试,即使是工 ...
抖音爬虫路上的填坑之路
1.selenium.common.exceptions.WebDriverException: 解决方法:加载chromedriver的时候,必须指明路径,形如 C:/Users/Python36/ ...
H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
html公共模块提取出去,webpack 填坑之路--提取独立文件(模块)
前言最近重新看了一遍 webpack 提取公共文件的配置.原来觉得这东西是个玄学,都是 "凭感觉" 配置.这篇文章将以解决实际开发遇到的问题为核心,悉数利用 webpack 提取 ...

自定义柱状图（水滴图）的填坑之路

自定义柱状图（水滴图）的填坑之路相关推荐

最新文章

热门文章