Echarts之双横向柱状对比图

需求：

鼠标移入：

1、容器：

 <div id="bar" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div>

2、在methods中：

methods:{initChart() {let manData = [100, 200, 300, 400, 500];let womanData = [100, 200, 300, 400, 500];let option = {// color:colors,tooltip: {show: true,trigger: "axis",axisPointer: {type: "shadow",},formatter: function (params) {// console.log("1222", params);return ('<span style="font-size: 20px;font-weight: bold;font-family: SourceHanSansCN;">' +params[0].seriesName +"</span>" +"<br/>" +params[0].marker +'<span style="color:' +params[0].color +';font-size: 20px;font-weight: bold;font-family: SourceHanSansCN;">' +"\n" +params[0].name +"岁: " +params[0].value +"人" +"</span>");},},legend: {left: "42%", //图例距离左边的距离top: "6%",textStyle: {// 图例文字样式  隐藏文字color: "transparent",},selectedMode: false,itemWidth: 15,itemHeight: 32, //图例宽高itemGap: 90, //图例的间隔data: [{name: "男",// icon: `image://${man}`,icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAfCAMAAAAP3mfjAAAAvVBMVEUAAABAgP9Vqv9Jkv9Vqv9Gov9Onf9JpP9Om/9Mof9SnP9Nm/9Mn/9Onf9Rm/9Rnf9Nn/9OnP9On/tRnvxNnvxQnfxQnvxQnvxOnvxOnf1Pnv1Pnv1Qnv1Pnv1Pnf1Pnv1Pnv1On/1Qnv1Pnv1Onv1On/1Qnv5Qnv5Pnv5Pn/5Qnv5PnvxOnvxPnvxPnvxPnv1Pnv1Pnv1Onv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv1Pnv3hJDdrAAAAPnRSTlMABAYHCQsNDhceHyElJykvOD5ITE9WWVxfaHF0g4SFi46PkJGWnKqwuLm9wsPHy87S1d3g4+ju7/T19vf4+zNjKZEAAACXSURBVBjTxdBFEgJBEETRxN3d3Rtr3P79j8WGaeYARPBX9Ta5KEmSMp1+Qd/yD6D59RrgHnE+A5B1ngOcQ87pAzwrvsForZF0d3trrbXW7icJSeENrlNKauFrKi39vko7LpePjiDtMObj8T9smHnucZNyw4yB4xaI90qSJANmDHgf+LVXYEbw8jyAbhkWnoP1akDFRkyS3hKPQR3ayj/hAAAAAElFTkSuQmCC",},{name: "女",// icon: `image://${woman}`,icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAiCAMAAABhn6n1AAABGlBMVEUAAAD/AAD/VVX/VVX/SUn/YGD/Zmb/YmL/VVX/Wlr/Xl7/WVn/VVX/Xl7/WFj/V1f/W1v5WVn6XFz6Wlr6W1v6WFj7WVn7WVn7WVn7WVn7W1v7WVn8Wlr8Wlr8W1v8Wlr8W1v8W1v8W1v9W1v9WVn9Wlr9Wlr9W1v9W1v9WVn9Wlr9WVn9Wlr7Wlr7W1v7Wlr7W1v7WVn7Wlr8W1v8Wlr8W1v8WVn8Wlr8WVn8W1v8Wlr8Wlr8Wlr8Wlr8Wlr8W1v8Wlr8Wlr8WVn8Wlr8W1v8Wlr9Wlr9Wlr9Wlr9Wlr7W1v7Wlr8Wlr8Wlr8Wlr8W1v8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8Wlr8WlrVqYT9AAAAXXRSTlMAAQMGBwgKDQ8RExQVGyAjKi4yMzU3OTxCRUZIT1VaXl9iZWttbm9wc3V6e32AhIWKjJGVlpidn6Cjpaiqr7C0u72/w8XHzc/S1Nba2+Hl5+jp6+3w8/b3+Pn6/P2iRbbvAAAA7UlEQVQoz8XQV1ICARBF0auYs44BAybEnMUcQDErCGJA5e5/G37AyOzA9/dOVVd3NQDQGp+MEUnvsz50R2BfdTsCl6oXEVhXTUUgdlj52mtu9LbxxPRMIt4S9nhJVQujtd5Vtp6XdgCW/cs8AFdev6oW780AdHy7VFWtrPjRAiT8WawNJHUCOPDmpAbpR3ehqeBGfU1+xycY0oVwSVL7WbO0GcLquymOPboNIXvuAf2bw9UQKsFWHzDbuHQKgNMGpAGayw3IA4wZyQDQEwSB5u58D4Kgs/4izeR8i/z0n+DTs6zFCCSzgyNXcwD8AmVGYKFUgvUsAAAAAElFTkSuQmCC",},],},grid: [// 左{top: "22%",bottom: "2%",left: "8%",width: "36%",height: "70%",containLabel: true,},// 中{top: "12%",bottom: "2%",left: "58%",// left: "center",width: "50%",height: "84%",},// 右{top: "22%",bottom: "2%",right: "5%",width: "36%",height: "70%",containLabel: true,},],xAxis: [{type: "value",inverse: true,show: true,axisLabel: {color: "#7e8daa",fontSize: "20",fontWeight: "bold",textStyle: {fontFamily: "BoldCondensed",},},splitLine: {// 网格线show: true,lineStyle: {color: ["rgba(22, 39, 60, 1)"],width: 1,type: "dotted",},},axisTick: {//y轴刻度线show: false,},axisLine: {//轴线// show: false,lineStyle: {color: "rgba(25, 35, 57,0.2)",},},},{gridIndex: 1,show: true,axisLabel: {color: "#7e8daa",fontSize: "26",fontWeight: "bold",textStyle: {fontFamily: "BoldCondensed",},},splitLine: {// 网格线show: false,lineStyle: {color: ["rgba(22, 39, 60, 1)"],width: 1,type: "dotted",},},axisTick: {//y轴刻度线show: false,},axisLine: {//轴线show: false,},},{gridIndex: 2,type: "value",show: true,axisLabel: {color: "#7e8daa",fontSize: "20",fontWeight: "bold",textStyle: {fontFamily: "BoldCondensed",},},splitLine: {// 网格线show: true,lineStyle: {color: ["rgba(22, 39, 60, 1)"],width: 1,type: "dotted",},},axisTick: {//y轴刻度线show: false,},axisLine: {//轴线// show: false,lineStyle: {color: "rgba(25, 35, 57,0.2)",},},},],yAxis: [{axisLabel: {show: false,},align: "center",type: "category",axisTick: {//y轴刻度线show: false,},data: ["16-20", "21-30", "31-40", "41-50", "51-60"],axisLine: {//轴线// show: false,lineStyle: {color: "rgba(25, 35, 57,0.2)",},},},{axisLabel: {color: "#7e8daa",fontSize: "20",fontWeight: "bold",textStyle: {fontFamily: "BoldCondensed",},},gridIndex: 1,position: "center",axisLine: {show: false,},type: "category",inverse: false,axisTick: {//y轴刻度线show: false,},data: ["  (人)    ","16-20  ","21-30  ","31-40  ","41-50  ","51-60  ","  (岁)    ",], //使用空格使文字居中},{gridIndex: 2,position: "left",axisLabel: {show: false,},type: "category",inverse: false,axisTick: {//y轴刻度线show: false,},axisLine: {//轴线// show: false,lineStyle: {color: "rgba(25, 35, 57,0.2)",},},data: ["16-20", "21-30", "31-40", "41-50", "51-60"],},],series: [{type: "bar",barWidth: 15,name: "男",itemStyle: {color: "#4f9efd",},data: manData,},{type: "bar",barWidth: 15,xAxisIndex: 2,yAxisIndex: 2,name: "女",itemStyle: {color: "#fc5a5a",},data: womanData,},],};let myChart = this.$echarts.init(document.getElementById("bar"));myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});},
}

3、在mounted中调用

  mounted() {this.initChart();},

以上

Echarts之双横向柱状对比图相关推荐

exlc如何对比_excel表格图形数据比较-Excel如何做柱状对比图
excel表格怎么做数据对比图 Excel的图表功能已供了柱状对,下面以Excel 2010为例进行实例演示--用柱状图对比显示下面数据列一和系列二 1.选中数据→插入→柱形图→簇状柱形图 2.因为数 ...
matplotlib画柱状对比图
背景有两组数据,用柱状图表示出两组数据之间的差异代码 import numpy as np from matplotlib import pyplot as plt ''' 柱形对比图共有11组 ...
计算机电子表格三维簇状柱形图怎么设置,Excel中怎么制作柱形对比图【excel表格数据生成柱形图】...
怎么创建Excel簇状柱形图并设置图表的格第一步:插入---图表----选择"簇状柱形图" 在图表区域右击---选择数据-----点击" "号-----选择系 ...
django Echarts画柱状推移图
1. 首先确定要画什么样的图,在Echarts官网找好案例 2.根据图确认需要准备的数据,从后台准备数据传递给模板 3.模板渲染,使用Echarts组件功能完成自己想要的内容中间遇到几个坑: 1. ...
echarts 柱状堆叠图（图例和x轴都是动态的）
问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 .图例(legend),x轴(xAxis)都是写死的.但是一般实际应用中都是动态的.下面就举个例子,实现图例和x轴都是动态的 ...
柱状折线图2-双柱状重合堆积折线-重写图例点击事件
本例子: 使用了formatter方法重写了提示层的展示数据使用了双x轴实现重合使用了stack实现堆积使用了legendselectchanged和dispatchAction重写了图例点击事 ...
如何展现两极化数据，Excel柱状断层图不二之选
点赞再看,养成习惯:至长反短,至短反长. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文 GitHub https://github.com/hugogoos/Excel 已收录,包含Ex ...
label mpchart 饼图_Origin系列：绘制柱状堆积图
原创不易,感谢分享,欢迎转发,请点在看堆积柱状图十分美观,不仅能够展示数据占比,更能表现其变化趋势,是科研必备技能今天分享粉丝提出类似下列图形用Origin绘制多列柱状堆积图.希望对大家有所帮助 ...
SwiftUI之深入解析如何使用组合矩形GeometryReader创建条形（柱状）图
一.图表布局条形(柱状)图以矩形条的形式呈现数据的类别,其宽度和高度与它们表示的值成比例.SwiftUI 对探索不同布局和预览实时视图结果是很友好的,很容易将部分内容提取到子视图中,以便每个部分都很 ...

Echarts之双横向柱状对比图

Echarts之双横向柱状对比图相关推荐

最新文章

热门文章