<template> <div :id="id" style="width:100%;height:100%;"></div> </template> <script> import * as echarts from 'echarts'; import { stringify } from "querystring"; import { on, off } from '@/libs/tools' export default { props: { id: String, EchartsData: {}, histogram: Boolean, title: String, compound: Boolean, bar: Boolean, compoundBartype: String }, data() { return { Charts: null, option: { title: { text: "", // top: "15", left: "5%", padding: 0, textStyle: { color: "#000", fontStyle: "normal", fontSize: 14, fontWeight: 540 } }, color: [], tooltip: { trigger: "axis", backgroundColor: "#fff", textStyle: { color: "#333333" }, axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' shadowStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(5,61,120,0.5)" // 0% 处的颜色 }, { offset: 1, color: "rgba(24,61,133,0.5)" // 100% 处的颜色 } ], global: false // 缺省为 false } } }, extraCssText: "box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);", confine: true }, legend: { show: false, data: [], top: 12, textStyle: { color: "white" }, itemWidth: 12, itemHeight: 10 }, grid: { left: "5%", top: "10%", bottom: "5%", right: "5%", z: 22, containLabel: true }, xAxis: [ { type: "category", axisTick: { show: true }, axisLine: { lineStyle: { color: "#1056A0" } }, triggerEvent: "true", data: [], splitLine: { show: false }, axisLabel: { show: true, interval: 0, rotate: 0, textStyle: { color: "#606264", fontSize: 12 } } } ], yAxis: [ { type: "value", barWidth: 10, // splitNumber: 5, splitLine: { show: false }, name: "", show: true, nameTextStyle: { show: true }, axisLabel: { show: true, textStyle: { color: "#606264" } }, axisTick: { //决定是否显示坐标刻度 alignWithLabel: true, show: true }, axisLine: { show: true } } ], series: [] } }; }, methods: { initEchart(response) { let xTitle = response.xtitle; let data = response.data; //直方图 if (this.histogram) { let newData = this.exchangeData(data, xTitle); this.option.series = []; let totalWid = Math.floor(document.getElementById(this.id).clientWidth * 0.85); this.option.series = [ { name: "", type: "bar", data: newData, barWidth: totalWid / xTitle.length, itemStyle: { color: "#D14A61" } } ]; this.option.xAxis[0].data = xTitle; } //复式柱图 if (this.compound) { //设置颜色 let colorList = ["#3DE2B0", "#699EFF", "#D14A61", "#FFC700", "#FB775D"]; if (this.compoundBartype == "1") { this.option.xAxis[0].data = xTitle; //获取分组 let mData = []; let obj = Object.values(data[0])[0]; for (let i in obj) { mData.push(i); } //组装数据 let newShowarr = []; mData.forEach((items, index) => { newShowarr[index] = []; data.forEach(ite => { newShowarr[index].push( Object.values(Object.values(ite)[0][items])[0] ); }); }); //组成 this.option.series = []; newShowarr.forEach((items, index) => { this.option.series.push({ name: mData[index], type: "bar", data: items, itemStyle: { color: colorList[index] } }); }); // this.option.legend.show=true // this.option.legend.data = mData; } else if ((this.compoundBartype = "2")) { //提取x轴 let newXarr = []; xTitle.forEach(items => { newXarr.push(items.split("::")[0]); }); let showXtitle = this.removeRepeatForArr(newXarr); this.option.xAxis[0].data = showXtitle; //提取分组 let newMarr = []; xTitle.forEach(items => { newMarr.push(items.split("::")[1]); }); let showMdata = this.removeRepeatForArr(newMarr); //组装数据 let newShowData = []; showMdata.forEach((items, index) => { newShowData[index] = []; data.forEach(ite => { if (Object.keys(ite)[0].split("::")[1] == items) { newShowData[index].push( Object.values(Object.values(ite)[0])[0] ); } }); }); //组装series this.option.series = []; newShowData.forEach((items, index) => { this.option.series.push({ name: showMdata[index], type: "bar", data: items, barGap: '20%', barWidth: 20, itemStyle: { color: colorList[index] } }); }); let that = this; this.option.tooltip.formatter = function (param) { let sr = ""; sr = param[0].axisValueLabel + '<br/>'; param.forEach(items => { sr += items.seriesName + ":" + that.scieData(items.value) + "<br/>"; }); return sr; }; } } //柱状图 if (this.bar) { let xTitle = [] let showData = []; data.forEach((items, index) => { showData.push(items.value); xTitle.push(items.label) }); this.option.series = []; this.option.series = [ { name: "", type: "bar", data: showData, barWidth: '60%', itemStyle: { normal: { barBorderRadius: 5, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#956FD4" }, { offset: 1, color: "#3EACE5" } ]) } } } ]; this.option.xAxis[0].data = xTitle; } this.option.title.text = this.title; var chartsDiv = document.getElementById(this.id); this.Charts = echarts.init(chartsDiv); this.Charts.setOption(this.option); on(window, 'resize', this.Charts.resize) }, //小于1 的转科学计数法 scieData(number) { let newNumber = 0; if (number < 1) { let len = (number + "").split(".")[1].length; let str = (number + "").split(".")[1]; let arr = (number + "").split(".")[1].split(""); let unzero = []; arr.forEach((items, index) => { if (items != 0) { unzero.push(index); } }); let p = unzero[0] + 1; let ne = str.substr(3, len); let neLe = ne.split("").length; newNumber = ne.substr(0, 1) + "." + ne.substr(1, neLe) + " e-" + p; } else { newNumber = number; } return newNumber; }, //转数据格式 exchangeData(data, xTitle) { let newData = []; //直方图的数据格式转换 if (this.histogram) { xTitle.forEach((items, index) => { newData.push(Object.values(data[index][items])[0]); }); } return newData; }, //数据去重 removeRepeatForArr(arr) { return arr.filter((item, index) => { return arr.indexOf(item) === index; }); } }, mounted() { }, watch: { EchartsData(newValue, oldValue) { this.initEchart(newValue); } }, beforeDestroy() { off(window, 'resize', this.Charts.resize) } }; </script>