横向条形图对比

先看效果图

代码：需要改动的数据我都提在了最前面；


let yList = ['2月','对比2月'];
let collectingMediaList = [766, 350];
let dealerLists = [134, 31];
let regionalDelivery = [34, 31];option = {title: {text: '渠道集客量对比',left: 'center',},legend: {x: 'center',top:'30',data:['集采媒体','经销商','区域投放']},tooltip : {trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis:  {type: 'value'},yAxis: {type: 'category',data: yList},series: [{name: '集采媒体',type: 'bar',stack: '总量',barWidth: 100, // 宽度itemStyle:{normal: {color: '#BB0A30'}},label: {normal: {show: true,position: 'insideRight'}},z:  10,data: collectingMediaList} ,{name: '经销商',type: 'bar',stack: '总量',barWidth: 100,itemStyle:{normal: {color: '#333333'}},label: {// normal: {//     show: true,//     position: 'insideRight'// }},z:  10,data: dealerLists} ,{name: '区域投放',type: 'bar',stack: '总量',barWidth: 100,itemStyle:{normal: {color: '#808080'}},label: {// normal: {//     show: true,//     position: 'insideRight'// }},z:  10,data: regionalDelivery} ]
};

可以在这个地址看看具体效果，还可以调试：
https://gallery.echartsjs.com/editor.html?c=x_FX9ve5gO

echarts 横向条形图对比相关推荐

echarts横向左右对比柱状图
需求业务需求横向对比柱状图,左边从左到右,右边从右到左. 效果图代码 var myChart = echarts.init(document.getElementById('chart-panel ...
散点图绘制+纵向条形图+横向条形图+多组条形图绘制+直方图（原始数据和非原始数据的处理）
目录一.散点图 1.代码实现 1.代码实现 (1)纵向条形图 (2)横向条形图 2.应用场景三.直方图 1.代码实现 (1)原始数据处理 (2)经过处理的数据--需要通过条形图来实现 2.应用 ...
hdc mfc 画扇形图_使用echarts绘制条形图和扇形图
使用echarts绘制条形图和扇形图简单举例说明下echarts如何绘制条形图和扇形图代码示例 echarts绘制条形图和扇形图 var mychart1=echarts.init(documen ...
可视化实例（三）Tableau基础绘图介绍——横向条形图、双轴折线图、直方图
Tableau是一款商业智能可视化软件,其基本绘图只用拖动相应字段即可,操作十分方便,今天就来分享其基本绘图步骤. 目录一.Tableau常用功能区二.横向条形图三.双轴折线图四.堆积柱形图 ...
python画图笔记（横向条形图）
python画图可太难了 ###以横向条形图为例#######设置画布大小 fig,ax=plt.subplots(figsize=(10, 10)) #设置颜色 b=ax.barh(x,y,colo ...
echarts横向渐变柱状图，顶部带scatter,effectScatter,背景色
1.echarts横向渐变柱状图,顶部带scatter,effectScatter,背景色 (代码和效果如下) <template> <div class="chart&q ...
echarts双向条形图案例
双向条形图图表效果如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
echarts——横向柱状图
功能描述全屏横向柱状图从小到大排序,每次显示5条,每3秒切换循环显示鼠标移入停止切换,鼠标移出继续切换柱状图组件源码 <template><div class="w ...
Echarts正负条形图将x轴都设置成正数
最近在做项目的时候需要用到 Echarts 的正负条形图,但是条形图的左半部分的数值是负数的,但是我们需要他也是正数的,话不多说,先上效果图: 所以需要做如下几步修改: 首先需要修改x轴上面显示为负数 ...

echarts 横向条形图对比

横向条形图对比

echarts 横向条形图对比相关推荐

最新文章

热门文章

echarts 横向条形图 对比

横向条形图 对比

echarts 横向条形图 对比相关推荐

最新文章

热门文章

echarts 横向条形图对比

横向条形图对比

echarts 横向条形图对比相关推荐