<template> <div id="dialogBarDemand"></div> </template> <script> export default { name: 'demand', data() { return { title:'互动频次' } }, mounted() { setTimeout(()=>{ this.init() },100) }, methods: { init(){ let option = { tooltip: { trigger: 'axis' }, grid: { top:20, left: '0%', right: '2%', bottom: '5%', containLabel: true }, xAxis: { type: 'category', boundaryGap: true,//坐标轴两边留白 data: [ '北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府', ], axisLabel: { //坐标轴刻度标签的相关设置。 interval:0, textStyle: { color: '#FFFFFF', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 14, }, formatter: function (value, index) { if(value.length > 4){ return value.slice(0,4)+ '...' }else { return value } } }, axisTick:{//坐标轴刻度相关设置。 show: false, }, axisLine:{//坐标轴轴线相关设置 lineStyle:{ color:'rgba(98,186,255,0.6)', type:'solid' } }, splitLine: { //坐标轴在 grid 区域中的分隔线。 show: false, } }, yAxis: [ { type: 'value', name:'单位/次', splitNumber: 5, max:100, axisLabel: { textStyle: { color: '#FFFFFFFF', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 12, }, interval:'auto' }, axisLine:{ show: false }, axisTick:{ show: false }, splitLine: { show: true, lineStyle: { color: 'rgba(98,186,255,0.6)', type:'dashed' } } } ], series: [ { type: 'bar', barWidth: 16, // 柱子宽度 itemStyle:{ barBorderRadius: 120, // 圆角(左上、右上、右下、左下) }, color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ 'rgba(78,255,253,1)', 'rgba(255,74,83,1)' ].map((color, offset) => ({ color, offset }))), // 渐变 data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse() } ] }; let echartsDiv = this.$echarts.init(document.querySelector('#dialogBarDemand')) echartsDiv.setOption(option,true) }, } } </script> <style <style lang="less">> #dialogBarDemand{ width: 100%; height: 16vh; margin-top: 0.6rem; } </style>