先放一张水滴图的效果图。
当然也可以是其它的形状,参考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; // >0
let 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]
}
}