<template> <div class="demand"> <div class="common-title"> <div class="icon-and-title"> <img class="icon-title" src="@/assets/overview/s-interation.png" alt=""> <span class="title">{{title}}</span> </div> <img class="bg" src="@/assets/overview/bg_title02.png" alt=""> </div> <div id="barDemand" @click="echartsClick"></div> </div> </template> <script> export default { name: 'demand', data() { return { title:'互动频次' } }, components:{}, mounted() { setTimeout(()=>{ this.init() },100) }, methods: { init(){ let option = { tooltip: { trigger: 'axis' }, grid: { top:30, left: '2%', right: 40, bottom: 30, containLabel: true }, dataZoom: [{ type: "slider", show: true, bottom: 0, start: 0, end: 100, height: 18, handleStyle: { color: "#d3dee5", }, textStyle: { color: "#fff", fontSize: "10px" }, } ], xAxis: { type: 'category', boundaryGap: true,//坐标轴两边留白 data: [ '北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府', ], axisLabel: { //坐标轴刻度标签的相关设置。 interval:0, textStyle: { color: '#333333', 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:'#eeeeee', type:'solid' } }, splitLine: { //坐标轴在 grid 区域中的分隔线。 show: false, } }, yAxis: [ { type: 'value', name:'单位/次', splitNumber: 5, max:100, axisLabel: { textStyle: { color: '#333333', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 12, }, interval:'auto' }, axisLine:{ show: false }, axisTick:{ show: false }, splitLine: { show: true, lineStyle: { color:'#eeeeee', type:'dashed' } } } ], series: [ { type: 'bar', barWidth: 16, // 柱子宽度 itemStyle:{ barBorderRadius: 120, // 圆角(左上、右上、右下、左下) }, color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ '#AC9374', '#9B1E23' ].map((color, offset) => ({ color, offset }))), // 渐变 data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse() } ] }; let echartsDiv = this.$echarts.init(document.getElementById('barDemand')) echartsDiv.setOption(option) }, // 点击事件 echartsClick(){ this.$emit('itemClick',{type:1,title:this.title}) } } } </script> <style lang="less"> #barDemand{ width: 100%; height: calc(100% - 45px); } </style>