版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。
21 篇文章0 订阅
订阅专栏
157 篇文章1 订阅
订阅专栏
202 篇文章0 订阅
订阅专栏
let seriesDatas = [[ 83, 56, 77, 99 ], [ 62, 55, 67, 82 ], [ 71, 45, 62, 79 ], [ 78, 40, 58, 77 ], [ 76, 33, 52, 67 ]] export default { name: 'HelloWorld', data () { return { option2: { title: { text: '景区门票收入走势' }, tooltip: { trigger: 'axis' }, legend: { data : [ '5A', '4A', '3A', '2A', 'A' ] }, calculable: true, xAxis: [ { type: 'category', data: [ '一季度', '二季度', '三季度', '四季度' ] } ], yAxis: [ { type: 'value' } ], series: [ { name : '5A', type : 'bar', barWidth : 8, // 柱子宽度 itemStyle : { // 柱状图样式 color : 'red', barBorderRadius : [ 30, 30, 0, 0 ] }, data : seriesDatas[0] }, { name : '4A', type : 'bar', barWidth : 8, itemStyle : { color : 'orange', barBorderRadius : [ 30, 30, 0, 0 ] }, data : seriesDatas[1] }, { name : '3A', type : 'bar', barWidth : 8, itemStyle : { color : 'yellow', barBorderRadius : [ 30, 30, 0, 0 ] }, data : seriesDatas[2] }, { name : '2A', type : 'bar', barWidth : 8, itemStyle : { color : 'green', barBorderRadius : [ 30, 30, 0, 0 ] }, data : seriesDatas[3] }, { name : 'A', type : 'bar', barWidth : 8, itemStyle : { color : 'blue', barBorderRadius : [ 30, 30, 0, 0 ] }, data : seriesDatas[4] } ] } } }, mounted () { this.getInfo() }, methods: { getInfo () { // 第二个柱状图 let manyBar = this.$echarts.init(this.$refs.manyBar) manyBar.setOption(this.option2) } } }h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; }