|
|
@@ -0,0 +1,698 @@
|
|
|
+<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=[];
|
|
|
+ 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