|
@@ -10,7 +10,8 @@
|
|
|
<slot></slot>
|
|
|
</div>
|
|
|
<div class="echarts-radio" v-if="isPie">
|
|
|
- <el-radio @change="changRadio(item)" v-model="radio" :label="item.prop" v-for="item in radioLabel" :key="item.prop">{{ item.label }}</el-radio>
|
|
|
+ <el-radio @change="changRadio(item)" v-model="radio" :label="item.prop" v-for="item in radioLabel"
|
|
|
+ :key="item.prop">{{ item.label }}</el-radio>
|
|
|
</div>
|
|
|
<div :id="echartsId" style="width: 1400px; height: 500px" ref="charts"></div>
|
|
|
</div>
|
|
@@ -92,9 +93,9 @@ export default {
|
|
|
default: 'no'
|
|
|
},
|
|
|
// 是否是入住率
|
|
|
- ruzhulv:{
|
|
|
- type:String,
|
|
|
- default:'no'
|
|
|
+ ruzhulv: {
|
|
|
+ type: String,
|
|
|
+ default: 'no'
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
@@ -128,7 +129,7 @@ export default {
|
|
|
return this.radioLabel[0].label
|
|
|
},
|
|
|
allNum() {
|
|
|
- return this.newTableList[0]?this.newTableList[0].total:0;
|
|
|
+ return this.newTableList[0] ? this.newTableList[0].total : 0;
|
|
|
},
|
|
|
hengzhuYData() {
|
|
|
let array = this.radioLabel.slice(1)
|
|
@@ -156,10 +157,9 @@ export default {
|
|
|
if (this.newKeys[i].prop==yAxis)
|
|
|
{
|
|
|
|
|
|
- if (this.newKeys[i].data)
|
|
|
- {
|
|
|
- temdata=this.newKeys[i].data;
|
|
|
- zt=1;
|
|
|
+ if (this.newKeys[i].data) {
|
|
|
+ temdata = this.newKeys[i].data;
|
|
|
+ zt = 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -172,9 +172,8 @@ export default {
|
|
|
if (this.xStr === 'year') {
|
|
|
|
|
|
arrX.unshift(item[xAxis])
|
|
|
- if (zt==1)
|
|
|
- {
|
|
|
- for (let i = 0; i <temdata.length ; i++) {
|
|
|
+ if (zt == 1) {
|
|
|
+ for (let i = 0; i < temdata.length; i++) {
|
|
|
arrY[i].unshift(item[temdata[i].prop])
|
|
|
}
|
|
|
|
|
@@ -190,9 +189,8 @@ export default {
|
|
|
if (this.xStr === 'ssqh') {
|
|
|
|
|
|
arrX.push(item[xAxis])
|
|
|
- if (zt==1)
|
|
|
- {
|
|
|
- for (let i = 0; i <temdata.length ; i++) {
|
|
|
+ if (zt == 1) {
|
|
|
+ for (let i = 0; i < temdata.length; i++) {
|
|
|
arrY[i].push(item[temdata[i].prop])
|
|
|
}
|
|
|
|
|
@@ -219,14 +217,12 @@ export default {
|
|
|
echartsInit(id, type, unit, xAxis, yData, isX, isY) {
|
|
|
// 是否显示xy轴
|
|
|
let yAxis = yData;
|
|
|
- let seriesdata=[];
|
|
|
-
|
|
|
+ let seriesdata = [];
|
|
|
|
|
|
if (type === 'pie' || this.hengzhu === 'yes') {
|
|
|
-
|
|
|
let array = this.radioLabel.slice(1)
|
|
|
yAxis = array.map((item, index) => {
|
|
|
- return { name: item.label, value: this.newTableList[0]?this.newTableList[0][item.prop]:0 }
|
|
|
+ return { name: item.label, value: this.newTableList[0] ? this.newTableList[0][item.prop] : 0 }
|
|
|
})
|
|
|
seriesdata.push({
|
|
|
type,
|
|
@@ -239,26 +235,22 @@ export default {
|
|
|
radius: ['50%', '75%'],
|
|
|
hoverAnimation: true,
|
|
|
avoidLabelOverlap: false,
|
|
|
-
|
|
|
itemStyle: {
|
|
|
normal: { color: '#288DEF' }
|
|
|
-
|
|
|
},
|
|
|
colorBy: 'series'
|
|
|
})
|
|
|
- }
|
|
|
- else
|
|
|
- {
|
|
|
- for (let i = 0; i <yAxis.length ; i++) {
|
|
|
- let colors=[{ color: '#288DEF' },{ color: '#efd428' },{ color: '#ef2895' }];
|
|
|
- let names=["总数","公办","民办"];
|
|
|
+ } else {
|
|
|
+ for (let i = 0; i < yAxis.length; i++) {
|
|
|
+ let colors = [{ color: '#288DEF' }, { color: '#efd428' }, { color: '#ef2895' }];
|
|
|
+ let names = ["总数", "公办", "民办"];
|
|
|
seriesdata.push({
|
|
|
type,
|
|
|
data: yAxis[i],
|
|
|
- // barWidth: '40%',
|
|
|
- name:names[i],
|
|
|
- barGap:'100%',
|
|
|
- symbol:'emptydiamond',
|
|
|
+ // barWidth: '40%',
|
|
|
+ name: names[i],
|
|
|
+ barGap: '100%',
|
|
|
+ symbol: 'emptydiamond',
|
|
|
showBackground: true,
|
|
|
backgroundStyle: {
|
|
|
color: 'rgba(180, 180, 180, 0.2)'
|
|
@@ -266,10 +258,8 @@ export default {
|
|
|
radius: ['50%', '75%'],
|
|
|
hoverAnimation: true,
|
|
|
avoidLabelOverlap: false,
|
|
|
-
|
|
|
itemStyle: {
|
|
|
normal: colors[i]
|
|
|
-
|
|
|
},
|
|
|
colorBy: 'series'
|
|
|
})
|
|
@@ -288,54 +278,54 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
legend: {},
|
|
|
- toolbox:{
|
|
|
- show : true, //是否显示工具栏组件
|
|
|
- zlevel:0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
|
|
|
- z:2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖
|
|
|
- orient:"vertical", //工具栏 icon 的布局朝向'horizontal' 'vertical'
|
|
|
- left:"right", //组件离容器左侧的距离,'left', 'center', 'right','20%'
|
|
|
- top:"center", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
|
|
|
- right:"auto", //组件离容器右侧的距离,'20%'
|
|
|
- bottom:"auto", //组件离容器下侧的距离,'20%'
|
|
|
- width:"auto", //图例宽度
|
|
|
- height:"auto", //图例高度
|
|
|
+ toolbox: {
|
|
|
+ show: true, //是否显示工具栏组件
|
|
|
+ zlevel: 0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
|
|
|
+ z: 2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖
|
|
|
+ orient: "vertical", //工具栏 icon 的布局朝向'horizontal' 'vertical'
|
|
|
+ left: "right", //组件离容器左侧的距离,'left', 'center', 'right','20%'
|
|
|
+ top: "center", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
|
|
|
+ right: "auto", //组件离容器右侧的距离,'20%'
|
|
|
+ bottom: "auto", //组件离容器下侧的距离,'20%'
|
|
|
+ width: "auto", //图例宽度
|
|
|
+ height: "auto", //图例高度
|
|
|
|
|
|
- itemSize:15, //工具栏 icon 的大小
|
|
|
- itemGap:10, //工具栏 icon 每项之间的间隔
|
|
|
- showTitle:true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
|
|
|
- feature : {
|
|
|
- mark : { // '辅助线开关'
|
|
|
+ itemSize: 15, //工具栏 icon 的大小
|
|
|
+ itemGap: 10, //工具栏 icon 每项之间的间隔
|
|
|
+ showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
|
|
|
+ feature: {
|
|
|
+ mark: { // '辅助线开关'
|
|
|
show: true
|
|
|
},
|
|
|
- dataView : { //数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新
|
|
|
+ dataView: { //数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新
|
|
|
show: true, //是否显示该工具。
|
|
|
- title:"数据视图",
|
|
|
+ title: "数据视图",
|
|
|
readOnly: false, //是否不可编辑(只读)
|
|
|
lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术,默认是['数据视图', '关闭', '刷新']
|
|
|
- backgroundColor:"#fff", //数据视图浮层背景色。
|
|
|
- textareaColor:"#fff", //数据视图浮层文本输入区背景色
|
|
|
- textareaBorderColor:"#333", //数据视图浮层文本输入区边框颜色
|
|
|
- textColor:"#000", //文本颜色。
|
|
|
- buttonColor:"#c23531", //按钮颜色。
|
|
|
- buttonTextColor:"#fff", //按钮文本颜色。
|
|
|
+ backgroundColor: "#fff", //数据视图浮层背景色。
|
|
|
+ textareaColor: "#fff", //数据视图浮层文本输入区背景色
|
|
|
+ textareaBorderColor: "#333", //数据视图浮层文本输入区边框颜色
|
|
|
+ textColor: "#000", //文本颜色。
|
|
|
+ buttonColor: "#c23531", //按钮颜色。
|
|
|
+ buttonTextColor: "#fff", //按钮文本颜色。
|
|
|
optionToContent: function (opt) {
|
|
|
var axisData = opt.xAxis[0].data;//x轴作为条件,y轴需改成yAxis[0].data;
|
|
|
var series = opt.series;
|
|
|
var tdHeads = '<td style="padding:0 10px">名称</td>';
|
|
|
series.forEach(function (item) {
|
|
|
- tdHeads += '<td style="padding: 0 10px">'+item.name+'</td>';
|
|
|
+ tdHeads += '<td style="padding: 0 10px">' + item.name + '</td>';
|
|
|
});
|
|
|
- var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;background-color:#f8f4f4"><tbody><tr>'+tdHeads+'</tr>';
|
|
|
+ var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;background-color:#f8f4f4"><tbody><tr>' + tdHeads + '</tr>';
|
|
|
var tdBodys = '';
|
|
|
for (var i = 0, l = axisData.length; i < l; i++) {
|
|
|
for (var j = 0; j < series.length; j++) {
|
|
|
- if(typeof(series[j].data[i]) == 'object'){
|
|
|
- tdBodys += '<td>'+series[j].data[i].value+'</td>';
|
|
|
- }else{
|
|
|
- tdBodys += '<td>'+ series[j].data[i]+'</td>';
|
|
|
+ if (typeof (series[j].data[i]) == 'object') {
|
|
|
+ tdBodys += '<td>' + series[j].data[i].value + '</td>';
|
|
|
+ } else {
|
|
|
+ tdBodys += '<td>' + series[j].data[i] + '</td>';
|
|
|
}
|
|
|
}
|
|
|
- table += '<tr><td style="padding: 0 10px">'+axisData[i]+'</td>'+ tdBodys +'</tr>';
|
|
|
+ table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
|
|
|
tdBodys = '';
|
|
|
}
|
|
|
table += '</tbody></table>';
|
|
@@ -344,20 +334,20 @@ export default {
|
|
|
},
|
|
|
magicType: { //动态类型切换
|
|
|
show: true,
|
|
|
- title:"切换", //各个类型的标题文本,可以分别配置。
|
|
|
+ title: "切换", //各个类型的标题文本,可以分别配置。
|
|
|
type: ['line', 'bar', 'stack', 'tiled'], //启用的动态类型,包括'line'(切换为折线图), 'bar'(切换为柱状图), 'stack'(切换为堆叠模式), 'tiled'(切换为平铺模式)
|
|
|
},
|
|
|
- restore : { //配置项还原。
|
|
|
+ restore: { //配置项还原。
|
|
|
show: true, //是否显示该工具。
|
|
|
- title:"还原",
|
|
|
+ title: "还原",
|
|
|
},
|
|
|
- saveAsImage : { //保存为图片。
|
|
|
+ saveAsImage: { //保存为图片。
|
|
|
show: true, //是否显示该工具。
|
|
|
- type:"png", //保存的图片格式。支持 'png' 和 'jpeg'。
|
|
|
- name:"pic1", //保存的文件名称,默认使用 title.text 作为名称
|
|
|
- backgroundColor:"#ffffff", //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色
|
|
|
- title:"保存为图片",
|
|
|
- pixelRatio:1 //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2
|
|
|
+ type: "png", //保存的图片格式。支持 'png' 和 'jpeg'。
|
|
|
+ name: "pic1", //保存的文件名称,默认使用 title.text 作为名称
|
|
|
+ backgroundColor: "#ffffff", //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色
|
|
|
+ title: "保存为图片",
|
|
|
+ pixelRatio: 1 //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2
|
|
|
},
|
|
|
|
|
|
},
|
|
@@ -390,7 +380,7 @@ export default {
|
|
|
},
|
|
|
series: seriesdata
|
|
|
}
|
|
|
- if(this.ruzhulv === 'yes'){
|
|
|
+ if (this.ruzhulv === 'yes') {
|
|
|
option.yAxis.name = ''
|
|
|
}
|
|
|
if (type === 'bar' || type === 'line') {
|
|
@@ -422,11 +412,11 @@ export default {
|
|
|
},
|
|
|
fontSize: 16
|
|
|
}
|
|
|
- ;(option.series[0].labelLine = {
|
|
|
- length: 0,
|
|
|
- length2: 0,
|
|
|
- maxSurfaceAngle: 80
|
|
|
- }),
|
|
|
+ ; (option.series[0].labelLine = {
|
|
|
+ length: 0,
|
|
|
+ length2: 0,
|
|
|
+ maxSurfaceAngle: 80
|
|
|
+ }),
|
|
|
(option.series[0].itemStyle = {
|
|
|
color: function (params) {
|
|
|
var colorList = ['#4B9BDB', '#44BEA3', '#8FB435', '#FEB019', '#19D4AE', '#FA6E86', '#FFB980', '#0067A6', '#C4B4E4', '#D87A80', '#9CBBFF', '#D26900', ' #BBFFFF']
|
|
@@ -523,7 +513,7 @@ export default {
|
|
|
itemSize: '',
|
|
|
rotate: -30
|
|
|
},
|
|
|
- formatter: function (value, index) {}
|
|
|
+ formatter: function (value, index) { }
|
|
|
}
|
|
|
}
|
|
|
option.yAxis = {
|
|
@@ -624,7 +614,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- created() {},
|
|
|
+ created() { },
|
|
|
mounted() {
|
|
|
this.$bus.$on('reset-radio', this.resetRadio)
|
|
|
// this.setTable(this.xStr, this.yName)
|
|
@@ -644,17 +634,17 @@ export default {
|
|
|
this.xfssbXZHOU = array
|
|
|
},
|
|
|
tableList(newVal) {
|
|
|
- if (newVal&&newVal.length>0) {
|
|
|
+ if (newVal && newVal.length > 0) {
|
|
|
this.newTableList = newVal
|
|
|
this.deepNewTableList = this.deepCopy(this.newTableList)
|
|
|
let valueARR = Object.values(this.deepNewTableList[0])
|
|
|
valueARR.splice(0, 2)
|
|
|
this.xfssbYZHOU = valueARR
|
|
|
this.total = this.deepNewTableList[0].total
|
|
|
- }else {
|
|
|
- this.newTableList=[]
|
|
|
- this.xfssbYZHOU=[];
|
|
|
- this.total=0;
|
|
|
+ } else {
|
|
|
+ this.newTableList = []
|
|
|
+ this.xfssbYZHOU = [];
|
|
|
+ this.total = 0;
|
|
|
}
|
|
|
this.setTable(this.xStr, this.yName)
|
|
|
this.echartsInit(this.echartsId, this.type, this.danwei, this.x, this.y, this.isX, this.isY)
|
|
@@ -672,28 +662,34 @@ export default {
|
|
|
padding: 20px;
|
|
|
width: 75%;
|
|
|
}
|
|
|
+
|
|
|
.echarts-title {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
+
|
|
|
.echarts-title div:nth-child(1) {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
+
|
|
|
.black-box {
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
background: #000;
|
|
|
}
|
|
|
+
|
|
|
.echarts-title div:nth-child(1) span:nth-child(2) {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
+
|
|
|
.echarts-text,
|
|
|
.echarts-radio,
|
|
|
.xxtj-table {
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
+
|
|
|
.xxtj-table,
|
|
|
.echarts,
|
|
|
.ssqh {
|