/** * 顶部header */ Vue.component("cz-distribution-echart", { template: ` <div :style="{height: height+'px'}" ref="chart"> </div> `, props: { distribute:{ type: Object, }, height:{ type:Number }, }, data() { return { option:{} } }, mounted(){ this.init() }, methods: { //预警分布 init(){ this.warningDistributeChart(this.distribute) }, //预警分布 Echart warningDistributeChart(data){ //console.log(data); let newPromise = new Promise((resolve) => { resolve() }) //然后异步执行echarts的初始化函数 newPromise.then(() => { var myChart = echarts.init(this.$refs.chart); var series = [] if(data.legend != undefined) { for (let i = 0; i <data.legend.length ; i++) { series.push( { type: "bar", name: data.legend[i], barGap:'80%', itemStyle: { normal: { label: { show: true, //开启显示 position: "right", //在右显示 textStyle: { //数值样式 color: data.color[i][1], fontSize: 16, }, }, color: data.color[i][0], borderColor: data.color[i][1], borderWidth: 2, }, }, barWidth: '20%', data:data.data[i], }, ) } option = { legend: { data: data.legend, top: "2%", right: "10", itemHeight: 15, itemWidth: 20, textStyle: { color: "#c8d7ff", fontSize: 14, }, }, grid: { top: "10%", right: "10%", left: "2%", bottom: "2%", containLabel: true }, xAxis: { type: "value", splitLine: { show: false, }, axisTick: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, }, }, yAxis: { type: "category", inverse:true, //让y轴数据逆向 data:data.yAxis, splitLine: {show: false,}, axisTick: {show: false,}, axisLine: {show: false,}, axisLabel: { // 改变y轴字体颜色和大小 //formatter: '{value} m³ ', // 给y轴添加单位 textStyle: { color: "#c8d7ff", fontSize: 14, }, }, }, series: series }; myChart.setOption(option); window.onresize = myChart.resize; } }) }, }, watch:{ distribute: function (n,o) { this.warningDistributeChart(this.distribute) } }, })