echarts 堆叠柱状图横向,echarts 堆叠图
这篇文章主要为大家详细介绍了vue echarts实现堆叠柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue echarts实现堆叠柱状图的具体代码，供大家参考，具体内容如下
电子海图-子组件
模板
div class= chart ref= chartEle /div
/模板
脚本
从“电子海图”导入电子海图；
从" @/组件/事件/事件总线"导入事件总线
导出默认值{
道具：{
legendData: {
类型：数组，
默认值：[]
},
xAxisData: {
类型：数组，
默认值：[]
},
系列数据：{
类型：数组，
默认值：[]
}
},
data() {
返回{
echartsObj: null，
}
},
已安装(){
变那个=这个
事件总线.$on(window-resize ，target={
那个。echartsobj那个。echartsobj。调整大小()
});
},
方法：{
initCharts() {
这个。echartsobj=echarts。初始化(这.$refs.chartEle)
this.setOption()
//window.onresize=function() {
//this.echartsObj.resize()
//}
},
resizeChart() {
this.echartsObj.resize()
},
setOption() {
常数那个=这个
定义变量选项={
颜色：[#2DC6C8 ， #B6A2DD]，
//工具提示：{触发器：项目，格式化程序：“{ a }:{ c }”}，
工具提示：{ },
//右侧数据视图、折线图、还原、保存显示标志
工具箱：{
功能：{
//dataView: {show: true，readOnly: false}，
//magicType: {show: true，type: [line ， bar]}，
//restore: {show: true}，
//saveAsImage: {show: true}
magicType: {
秀：真的，
类型：[线条,条形],
图标：{
行： image:///static/images/toolbox _ zhe xian。巴布亚新几内亚，
bar: image:///static/images/toolbox _朱壮图。巴布亚新几内亚
}
},
还原：{
秀：真的，
图标： image:///static/images/toolbox _ shua Xin。巴布亚新几内亚
},
saveAsImage: {
秀：真的，
图标： image:///static/images/toolbox _ Xia zai。巴布亚新几内亚
}
}
},
图例：{
底部："5",
数据：this.legendData
},
网格：{
顶部："40"
},
xAxis: [
{
类型："类别",
数据：this.xAxisData，
轴线：{线条样式：{ color: # 7 dabb 0 } }//x轴刻度线颜色
}
],
亚西斯：[
{
类型："值",
轴线：{
lineStyle: { color: #7DABB0 } //y轴坐标轴颜色
},
轴棒：{
lineStyle: { color: #7DABB0 } //y轴坐标刻度颜色
}
}
],
系列：this.seriesData
}
this.echartsObj.setOption(选项)
}
}
}
/脚本
样式范围。图表{
高度：360像素
宽度：100%;
}
/风格
展示父组件
模板
差异
表单搜索@ on search= on search /表单搜索
div class= panel orioc-table-panel slot= center
！-图表-
多样化-条形图
ref=条形图
:legendData=legendData
:seriesData=seriesData
:xAxisData=xAxisData
/多样化-条形图
！-表格-
/div
/div
/模板
脚本
从" @/components/FormSearch/FormSearch "导入表单搜索
从" @/组件/事件/事件总线"导入事件总线
从@/组件/电子图表/分流条形图/索引导入分流条形图
导出默认值{
名称：列表，
//组件
组件：{ FormSearch，eventBus，DiversificationBarChart }，
data() {
返回{
legendData: []，//图例
xAxisData: []，//x轴
seriesData: []//图数据
}
},
已安装(){
//加载列表
this.legendData=[自动接警, 人工接警]
this.xAxisData=[2018-09-02 ， 2019-02-25 ， 2019-05-25]
this.seriesData=[
{
名称： 自动接警，
类型："条形",
堆栈："111",//堆叠
barMaxWidth: 100 ，//柱状图最大宽度
数据：[20,30,40]
},
{
名称： 人工接警，
类型："条形",
堆栈："111",//堆叠
barMaxWidth: 100 ，//柱状图最大宽度
数据：[10,50,35]
}
]
这个. nextTick(()={
事件总线.$emit(窗口大小调整)
这个refs.barCharts.initCharts()
})
},
方法：{
在线搜索(数据){}
}
}
/脚本
样式范围
/风格
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。