vue中echarts实现甘特图

vue中使用echarts实现甘特图，在网上找了很多代码都不完整，大家可以尝试下面这个从官网搬运过来的阶梯瀑布图，做了小更改

效果如下：

<template><div id="myChart" ref="chart" ></div>
</template>
<script>export default {updated(){this.changeView();},methods: {drawLine () {// 基于准备好的dom，初始化echarts实例// var bar_dv = document.getElementById('bar_dv');var barDv = this.$refs.chart;if (barDv) {console.log('bar_dv不为空');let myChart = this.$echarts.init(barDv)// 基于准备好的dom，初始化echarts实例// let myChart = this.$echarts.init(document.getElementById('myChart'))// 绘制图表var option = {title: {text: '阶梯瀑布图',subtext: 'From ExcelHome',sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'},tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'},formatter: function (params) {var tar;if (params[1].value != '-') {tar = params[1];}else {tar = params[0];}return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;}},legend: {data: ['支出', '收入']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},yAxis: {type: 'category',splitLine: { show: false },data: function () {var list = [];for (var i = 1; i <= 11; i++) {list.push('11月' + i + '日');}return list;}()},xAxis: {type: 'value'},series: [{name: '辅助',type: 'bar',stack: '总量',itemStyle: {normal: {barBorderColor: 'rgba(0,0,0,0)',color: 'rgba(0,0,0,0)'},emphasis: {barBorderColor: 'rgba(0,0,0,0)',color: 'rgba(0,0,0,0)'}},data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]},{name: '收入',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'top'}},data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']},{name: '支出',type: 'bar',stack: '总量',label: {normal: {show: true,position: 'bottom'}},data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]}]};myChart.setOption(option);} else {console.log('bar_dv为空!');}}}}
</script>

vue中echarts实现甘特图相关推荐

vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...
vue使用e-charts制作专题图（广西省为例）---第一篇
vue使用E-Charts制作专题图(广西省为例)---第一篇写博客是为了做笔记先给大家看一下效果图: "专题图"顾名思义就是地图的每一部分根据一定的标准,展现出不一样颜色,使 ...
vue 中 echarts 中国地图
我们先来看一下效果说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面没有 map ...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点先看效果图我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
wps图表中如何插入甘特图_如何通过使用D3可视化数据集来构建类似甘特图的图表...
wps图表中如何插入甘特图 by Déborah Mesquita 由DéborahMesquita 如何通过使用D3可视化数据集来构建类似甘特图的图表 (How to build a Gantt-l ...
Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示效果图代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
vue+echarts画甘特图
vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js ...
echart 时间滚动_基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...

vue中echarts实现甘特图

vue中echarts实现甘特图相关推荐

最新文章

热门文章