echarts 象形图背景、柱状图顶部装饰

echarts地址 https://www.makeapie.com/editor.html?c=xgDoKklati
效果图

代码

<template><!-- 柱状图 --><div class="top-line-bar-warp"><slot><div class="bg"></div></slot><div :id="barId" class="bar-wrap"></div></div>
</template>
<script>
export default {name: "topLineBar",props: {barData: {required: true,type: Object,},},data() {return {barId: "",};},watch: {barData: {handler(val) {if (!this.barId) {this.barId = `topLineBar${this.guid()}`;}this.$nextTick(() => {this.drawBar();});},immediate: true,deep: true,},},methods: {guid() {return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {const r = (Math.random() * 16) | 0;const v = c == "x" ? r : (r & 0x3) | 0x8;return v.toString(16);});},drawBar() {const barData = this.barData;const myBar = this.$echarts.init(document.getElementById(this.barId));let normalColor = "rgba(236,248,255,0.70)";let gdpData = [];let barBg = [];let seriesData = barData.series.map((item, index) => {if (index % 2 === 1) {barBg.push({type: "pictorialBar",itemStyle: {normal: {opacity: 0.6,},},barGap: "-74%",symbolRepeat: "fixed", //使图形元素重复symbolSize: [45, 3],symbolMargin: 1,symbol: `image://${require("../../assets/images/home/bg_shuju.png")}`,data: barData.series[0] && barData.series[0].data,});gdpData[index] =barData.series[index] &&barData.series[index].data.map((item2, index2) => {return Math.abs(item2 - barData.series[index - 1].data[index2]);});}let markPoint = item.data.map((item, index) => {return {coord: [index, item],symbolSize: [57, 3],symbolOffset: [0, -5],symbol:"image://" + require("../../assets/images/home/icon_shuju_hengtiao.png"),};});return {name: barData.legend[index],type: "bar",stack: barData.stack ? barData.stack[index] : "bar",data: index % 2 === 1 ? gdpData[index] : item.data,barGap: "45%",barWidth: "45px",itemStyle: {normal: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: barData.colorArr[index].start,},{offset: 1,color: barData.colorArr[index].end,},],globalCoord: false,},},},markPoint: {data: markPoint,},};});seriesData = [...seriesData, ...barBg];let option = {legend: {show: barData.legendShow,x: "right",y: "top",selectedMode: false,icon: "rect",padding: [20, 0, 0, 0],itemGap: 32,itemWidth: 26,itemHeight: 18,textStyle: {color: normalColor,fontSize: 36,fontFamily: "PingFangSC-Regular",},textStyle: {height: 30,rich: {a: {color: normalColor,fontSize: 36,fontFamily: "PingFangSC-Regular",},},},formatter: (name) => {return "{a|" + name + " " + "}";},data: barData.legend,},grid: barData.grid,tooltip: {textStyle: {fontSize: 48,},trigger: "axis",formatter: function (params) {let str = "";for (let i = 0; i < params.length - 1; i++) {if ((!!params[i].value || params[i].value === 0) &&params[i].seriesName !== "") {let value;if (i === params.length - 2) {value = params[i].value + params[0].value;} else [(value = params[i].value)];str += params[i].seriesName + ": " + value + barData.unit + "<br/>";} else if (params[i].seriesName !== "") {str += params[i].seriesName + ": " + "无数据" + "<br/>";}}return str;},},xAxis: [{type: "category",data: barData.xaxis,axisPointer: {type: "shadow",},axisLabel: {interval: 0,margin: 15,formatter: (value) => {return `{a|${value}}`;},width: barData.xLabelWidth,height: barData.xLabelheight,align: "center",backgroundColor: {image: barData.xLabelBg,},rich: {a: {fontFamily: "DINAlternate-Bold",color: normalColor,fontSize: 36,lineHeight: 54,},},},axisLine: {show: false,},axisTick: {show: false,},splitLine: {show: false,},},],yAxis: [{type: "value",name: "",splitNumber: 3,nameTextStyle: {fontFamily: "PingFangSC-Regular",color: normalColor,fontSize: 36,align: "right",padding: barData.namePadding,},axisLabel: {showMinLabel: false,formatter: "{value}",align: "right",textStyle: {fontFamily: "PingFangSC-Regular",color: normalColor,fontSize: 36,},},axisLine: {show: false,},axisTick: {show: false,},splitLine: {show: barData.splitLineHide ? false : true,lineStyle: {type: "dashed",width: 3,color: "#093D5D",},},},],series: seriesData,};myBar.setOption(option);},},
};
</script>
<style lang="less" scoped>
.top-line-bar-warp {width: 100%;height: 100%;position: relative;.bar-wrap {width: 100%;height: 100%;}
}
</style>

echarts 象形图背景、柱状图顶部装饰相关推荐

echarts横向渐变柱状图，顶部带scatter,effectScatter,背景色
1.echarts横向渐变柱状图,顶部带scatter,effectScatter,背景色 (代码和效果如下) <template> <div class="chart&q ...
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记展示效果如下(主要记录一下如何在柱状体实体里面展示自定义的数据和在顶部展示自定义数据) 柱状图实体展示数据 series: [{ na ...
echarts柱状图顶部添加图片
最近有个需求,在特定柱状图顶部要求展示图片,搜了下关于这方面的文章比较少,来记录下. series:[ ...markPoint:{symbol:'image://url',//url替换成你的图片地 ...
Echarts 3D立体柱状图(源码+例图)
Echarts 3D立体柱状图,3D长方体柱状图,直接cope源码可用(源码+例图) 废话不多说,直接上代码!!! // HTML 代码 <div id="litiBar" ...
echarts添加背景图
echarts添加背景图来源:https://www.liuyjuan.com/295.html 1)简单的方法直接给到外层的div元素上 /*比如说这段css样式*/ .TheStatistic ...
echarts设置背景图片
echarts设置背景图片的两种方法方法一 var img = new Image(); img.src = ' 图片的url' img.width = '100%' img.height ='10 ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
Echarts设置背景的网格线为虚线
用Echarts写了一个折线图之后,现在不太喜欢背景网格线的实线需要改成虚线 Echarts设置背景的网格线为虚线的关键属性 yAxis: {splitLine: {show: true,lineS ...
echarts 设置背景颜色
问题:echarts 设置背景颜色描述: @Kener-林峰你好,想跟你请教个问题:请问怎么设置echarts整个图标的背景颜色??我用了color属性,在官网实验的时候不显示.... 解决方案1 ...

echarts 象形图背景、柱状图顶部装饰

echarts 象形图背景、柱状图顶部装饰相关推荐

最新文章

热门文章