vue结合echarts开发柱状图+折线图合并的图表

接上一篇文章，接下来写的是有关于柱状图+折线图的图表，此图表分为左右两个坐标轴：请看下图

相关配置请看第一篇文章：echarts之饼图配置

以及echarts官网链接：echarts官网

废话不多说请看代码：

这是子组件：

<template>//这是子组件<div class="mixture_wap"><div class="mixture" id="mixtureId"></div></div>
</template><script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {props: {MixtureData: {type: Object,},},data() {return {myHisLevelChart: "",};},created() {},mounted() {let _this = this;var chartDom = document.getElementById("mixtureId");this.myHisLevelChart = echarts.init(chartDom);this.$nextTick(()=>{this.initChart();})window.addEventListener("resize", this.initChart,false);},methods: {initChart() {let _this = this;this.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 * num;var end = start + num;temp = value.substring(start, end) + "\n";str += temp;}return str;} else {return value;}},},},series: this.MixtureData.series,};this.myHisLevelChart.setOption(option, true);},},beforeDestroy(){window.removeEventListener('resize',this.initChart,false)}
};
</script><style lang="scss" scoped>
.mixture_wap {width: 100%;.mixture {width: 100%;height: 220px;}
}
</style>

这是父组件：

<template><div class="wrap"><div class="income_mid mt16"><div class="pub_title lineH1 flexa pt15"><p class="side"></p><p class="fb">啦啦啦啦啦啦啦啦</p></div><Mixture :MixtureData="MixtureData" /></div></div>
</template><script>
import Mixture from "./mixture";
export default {name: "wrap",components: {Mixture,},data() {return {// 折柱混合MixtureData: {title: "啦啦啦啦啦啦啦啦",width: 100 + "%", //柱状图盒子宽度legend: {//图例属性data: [{name: "任务",// 图例引用图片。icon: "image://" + require("../../assets/img/icozn2.png"),},{name: "完成",// 图例引用图片。icon: "image://" + require("../../assets/img/icozn1.png"),},{name: "完成进度",// 图例引用图片。icon: "image://" + require("../../assets/img/icozn.png"),},],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><style lang="scss" scoped>
.pub_title {color: #333;font-size: 16px;height: 22px;margin-top: 15px;.side {width: 4px;height: 16px;line-height: 16px;background: #1d96ff;border-radius: 2px;margin-right: 16px;}
}
.income_top {margin-top: 16px;.income_top_left,.income_top_right {width: calc(50% - 8px);height: 294px;border-radius: 4px;flex: (0, 0, calc(50% - 8px));background-color: #fff;}
}.income_bottom,
.income_mid {background-color: #fff;
}
</style>

下一篇着重介绍水平柱状图以及旋转90度的柱状图

vue结合echarts开发柱状图+折线图合并的图表相关推荐

Echarts 双柱状图+折线图合并---实现效果详解(vue+Echarts实现)
此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo 示例展示; 如有疑问或者不清楚的欢迎随时提问 . 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验 ...
vue+axios+echarts实现一个折线图
前端可视化是一个前端最基本的技能,要想做的好看,还是得借助一下百度家的echarts,那要怎么在Vue中使用echarts?这个官网没有给出实例,实例基本都是在jquery里面使用,引入的例子. Ec ...
vue使用echarts的堆叠折线图一直警告[Violation] 'requestAnimationFrame' handler 用时 N 毫秒怎么解决...
这个警告通常是因为你的图表渲染过于复杂或者数据量过大,导致在浏览器的一帧内渲染超时. 你可以尝试以下方法来解决这个问题: 减少图表中的数据量,使其更加简单,从而减少渲染时间. 使用图表的 lazyUp ...
在vue中使用antV-G2展示折线图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...
Echarts柱形图折线图合并demo（含图例）
文章目录前言前言柱形图折线图合并demo(含图例) option = {xAxis: {type: 'category',data: [2001, 2002, 2003, 2004, 2005] ...
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
Echarts实现堆叠柱状图+折线图
Echarts实现堆叠柱状图+折线图,以便后续使用时复制 //堆疊Bar圖+折線圖 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: { ...
Echarts实现折线图+柱状图+折线图填充
用Echarts练习实现折线图+柱状图+折线图填充,以便后续使用时可直接复制 option = {title: {text: '动态数据',subtext: '纯属虚构'},tooltip: {tri ...
echarts——实现面积图+柱状图+折线图等——基础积累
因为到年底了,很多项目组都开始做年终汇报,年终汇报的展示形式最常见的就是看板. 样式美观,可以放到电视机或者大屏上,通过图表的形式进行展示,简单明了,通俗易懂. 直接上最终效果图:是一个展示客户量/流 ...
Echarts 双侧双表头柱状图折线图
Echarts 双侧双表头柱状图折线图带箭头区分颜色成品图片(如需折线图自行更改) 废话不多say 上代码

vue结合echarts开发柱状图+折线图合并的图表

vue结合echarts开发柱状图+折线图合并的图表相关推荐

最新文章

热门文章