|
|
@@ -1,699 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="echarts">
|
|
|
- <div class="echarts-title">
|
|
|
- <div>
|
|
|
- <span class="black-box"></span>
|
|
|
- <span>{{ title }}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 插入下拉多选框或者日期选择框 -->
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- <div :id="echartsId" style="width: 1400px; height: 500px" ref="charts"></div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-export default {
|
|
|
- name: 'EchartsBox3',
|
|
|
- props: {
|
|
|
- echartsId: {
|
|
|
- type: [String, Number, Object],
|
|
|
- default: 'main'
|
|
|
- },
|
|
|
- tableList: {
|
|
|
- type: Array,
|
|
|
- default: () => [1, 2, 3, 4, 5]
|
|
|
- },
|
|
|
- labelKeys: {
|
|
|
- type: Array,
|
|
|
- default: () => [1]
|
|
|
- },
|
|
|
- unit: {
|
|
|
- type: String,
|
|
|
- default: '家'
|
|
|
- },
|
|
|
- type: {
|
|
|
- type: String,
|
|
|
- default: 'line'
|
|
|
- },
|
|
|
- isPie: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- // 判断x轴的是year 还是 szqh
|
|
|
- xStr: {
|
|
|
- type: String,
|
|
|
- default: 'year'
|
|
|
- },
|
|
|
- title: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- isX: {
|
|
|
- type: String,
|
|
|
- default: 'category'
|
|
|
- },
|
|
|
- isY: {
|
|
|
- type: String,
|
|
|
- default: 'value'
|
|
|
- },
|
|
|
- isfftj: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- isTwoBar: {
|
|
|
- type: String,
|
|
|
- default: 'no'
|
|
|
- },
|
|
|
- // 老人留守统计使用的
|
|
|
- yName: {
|
|
|
- type: String,
|
|
|
- default: 'total'
|
|
|
- },
|
|
|
- radioName: {
|
|
|
- type: String,
|
|
|
- default: 'total'
|
|
|
- },
|
|
|
- danwei: {
|
|
|
- type: String,
|
|
|
- default: '家'
|
|
|
- },
|
|
|
- hengzhu: {
|
|
|
- type: String,
|
|
|
- default: 'no'
|
|
|
- },
|
|
|
- // 消防设施配备情况表2
|
|
|
- xfsspbqk: {
|
|
|
- type: String,
|
|
|
- default: 'no'
|
|
|
- },
|
|
|
- // 是否是入住率
|
|
|
- ruzhulv: {
|
|
|
- type: String,
|
|
|
- default: 'no'
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- radio: 'total',
|
|
|
- newKeys: [],
|
|
|
- newTableList: [],
|
|
|
- newUnit: '',
|
|
|
- // radioLabel: [],
|
|
|
- x: [],
|
|
|
- y: [],
|
|
|
- // 消防设施表2
|
|
|
- deepNewTableList: [],
|
|
|
- deepNewKeys: [],
|
|
|
- xfssbXZHOU: [],
|
|
|
- xfssbYZHOU: [],
|
|
|
- total: ''
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 单选框的名字
|
|
|
- radioLabel() {
|
|
|
- return this.newKeys.filter((item) => item.type === 'select')
|
|
|
- },
|
|
|
- // 按分类统计，横向表格的 分类名
|
|
|
- // labelArr() {
|
|
|
- // return this.newKeys.filter((item) => item.type === 'select').map((item) => item.label)
|
|
|
- // },
|
|
|
- // 饼图全部的名字
|
|
|
- all() {
|
|
|
- return this.radioLabel[0].label
|
|
|
- },
|
|
|
- allNum() {
|
|
|
- return this.newTableList[0] ? this.newTableList[0].total : 0;
|
|
|
- },
|
|
|
- hengzhuYData() {
|
|
|
- let array = this.radioLabel.slice(1)
|
|
|
- let newArr = []
|
|
|
- array.forEach((item) => {
|
|
|
- newArr.unshift(item.label)
|
|
|
- })
|
|
|
- return newArr
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 改变newKeys中的数据
|
|
|
- // setKeys() {
|
|
|
- // let arrLabel = this.newKeys.filter((item) => item.type === 'select')
|
|
|
- // this.radioLabel = arrLabel
|
|
|
- // },
|
|
|
- // 改变table中X轴的数据的数据格式 参数是 x轴对应的数据名字，y轴对应的数据名字
|
|
|
- setTable(xAxis, yAxis) {
|
|
|
- // x轴
|
|
|
- let arrX = []
|
|
|
- let arrY = [[], [], []];
|
|
|
- let temdata = [];
|
|
|
- console.log(this.newTableList, "sssss")
|
|
|
- console.log(this.newKeys, "sssss");
|
|
|
- let zt = 0;
|
|
|
- for (let i = 0; i < this.newKeys.length; i++) {
|
|
|
- if (this.newKeys[i].prop == yAxis) {
|
|
|
-
|
|
|
- if (this.newKeys[i].data) {
|
|
|
- temdata = this.newKeys[i].data;
|
|
|
- zt = 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- this.newTableList.forEach((item) => {
|
|
|
- if (this.xStr === 'hjqh') {
|
|
|
- arrX.push(item[xAxis])
|
|
|
- arrY.push(item[yAxis])
|
|
|
- }
|
|
|
- if (this.xStr === 'year') {
|
|
|
-
|
|
|
- arrX.unshift(item[xAxis])
|
|
|
- if (zt == 1) {
|
|
|
- for (let i = 0; i < temdata.length; i++) {
|
|
|
- arrY[i].unshift(item[temdata[i].prop])
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- else
|
|
|
- arrY.unshift(item[yAxis]);
|
|
|
- }
|
|
|
- if (this.hengzhu === 'yes') {
|
|
|
-
|
|
|
- arrX.unshift(item[xAxis])
|
|
|
- arrY.unshift(item[yAxis])
|
|
|
- }
|
|
|
- if (this.xStr === 'ssqh') {
|
|
|
-
|
|
|
- arrX.push(item[xAxis])
|
|
|
- if (zt == 1) {
|
|
|
- for (let i = 0; i < temdata.length; i++) {
|
|
|
- arrY[i].push(item[temdata[i].prop])
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- else
|
|
|
- arrY.push(item[yAxis]);
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- this.x = arrX
|
|
|
- this.y = arrY
|
|
|
- if (this.isfftj === true) {
|
|
|
- this.x = this.newKeys.filter((item) => item.type === 'select').map((item) => item.label)
|
|
|
- }
|
|
|
- },
|
|
|
- // 单选框改变事件
|
|
|
- changRadio(item) {
|
|
|
- this.$emit('change-radio', this.radio)
|
|
|
- this.setTable(this.xStr, item.prop)
|
|
|
-
|
|
|
- this.echartsInit(this.echartsId, this.type, this.danwei, this.x, this.y, this.isX, this.isY)
|
|
|
- },
|
|
|
- // echarts 参数为：每个图表id，图表类型，单位,x轴数据，y轴数据,isX和isY是否是横向（value和category）
|
|
|
- echartsInit(id, type, unit, xAxis, yData, isX, isY) {
|
|
|
- // 是否显示xy轴
|
|
|
- let yAxis = yData;
|
|
|
- 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 }
|
|
|
- })
|
|
|
- seriesdata.push({
|
|
|
- type,
|
|
|
- data: yAxis,
|
|
|
- barWidth: '40%',
|
|
|
- showBackground: true,
|
|
|
- backgroundStyle: {
|
|
|
- color: 'rgba(180, 180, 180, 0.2)'
|
|
|
- },
|
|
|
- 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 = ["总数", "公办", "民办"];
|
|
|
- seriesdata.push({
|
|
|
- type,
|
|
|
- data: yAxis[i],
|
|
|
- // barWidth: '40%',
|
|
|
- name: names[i],
|
|
|
- barGap: '100%',
|
|
|
- symbol: 'emptydiamond',
|
|
|
- showBackground: true,
|
|
|
- backgroundStyle: {
|
|
|
- color: 'rgba(180, 180, 180, 0.2)'
|
|
|
- },
|
|
|
- radius: ['50%', '75%'],
|
|
|
- hoverAnimation: true,
|
|
|
- avoidLabelOverlap: false,
|
|
|
- itemStyle: {
|
|
|
- normal: colors[i]
|
|
|
- },
|
|
|
- colorBy: 'series'
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- var myChart = this.$echarts.init(document.getElementById(id))
|
|
|
- var option = {
|
|
|
- // color: ['#288DEF'],
|
|
|
- title: {},
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- 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", //图例高度
|
|
|
-
|
|
|
- itemSize: 15, //工具栏 icon 的大小
|
|
|
- itemGap: 10, //工具栏 icon 每项之间的间隔
|
|
|
- showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
|
|
|
- feature: {
|
|
|
- mark: { // '辅助线开关'
|
|
|
- show: true
|
|
|
- },
|
|
|
- dataView: { //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
|
|
|
- show: true, //是否显示该工具。
|
|
|
- title: "数据视图",
|
|
|
- readOnly: false, //是否不可编辑（只读）
|
|
|
- lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']
|
|
|
- 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>';
|
|
|
- });
|
|
|
- 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>';
|
|
|
- }
|
|
|
- }
|
|
|
- table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
|
|
|
- tdBodys = '';
|
|
|
- }
|
|
|
- table += '</tbody></table>';
|
|
|
- return table;
|
|
|
- }
|
|
|
- },
|
|
|
- magicType: { //动态类型切换
|
|
|
- show: true,
|
|
|
- title: "切换", //各个类型的标题文本，可以分别配置。
|
|
|
- type: ['line', 'bar', 'stack', 'tiled'], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
|
|
|
- },
|
|
|
- restore: { //配置项还原。
|
|
|
- show: true, //是否显示该工具。
|
|
|
- title: "还原",
|
|
|
- },
|
|
|
- saveAsImage: { //保存为图片。
|
|
|
- show: true, //是否显示该工具。
|
|
|
- type: "png", //保存的图片格式。支持 'png' 和 'jpeg'。
|
|
|
- name: "pic1", //保存的文件名称，默认使用 title.text 作为名称
|
|
|
- backgroundColor: "#ffffff", //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色
|
|
|
- title: "保存为图片",
|
|
|
- pixelRatio: 1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- show: true,
|
|
|
- data: xAxis,
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: '#000',
|
|
|
- fontSize: '10',
|
|
|
- itemSize: '',
|
|
|
- rotate: -30
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- scale: true,
|
|
|
- // inverse: true,
|
|
|
- show: true,
|
|
|
- name: '单位：' + unit,
|
|
|
- nameTextStyle: {
|
|
|
- color: '#000',
|
|
|
- nameLocation: 'start'
|
|
|
- },
|
|
|
- data: xAxis
|
|
|
- },
|
|
|
- series: seriesdata
|
|
|
- }
|
|
|
- if (this.ruzhulv === 'yes') {
|
|
|
- option.yAxis.name = ''
|
|
|
- }
|
|
|
- if (type === 'bar' || type === 'line') {
|
|
|
- option.series[0].label = {
|
|
|
- show: true,
|
|
|
- color: '#000',
|
|
|
- position: 'top',
|
|
|
- distance: 15,
|
|
|
- align: 'center',
|
|
|
- verticalAlign: 'middle',
|
|
|
- rotate: 0,
|
|
|
- formatter: '{c}',
|
|
|
- fontSize: 12,
|
|
|
- rich: {
|
|
|
- name: {}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- if (type === 'pie') {
|
|
|
- option.series[0].avoidLabelOverlap = true
|
|
|
- option.series[0].label = {
|
|
|
- show: true,
|
|
|
- alignTo: 'edge',
|
|
|
- minMargin: 5,
|
|
|
- edgeDistance: 0,
|
|
|
- lineHeight: 15,
|
|
|
- formatter: function (params) {
|
|
|
- return `${params.name}:${params.value}(${params.percent}%)`
|
|
|
- },
|
|
|
- fontSize: 16
|
|
|
- }
|
|
|
- ; (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']
|
|
|
- return colorList[params.dataIndex]
|
|
|
- }
|
|
|
- })
|
|
|
- // option.title = {
|
|
|
- // title: true,
|
|
|
- // text: this.all,
|
|
|
- // subtext: this.allNum + this.danwei,
|
|
|
- // top: 170,
|
|
|
- // left: 700,
|
|
|
- // textAlign: 'center',
|
|
|
- // textStyle: {
|
|
|
- // fontSize: '30',
|
|
|
- // fontWeight: 'bold',
|
|
|
- // color: '#86AFDE'
|
|
|
- // },
|
|
|
- // subtextStyle: {
|
|
|
- // fontSize: '30',
|
|
|
- // color: '#FFBA44'
|
|
|
- // }
|
|
|
- option.graphic = {
|
|
|
- type: 'group',
|
|
|
- left: 'center',
|
|
|
- top: 'center',
|
|
|
- children: [
|
|
|
- {
|
|
|
- //图形中间⽂字
|
|
|
- type: 'text',
|
|
|
- left: 'center',
|
|
|
- top: 'center',
|
|
|
- style: {
|
|
|
- text: this.all + '\n',
|
|
|
- textAlign: 'center',
|
|
|
- fill: '#492dcb',
|
|
|
- fontSize: 30,
|
|
|
- fontWeight: 'bold'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- //图形中间⽂字
|
|
|
- type: 'text',
|
|
|
- left: 'center',
|
|
|
- top: 'center',
|
|
|
- style: {
|
|
|
- text: '\n\n' + this.allNum + this.danwei,
|
|
|
- textAlign: 'center',
|
|
|
- fill: '#fad360',
|
|
|
- fontSize: 30,
|
|
|
- fontWeight: 'bold'
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- option.xAxis = {
|
|
|
- type: 'category',
|
|
|
- show: false,
|
|
|
- data: xAxis,
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: '#000',
|
|
|
- fontSize: '10',
|
|
|
- itemSize: '',
|
|
|
- rotate: -30
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- option.yAxis = {
|
|
|
- type: 'value',
|
|
|
- scale: true,
|
|
|
- // inverse: true,
|
|
|
- show: false,
|
|
|
- name: '单位：' + unit,
|
|
|
- nameTextStyle: {
|
|
|
- color: '#000',
|
|
|
- nameLocation: 'start'
|
|
|
- },
|
|
|
- data: xAxis
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (this.hengzhu === 'yes') {
|
|
|
- option.xAxis = {
|
|
|
- type: 'value',
|
|
|
- show: false,
|
|
|
- // data: xAxis,
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: '#000',
|
|
|
- fontSize: 40,
|
|
|
- itemSize: '',
|
|
|
- rotate: -30
|
|
|
- },
|
|
|
- formatter: function (value, index) { }
|
|
|
- }
|
|
|
- }
|
|
|
- option.yAxis = {
|
|
|
- type: 'category',
|
|
|
- scale: true,
|
|
|
- // inverse: true,
|
|
|
- show: true,
|
|
|
- nameTextStyle: {
|
|
|
- color: '#000',
|
|
|
- nameLocation: 'start'
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false //隐藏x轴线
|
|
|
- },
|
|
|
- axisTic: {
|
|
|
- show: false //隐藏x轴刻度
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: '#000',
|
|
|
- fontSize: 20,
|
|
|
- itemSize: '',
|
|
|
- rotate: -30
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.hengzhuYData
|
|
|
- }
|
|
|
- option.title = {
|
|
|
- title: true,
|
|
|
- text: `${this.all}：${this.allNum}(${this.danwei})`,
|
|
|
- textStyle: {
|
|
|
- fontSize: '20',
|
|
|
- fontWeight: 'bold',
|
|
|
- color: '#86AFDE'
|
|
|
- },
|
|
|
- top: 35
|
|
|
- }
|
|
|
- option.series[0].label = {
|
|
|
- show: true,
|
|
|
- position: 'right',
|
|
|
- formatter: {},
|
|
|
- fontSize: 16
|
|
|
- }
|
|
|
- }
|
|
|
- if (this.xfsspbqk === 'yes') {
|
|
|
- option.xAxis = {
|
|
|
- type: 'category',
|
|
|
- show: true,
|
|
|
- data: this.xfssbXZHOU,
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: '#000',
|
|
|
- fontSize: '10',
|
|
|
- itemSize: '',
|
|
|
- rotate: -30
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- option.series[0] = {
|
|
|
- type,
|
|
|
- data: this.xfssbYZHOU,
|
|
|
- barWidth: '40%',
|
|
|
- showBackground: true,
|
|
|
- backgroundStyle: {
|
|
|
- color: 'rgba(180, 180, 180, 0.2)'
|
|
|
- },
|
|
|
- radius: ['50%', '75%'],
|
|
|
- hoverAnimation: true,
|
|
|
- avoidLabelOverlap: false,
|
|
|
- itemStyle: {
|
|
|
- normal: { color: '#288DEF' }
|
|
|
- },
|
|
|
- colorBy: 'series',
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- color: '#000',
|
|
|
- position: 'top',
|
|
|
- distance: 15,
|
|
|
- align: 'center',
|
|
|
- verticalAlign: 'middle',
|
|
|
- rotate: 0,
|
|
|
- formatter: '{c}',
|
|
|
- fontSize: 12,
|
|
|
- rich: {
|
|
|
- name: {}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- myChart.setOption(option)
|
|
|
- },
|
|
|
- resetRadio(val) {
|
|
|
- if (val) {
|
|
|
- this.radio = 'total'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created() { },
|
|
|
- mounted() {
|
|
|
- this.$bus.$on('reset-radio', this.resetRadio)
|
|
|
- // this.setTable(this.xStr, this.yName)
|
|
|
- // this.echartsInit(this.echartsId, this.type, this.danwei, this.x, this.y, this.isX, this.isY)
|
|
|
- },
|
|
|
- watch: {
|
|
|
- unit(newVal) {
|
|
|
- this.newUnit = newVal
|
|
|
- },
|
|
|
- labelKeys(newVal) {
|
|
|
- this.newKeys = newVal
|
|
|
- this.deepNewKeys = this.deepCopy(this.newKeys)
|
|
|
- this.deepNewKeys.splice(0, 2)
|
|
|
- let array = this.deepNewKeys.map((item) => {
|
|
|
- return item.label
|
|
|
- })
|
|
|
- this.xfssbXZHOU = array
|
|
|
- },
|
|
|
- tableList(newVal) {
|
|
|
- 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;
|
|
|
- }
|
|
|
- this.setTable(this.xStr, this.yName)
|
|
|
- this.echartsInit(this.echartsId, this.type, this.danwei, this.x, this.y, this.isX, this.isY)
|
|
|
- },
|
|
|
- // 监听子组件中radio的变化
|
|
|
- radio(newVal) {
|
|
|
- this.radio = newVal
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.echarts {
|
|
|
- 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 {
|
|
|
- border: 1px solid #dfe4ed;
|
|
|
-}
|
|
|
-</style>
|
nanMing