echarts柱状图两列单位不同

代码

<div id="echarts" :style="{width:'700px',height:'600px',margin:'0 auto'}" />

导入echarts

import echarts from 'echarts'

模拟后端传过来的数据

data() {return {resData: {data: [{ name: '数据1', value: 14 }, { name: '数据2', value: 1 }, { name: '数据3', value: 4 }, { name: '数据4', value: 14 }, { name: '数据5', value: 14 }],size: [{ name: '尺寸1', value: 14 }, { name: '尺寸2', value: 1 }, { name: '尺寸3', value: 4 }, { name: '尺寸4', value: 14 }, { name: '尺寸5', value: 14 }]}}}

mounted() {// 根据窗口大小调整echarts图表window.onresize = () => {// 基于准备好的dom，初始化echarts实例const myChart = echarts.init(document.getElementById('echarts'))myChart.resize()}this.getChart()},beforeDestroy() {window.onresize = null},

methods: {getChart() {const myChart = echarts.init(document.getElementById('echarts'))const firstData = []  // 第一列数据const secondSize = []  // 第二列数据const namelist = []// 整合图表所需的数据this.resData.data.forEach(e => {namelist.push(e.name)firstData.push({ type: 'bar', name: e.name, yAxisIndex: 0, stack: 'data', data: [e.value, 0] })})this.resData.size.forEach(el => {namelist.push(el.name)secondSize.push({ type: 'bar', name: el.name, yAxisIndex: 1, stack: 'data', data: [0, el.value] })})const option = {tooltip: {trigger: 'item',axisPointer: {type: 'shadow'},formatter: function(params) {var tooltip = params.seriesName + '<br/>' + params.name + ' : ' + params.value// 自定义提示的单位if (params.name === '数据') {return tooltip + '个'} else {return tooltip + '厘米'}}},legend: {type: 'scroll',  // 设置滚动翻页data: namelist},color: ['#2f4554', '#308e92', '#b1cfa5', '#f5d69f', '#c23531', '#ef5055', '#bda29a', '#5470c6', '#91cc75','#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], // 自定义颜色grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: ['数据', '尺寸']},yAxis: [{type: 'value',name: '数据',position: 'left',axisLine: {show: false},axisLabel: {show: true,showMinLabel: true,showMaxLabel: true,formatter: '{value}'},axisTick: {show: false}}, {type: 'value',name: '尺寸',position: 'right',axisLine: {show: false},axisLabel: {show: true,showMinLabel: true,showMaxLabel: true,formatter: '{value}'},axisTick: {show: false}}],series: [...firstData, ...secondSize]}myChart.setOption(option)}}
}

效果

echarts柱状图两列单位不同相关推荐

matlab柱状图两列,excel中A、B两列数字做柱状图，但是出来两个柱，怎样让A变成横座标？...
excel中A.B两列数字做柱状图,但是出来两个柱,怎样让A变成横座标?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! ...
echarts 柱状图 tooltip 加单位
tooltip. formatter字符串模板 option = {legend: {},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow', ...
Echarts 柱状图调整 y 轴单位标题与图表之间的距离
Echarts 柱状图调整 y 轴单位标题与图表之间的距离在我们绘制图标的时候,有时 y 轴单位标题的位置距离图标太近,影响美观,如图所示: 我们想把元离图表远一些,怎么操作? option = ...
echarts 柱状图鼠标滑过显示图标+数字每三位打千分号+单位
echarts 柱状图鼠标悬浮显示图标+数字每三位打千分号+单位千分号+单位全部代码示例代码柱状图鼠标滑过显示单位千分号+单位 1.图标:params[i].marker 2.数字每三位 ...
matlab 图标分为两列,excel表格各组数据作图-EXCEL里如何将表示两组数据的两种图形放在同一个表......
EXCEL图表中,如何把3组完全不同单位.不同数量级... 1.首先将excel表格打以WPS版本为打开后在里面输入相. 2.数据输入完毕之后,将需要的数据选中. 3.然后点击工具栏上面的插入,选中图 ...
echarts 柱状图设置边框_series组件
使用ECharts柱状图标线 ECharts 使用 markLine 来设置柱状图标线,本文是对柱状图标线属性的介绍. series[i]-bar.markLine.silent boolean [ ...
c#读取excel两列数据并绘制xy曲线_EXCEL绘制三Y轴图表
在日常工作中,经常会使用EXCEL进行数据的处理与分析,并绘制一些常用的数据可视化图表,柱状图.散点图.曲线图等啥的,总体来说,Excel的数据可视化做的还是非常优秀的,可以非常方便的绘制常用的图表, ...
linux awk命令详解，使用system来内嵌系统命令,批量github，批量批下载视频, awk合并两列...
linux awk命令详解简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分 ...
python 倒数两列_相机标定之张正友标定法数学原理详解（含python源码）
一.相机标定的目的我们首先要明白两个问题:1.相机是如何成像的?2.相机标定的目的是什么? 1.相机是如何成像的呢? 相机成像系统中,共包含四个坐标系:世界坐标系.相机坐标系.图像坐标系.像素坐标系 ...

echarts柱状图两列单位不同

echarts柱状图两列单位不同

代码

效果

echarts柱状图两列单位不同相关推荐

最新文章

热门文章