echarts实现横向柱图文字在柱图上面

前言：

echarts实现横向柱图文字在柱图上面

效果图：

实现源代码：

<div id="lip" style="width:100%;height:800px;"></div><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script><script>function initEchartsFh() {var myChart = echarts.init(document.getElementById('lip'));var option = {grid: {left: "5%",right: "2%",width:"80%",bottom: "2%",top: "8%",containLabel: true},xAxis: {type: "value",splitLine: {show: false},axisLabel: {show: false},axisTick: {show: false},axisLine: {show: false}},yAxis: [{type: "category",inverse: true,axisLine: {show: false},axisTick: {show: false},},{type: "category",inverse: true,axisTick: "none",axisLine: "none",show: true,axisLabel: {textStyle: {color: "#F5784C",fontSize: "16"}},//------------------右侧展示的具体内容----------------------------data: [{value:"10%",itemStyle:{color:"#FFCB9B"}},{value:"20%",itemStyle:{color:"#FFCB9B"}},{value:"30%",itemStyle:{color:"#FFCB9B"}},{value:"40%",itemStyle:{color:"#FFCB9B"}},{value:"50%",itemStyle:{color:"#FFCB9B"}},{value:"60%",itemStyle:{color:"#FFCB9B"}},{value:"70%",itemStyle:{color:"#FFCB9B"}},{value:"10%",itemStyle:{color:"#FFCB9B"}},{value:"10%",itemStyle:{color:"#FFCB9B"}},{value:"10%",itemStyle:{color:"#FFCB9B"}},],},{//名称type: 'category',offset: -10,position: "left",axisLine: {show: false},inverse: false,axisTick: {show: false},axisLabel: {interval: 0,color: ["#333"],align: "left",verticalAlign: "bottom",lineHeight: 32,fontSize: 16},//------------------文字描述----------------------------data: ['1号 60人完成','2号','3号','4号','5号','6号','7号','1号','1号','1号']},],series: [{zlevel: 1,type: "bar",barWidth: "15px",animationDuration: 1500,//------------------数据及其样式----------------------------data: [{value:10,itemStyle:{color:"#FFCB9B"}},{value:20,itemStyle:{color:"#FFCB9B"}},{value:30,itemStyle:{color:"#FFCB9B"}},{value:40,itemStyle:{color:"#FFCB9B"}},{value:50,itemStyle:{color:"#FFCB9B"}},{value:60,itemStyle:{color:"#FFCB9B"}},{value:70,itemStyle:{color:"#FFCB9B"}},{value:10,itemStyle:{color:"#FFCB9B"}},{value:10,itemStyle:{color:"#FFCB9B"}},{value:10,itemStyle:{color:"#FFCB9B"}},],align: "center",itemStyle: {normal: {barBorderRadius: 10}}},{type: "bar",barWidth: 15,barGap: "-100%",margin: "20",//------------------背景按最大值----------------------------data: [100,100,100,100,100,100,100,100,100,100],textStyle: {//图例文字的样式fontSize: 10,color: "#fff"},itemStyle: {normal: {color: "#FFF9F3",//width:"100%",fontSize: 10,barBorderRadius: 30},}}]};myChart.setOption(option);}window.onload = function(){initEchartsFh();}window.onresize = function(){initEchartsFh();}
</script>

官网相关地址：https://www.makeapie.com/editor.html?c=xqjNqqjc_U

到此结束！

echarts实现横向柱图文字在柱图上面相关推荐

Android 访美图文字旋转,美图贴贴Android版首推文字功能萌动你的小心情
美图贴贴Android版全新2.0已温暖上线,不但带来了暖暖.生日趴两大主题素材,还首推文字功能,让"萌妹子"们的卖萌技术可以持续升级,素材+文字轻松打造图文并茂的贴图日志,让那些 ...
echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图
先贴一张效果图 1.导包我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...
Echarts的二次封装思考心得。封装成果：折线柱状混合图、立体柱状折线混合图、markline标记线
先说一下这次对ECharts二次封装总结的一些东西吧,感觉这是重点! 二次封装及使用的矛盾痛点: 一般封装只会暴露出一些常用的属性,最常见的如图表的颜色.数据: 封装人员也不会考虑把所有情况都封装起来 ...
Pyecharts 折线图与堆积柱状图结合的组合图绘画，折线图数据点在柱状图柱中心
问题/背景最近因科研需要,开始浅浅学习pyecharts,并记录在这个过程遇到的问题以及简单的解决办法. 在使用pyecharts画组合图时遇到了折线图的点无法对准柱状图中心的问题,在网上的文章只找 ...
01 【eCharts样式定制系列】柱状图修改柱状颜色、柱状形状等
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.接下来我们先对 ...
ECharts之横向柱状图二
效果图背景图片下载ECharts npm install echarts --save 引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ...
Java通过JfreeChart生成转Base64图片字符串（饼图、折线图、柱状图、折线图-多条、3D柱状图、气泡图、时序图、曲线图、区域图、分布图、联合分类图、双X轴图、K线图、柱状图-横向等图)
工具类 CreatLineChart.java package DrawLine;import java.awt.BasicStroke; import java.awt.Color; import ...
ECharts之横向百分比柱状图
效果图背景图片下载ECharts npm install echarts --save 引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ...
vue3中，echarts使用（一）——柱状图和折线图的结合使用
vue3中,echarts使用(一)--柱状图和折线图的结合使用官网:https://echarts.apache.org/zh/index.html 官网示例:https://echarts.ap ...

echarts实现横向柱图文字在柱图上面

前言：

echarts实现横向柱图文字在柱图上面

效果图：

实现源代码：

官网相关地址：https://www.makeapie.com/editor.html?c=xqjNqqjc_U

到此结束！

echarts实现横向柱图文字在柱图上面相关推荐

最新文章

热门文章