Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use vue and echarts to achieve stacked bar chart", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use vue and echarts to achieve stacked bar chart" bar!

In this paper, an example is given to share the specific code for vue+echarts to implement stacked bar charts for your reference. The details are as follows

Echarts- subcomponent

Import echarts from "echarts" Import eventBus from'@ / components/event/event-bus' export default {props: {legendData: {type: Array, default: []}, xAxisData: {type: Array, default: []}, seriesData: {type: Array, default: []}} Data () {return {echartsObj: null,}}, mounted () {var that = this eventBus.$on ("window-resize", target = > {that.echartsObj & & that.echartsObj.resize ()}) }, methods: {initCharts () {this.echartsObj = echarts.init (this.$refs.chartEle) this.setOption () / _ window.onresize = function () {/ / this.echartsObj.resize () / /}}, resizeChart () {this.echartsObj.resize ()} SetOption () {const that = this var option = {color: ['# 2DC6C8regions,'# B6A2DD'], / / tooltip: {trigger: 'item', formatter: "{a}: {c}"}, tooltip: {} / / right data view, line chart, restore, save display flag toolbox: {feature: {/ / dataView: {show: true, readOnly: false}, / / magicType: {show: true, type: ['line',' bar']}, / / restore: {show: true} / / saveAsImage: {show: true} magicType: {show: true, type: ["line", "bar"], icon: {line: "image:///static/images/toolbox_zhexian.png" Bar: "image:///static/images/toolbox_zhuzhuangtu.png"}}, restore: {show: true, icon: "image:///static/images/toolbox_shuaxin.png"}, saveAsImage: {show: true Icon: "image:///static/images/toolbox_xiazai.png"}, legend: {bottom: '5percent, data: this.legendData}, grid: {top:' 40'} XAxis: [{type: 'category', data: this.xAxisData, axisLine: {lineStyle: {color:' # 7DABB0'}} / / x axis tick line color}], yAxis: [{type: 'value' AxisLine: {lineStyle: {color:'# 7DABB0'} / / y axis coordinate color}, axisTick: {lineStyle: {color:'# 7DABB0'} / / y axis coordinate scale color}}] Series: this.seriesData} this.echartsObj.setOption (option)}} .chart {height: 360px Width: 100%;}

Echarts parent component

Import FormSearch from'@ / components/formSearch/formSearch' import eventBus from'@ / components/event/event-bus' import DiversificationBarChart from'@ / components/echarts/diversificationBarChart/index' export default {name: 'list', / / component components: {FormSearch, eventBus, DiversificationBarChart}, data () {return {legendData: [], / / legend xAxisData: [] / / x axis seriesData: [] / / figure data}}, mounted () {/ / load list this.legendData = ['automatic alarm', 'manual alarm'] this.xAxisData = ['2018-09-02,' 2019-02-25, '2019-05-25'] this.seriesData = [{name: 'automatic alarm' Type: 'bar', stack:'111',// stacking barMaxWidth:' 100mm data: [20,30,40]}, {name: 'manual alarm', type: 'bar', stack:'111',// stacking barMaxWidth:' 100' / / data: [10,50,35]}] this.$nextTick () = > {eventBus.$emit ('window-resize') this.$refs.barCharts.initCharts ()})}, methods: {onSearch (data) {}

Effect picture

Thank you for your reading, the above is "how to use vue and echarts to achieve stacked bar chart" content, after the study of this article, I believe you on how to use vue and echarts to achieve stacked bar chart this problem has a deeper understanding, the specific use also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.