vue echarts柱状统计图，多组数据对比

父组件<el-col :span="12" /><div class="content-container"><el-row><el-col :span="18"><complexChart :mixture-data="MixtureData" /></el-col><el-col :span="6"><chartRef :pie-data="optionRight2" class="cgart" /></el-col></el-row><script>export default {data() {return {MixtureData: {title: '啦啦啦啦啦啦啦啦',width: 100 + '%', // 柱状图盒子宽度legend: {// 图例属性data: [{name: '任务',// 图例引用图片。icon: ''},{name: '完成',icon: ''},{name: '完成进度',icon: 'image://' + require('../../icons/svg/404.svg')}],orient: 'horizontal', // 标记排列显示top: 15, // 标记位置left: 1 + '%', // 标记位置// icon: "roundRect",itemWidth: 24,itemHeight: 8// itemGap:5,//图例间距// padding:5,//每个图例padding// textStyle:{//图例文字样式设置//  lineHeight:5,// }},grid: {// 绘图区调整left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {// X轴显示分类type: 'category',dataList: ['北山街道','西溪街道','灵隐街道','翠苑街道','文新街道','古荡街道','转塘街道','留下街道','蒋村街道','三墩镇','双浦镇','云栖小镇','紫金港科技城'],axisLabel: {// 坐标轴文字显示样式lineHeight: 18, // 字体行高fontNum: 8, // 每行显示字数rotate: 20, // 文字旋转角度，0不旋转align: 'right'}},series: [// 柱状图数据{name: '任务',type: 'bar',data: [52000,86500,86500,125000,63000,342500,203000,203000,87500,100000,45000,50500,100000],label: {show: false,position: 'top' // 数值在右边显示},labelLine: { show: false }, // 是否显示线条itemStyle: {color: '#1492FF' // 柱状图颜色}},{name: '完成',type: 'bar',data: [10493,18631,18311,34883,16442,154657,33687,61340,16333,48180,10458,8465,18300],label: {show: false,position: 'top' // 数值在右边显示},labelLine: { show: false }, // 是否显示线条itemStyle: {color: '#09C592'}},{name: '完成进度',type: 'line',data: [20.18,21.54,21.17,27.91,26.1,45.16,16.59,30.22,18.67,48.18,23.24,16.76,18.3],yAxisIndex: 1, // 双Y轴，选择折线图对应某个轴label: {show: true,position: 'top', // 数值在右边显示formatter: '{c} %'},labelLine: { show: false }, // 是否显示线条itemStyle: {color: '#FF9314'}}]},}
}
}
</script>
子组件
<template><!-- //这是子组件 --><div class="mixture_wap"><div id="mixtureId" class="mixture" /></div>
</template><script>
const _c = { id: 1 }
const echarts = require('echarts')
export default {props: {MixtureData: {type: Object}},data() {return {myHisLevelChart: ''}},created() {},mounted() {const _this = thisvar chartDom = document.getElementById('mixtureId')this.myHisLevelChart = echarts.init(chartDom)this.$nextTick(() => {this.initChart()})window.addEventListener('resize', this.initChart, false)},beforeDestroy() {window.removeEventListener('resize', this.initChart, false)},methods: {initChart() {const _this = thisthis.myHisLevelChart.resize()var option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow', // 鼠标悬停显示样式shadowStyle: {shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 2}},formatter: '{b0}<br/>{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}%' // 展示百分比  五条折线},legend: this.MixtureData.legend, // 标记属性grid: this.MixtureData.grid, // 绘图区调整yAxis: [{type: 'value',min: 0,max: 400000,interval: 100000},{type: 'value',min: 0,max: 125,interval: 25,axisLabel: {formatter: '{value} %'}}],xAxis: {// X轴显示数值type: this.MixtureData.xAxis.type,data: this.MixtureData.xAxis.dataList,axisLabel: {// 坐标轴文字显示样式interval: 0,lineHeight: this.MixtureData.xAxis.axisLabel.lineHeight,rotate: this.MixtureData.xAxis.axisLabel.rotate,formatter: function(value) {var str = ''var num = _this.MixtureData.xAxis.axisLabel.fontNum // 每行显示字数var valLength = value.length // 该项Y轴字数var rowNum = Math.ceil(valLength / num) // 行数if (rowNum > 1) {for (var i = 0; i < rowNum; i++) {var temp = ''var start = i * numvar end = start + numtemp = value.substring(start, end) + '\n'str += temp}return str} else {return value}}}},series: this.MixtureData.series}this.myHisLevelChart.setOption(option, true)}}
}
</script><style lang="scss" scoped>
.mixture_wap {width: 100%;.mixture {width: 100%;height: 255px;}
}
</style>

vue echarts柱状统计图，多组数据对比相关推荐

ArcGIS实验教程——实验四十一：ArcGIS区域分析统计直方图（土地利用--坡度分级柱状统计图的制作）
文章目录一.任务描述二.实验数据三.实验过程一.任务描述在实际工作中,通常需要统计不同类型的土地利用数据与坡度的关系.本实验中以土地利用landuse和数字高程模型dem数据为例,基于Arc ...
Cesium|xt3d 柱状统计图
Cesium|xt3d 柱状统计图效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
echarts 柱状堆叠图（图例和x轴都是动态的）
问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 .图例(legend),x轴(xAxis)都是写死的.但是一般实际应用中都是动态的.下面就举个例子,实现图例和x轴都是动态的 ...
python画柱状图-Python画柱状统计图操作示例【基于matplotlib库】
本文实例讲述了Python画柱状统计图操作.分享给大家供大家参考,具体如下: 一.工具:python的matplotlib.pyplot 库二.案例: import matplotlib.pyplo ...
使用vue做柱状echarts报表
柱状报表成果展示: ① 后端返回如下数据(female和male每个都有95个数据.从00:00开始每一刻钟对应一个数据): ② 使用vue,在template标签中写如下代码 <div id ...
Echarts柱状纵向横向、圆角、渐变、x轴字体倾斜或垂直显示
1.柱状纵向变横向将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 //纵向xAxis: [{type: 'value'}],yAxis: [{ ...
vue+echarts饼状图中间计算总数
饼状图中间显示总数值,效果图如下: dom结构: <div class="chart1" ref="chart1" style="width: ...
ECharts 柱状排名图柱子上方显示文字与图标
直接上干货! 效果如下: 代码如下: methods: 中的方法 initChart() {let that = this;const fontColor = '#00D8FE'this.chart ...
阿里G2插件——柱状统计图，长变量值显示设置
文章目录一.背景二.基础使用三.优化文本显示位置一.背景使用g2插件绘制柱形图,发现对于某些长文本的显示并不理想.在限定的区域内,无论是放在X轴还是Y轴,文本显示不完整或是出现重叠,影响图表 ...
Python画柱状统计图
一.工具:python的matplotlib.pyplot 库二.案例: import matplotlib.pyplot as plt import numpy as np#添加图形属性 plt. ...

vue echarts柱状统计图，多组数据对比

vue echarts柱状统计图，多组数据对比相关推荐

最新文章

热门文章