vue2 echarts饼图，双柱图

<template>
  <div>
    <div class="toQ">
      <el-row>
        <el-col :span="12">
          <div class="toW">
            <el-card>
              <div class="data-title">
                <div class="toE">周杰伦</div>
              </div>
              <div v-show="jjshow">
                <div class="topic-style">周董</div>
                <div class="charts-content">
                  <div class="toR" style="">暂无数据</div>
                </div>
                <div class="toT">
                  <div>明明就:{{ mingmingjiu }}</div>
                  <div>七里台:{{ qilitai }}</div>
                </div>
              </div>
              <div v-show="!jjshow">
                <div class="topic-style">周董</div>
                <div class="chart-content">
                  <div class="echarts" ref="chart2"></div>
                </div>

                <div class="toT">
                  <div>明明就:{{ mingmingjiu }}</div>
                  <div>七里台:{{ qilitai }}</div>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="toY">
            <el-card>
              <div class="data-title">
                <div class="toE">薛之谦</div>
              </div>
              <div v-show="xzqshow">
                <div class="topic-style">专辑</div>
                <div class="charts-content">
                  <div class="toR">暂无数据</div>
                </div>
                <div class="toU">
                  <!-- <div class="toI">认真的雪:{{ renzhendexue }}</div>
                  <div class="toI">演员:{{ yanyuan }}</div>
                  <div class="toI">丑八怪:{{ choubaguai }}</div> -->
                  <div class="toI">方圆几里:{{ fangyuanjili }}</div>
                </div>
              </div>
              <div v-show="!xzqshow">
                <div class="topic-style">专辑</div>
                <div class="chart-content">
                  <div class="echarts" ref="chart3"></div>
                </div>
                <div class="toU">
                  <div class="toI">认真的雪:{{ renzhendexue }}</div>
                  <div class="toI">演员:{{ yanyuan }}</div>
                  <!-- <div class="toI">丑八怪:{{ choubaguai }}</div>
                  <div class="toI">方圆几里:{{ fangyuanjili }}</div> -->
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 双柱状图 -->
    <div class="toO">
      <el-row>
        <el-col :span="24">
          <el-card>
            <div class="toP">
              <div class="toE">林俊杰</div>
            </div>
            <div v-show="ljjshow" class="toA">
              <div class="topic-style">jj</div>
              <div class="toS">暂无数据</div>
            </div>
            <div v-show="!ljjshow">
              <div class="topic-style">jj</div>
              <div class="chart-conten1t">
                <div style="width: 100%" class="echarts1" ref="chart4"></div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px">
      <el-row>
        <el-col :span="24">
          <el-card>
            <div class="toP">
              <div class="toE">毛不易</div>
            </div>
            <div v-show="zjshow" class="toA">
              <div class="topic-style">专辑</div>

              <div class="toS">暂无数据</div>
            </div>
            <div v-show="!zjshow">
              <div class="topic-style">专辑</div>
              <div class="chart-conten1t">
                <div style="width: 100%" class="echarts1" ref="chart5"></div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
let maobuyi = {
  keximeiruguo: {
    text: '可惜没如果',
    one: null,
    two: null,
  },
  daerwen: {
    text: '达尔文',
    one: null,
    two: null,
  },
  shashou: {
    text: '杀手',
    one: null,
    two: null,
  },
  beiduibeiyongbao: {
    text: '背对背拥抱',
    one: null,
    two: null,
  },
  xiaochou: {
    text: '消愁',
    one: null,
    two: null,
  },
  xiaojiuwo: {
    text: '小酒窝',
    one: null,
    two: null,
  },
  xiulianaiqing: {
    text: '修炼爱情',
    one: null,
    two: null,
  },
  doujiangyoutiao: {
    text: '豆浆油条',
    one: null,
    two: null,
  },
  caocao: {
    text: '曹操',
    one: null,
    two: null,
  },
}

export default {
  data() {
    return {
      alterbeginyear: null,
      alterendyear: null,
      zhangjieData: [],
      maobuyi: maobuyi,
      comparison: [],
      zjshow: false,
      zhoujielunCharts: [], //周杰伦
      xuezhiqianCharts: [], //薛之谦
      zhoudongCharts: [],
      jjshow: false, //周杰伦
      xzqshow: false, //薛之谦
      ljjshow: false, //林俊杰
      // 周董
      dates: {
        daoxiang: '稻香',
        qilitai: '七里台',
      },
      mingmingjiu: 0, //明明就
      qilitai: 0, //七里台
      datas: [],
      rectification: [],
      rectificationdatas: [],
      charts1: [],
      rectificationList: {
        guaika: '怪咖',
        gangganghao: '刚刚好',
      },
      rectificationCharts3: [],
      renzhendexue: 0, //认真的雪
      yanyuan: 0, //演员
      choubaguai: 0, //丑八怪
      fangyuanjili: 0, //方圆几里
      findList: [],
      xData: [],
      yetData: [],
      inData: [],
      rateData: [],

      patrolCharacters: {
        keximeiruguo: '可惜没如果',
        daerwen: '达尔文',
        shashou: '杀手',
        beiduibeiyongbao: '背对背拥抱',
        xiaochou: '消愁',
        xiaojiuwo: '小酒窝',
        investFinanceRiskNum: '合规风险',
        xiulianaiqing: '修炼爱情',
        doujiangyoutiao: '豆浆油条',
        caocao: '曹操',
      },
    }
  },
  components: {},

  watch: {},
  mounted() {
    let myChart2 = this.$echarts.init(this.$refs.chart2)
    this.zhoujielunCharts.push(myChart2)
    let myChart3 = this.$echarts.init(this.$refs.chart3)
    let myChart4 = this.$echarts.init(this.$refs.chart4)
    this.xuezhiqianCharts.push(myChart4) //薛之谦
    this.rectificationCharts3.push(myChart3)
    let myChart5 = this.$echarts.init(this.$refs.chart5)
    this.comparison.push(myChart5)

    window.addEventListener('resize', this.resize)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.resize)
    })
    this.fakeDataFn()
  },
  methods: {
    clearHander() {
      let myChart = this.$echarts.init(this.$refs.chart5)
      myChart.clear()
    },

    findDateTFn(val) {
      this.fakeDataFn(val)
      this.contrastS = val.startShowYear
      this.contrastE = val.endShowYear
    },
    fakeDataFn(val) {
      // 周董
      const zhoudonglist = {
        data: {
          inspectedResponse: {
            daoxiang: 400,
            qilitai: 90,
          },
          mingmingjiu: 68,
          qilitai: 68,
        },
      }
      this.zhoudongCharts = zhoudonglist
      if (zhoudonglist.data !== null) {
        this.datas = this.zhoudongCharts.data.inspectedResponse
        this.mingmingjiu = zhoudonglist.data.mingmingjiu
        this.qilitai = zhoudonglist.data.qilitai
        this.jjshow = false
        this.coverFn()
      } else {
        this.jjshow = true
      }
      // 薛之谦
      const xuezhiqianlist1 = {
        data: {
          problemCountResponse: {
            gangganghao: 10,
            guaika: 10,
          },
          choubaguai: 3,
          yanyuan: 2,
          renzhendexue: 1,
          fangyuanjili: 4,
        },
      }

      if (xuezhiqianlist1.data.problemCountResponse !== null) {
        this.rectification = xuezhiqianlist1
        this.rectificationdatas = this.rectification.data.problemCountResponse
        this.renzhendexue = this.rectification.data.renzhendexue
        this.yanyuan = this.rectification.data.yanyuan
        this.fangyuanjili = this.rectification.data.fangyuanjili
        this.choubaguai = this.rectification.data.choubaguai
        this.rectificationFn()
        this.xzqshow = false
      } else {
        this.xzqshow = true
      }
      // 林俊杰
      const list2 = {
        data: {
          two: {
            beiduibeiyongbao: 0,
            xiaojiuwo: 1,
            caocao: 0,
            xiulianaiqing: 0,
            keximeiruguo: 1,
            doujiangyoutiao: 0,
            xiaochou: 0,
            daerwen: 0,
            shashou: 0,
          },
          three: {
            beiduibeiyongbao: 0,
            xiaojiuwo: 1,
            caocao: 0,
            xiulianaiqing: 0,
            keximeiruguo: 1,
            doujiangyoutiao: 0,
            xiaochou: 0,
            daerwen: 0,
            shashou: 0,
          },
          one: {
            beiduibeiyongbao: 0,
            xiaojiuwo: 1,
            caocao: 0,
            xiulianaiqing: 0,
            keximeiruguo: 1,
            doujiangyoutiao: 0,
            xiaochou: 0,
            daerwen: 0,
            shashou: 0,
          },
        },
      }
      if (list2.data !== null) {
        this.findList = list2.data
        this.xData = this.findList
        this.yetData = this.xData.three
        this.inData = this.xData.one
        this.rateData = this.xData.two
        this.findFn()
        this.ljjshow = false
      } else {
        this.ljjshow = true
      }
      this.$nextTick(() => {
        // 张杰
        const list3 = {
          data: [
            {
              two: {
                beiduibeiyongbao: 0,
                xiaojiuwo: 0,
                caocao: 90,
                xiulianaiqing: 0,
                keximeiruguo: 90,
                doujiangyoutiao: 0,
                xiaochou: 0,
                daerwen: 0,
                shashou: 0,
              },
              one: {
                beiduibeiyongbao: 50,
                xiaojiuwo: 0,
                caocao: 80,
                xiulianaiqing: 0,
                keximeiruguo: 0,
                doujiangyoutiao: 90,
                xiaochou: 0,
                daerwen: 0,
                shashou: 0,
              },
              year: '2019',
            },
            {
              two: {
                beiduibeiyongbao: 0,
                xiaojiuwo: 0,
                caocao: 90,
                xiulianaiqing: 0,
                keximeiruguo: 90,
                doujiangyoutiao: 0,
                xiaochou: 0,
                daerwen: 0,
                shashou: 0,
              },
              one: {
                beiduibeiyongbao: 50,
                xiaojiuwo: 0,
                caocao: 80,
                xiulianaiqing: 0,
                keximeiruguo: 0,
                doujiangyoutiao: 90,
                xiaochou: 0,
                daerwen: 0,
                shashou: 0,
              },
              year: '2018',
            },
            {
              two: {
                beiduibeiyongbao: 0,
                xiaojiuwo: 0,
                caocao: 90,
                xiulianaiqing: 0,
                keximeiruguo: 90,
                doujiangyoutiao: 0,
                xiaochou: 0,
                daerwen: 0,
                shashou: 0,
              },
              one: {
                beiduibeiyongbao: 50,
                xiaojiuwo: 0,
                caocao: 80,
                xiulianaiqing: 0,
                keximeiruguo: 0,
                doujiangyoutiao: 90,
                xiaochou: 0,
                daerwen: 0,
                shashou: 0,
              },
              year: '2020',
            },
            {
              two: {
                beiduibeiyongbao: 0,
                xiaojiuwo: 0,
                caocao: 90,
                xiulianaiqing: 0,
                keximeiruguo: 90,
                doujiangyoutiao: 0,
                xiaochou: 0,
                daerwen: 0,
                shashou: 0,
              },
              one: {
                beiduibeiyongbao: 50,
                xiaojiuwo: 0,
                caocao: 80,
                xiulianaiqing: 0,
                keximeiruguo: 0,
                doujiangyoutiao: 90,
                xiaochou: 0,
                daerwen: 0,
                shashou: 0,
              },
              year: '2014',
            },
            {
              two: {
                beiduibeiyongbao: 0,
                xiaojiuwo: 0,
                caocao: 90,
                xiulianaiqing: 0,
                keximeiruguo: 90,
                doujiangyoutiao: 0,
                xiaochou: 0,
                daerwen: 0,
                shashou: 0,
              },
              one: {
                beiduibeiyongbao: 50,
                xiaojiuwo: 0,
                caocao: 80,
                xiulianaiqing: 0,
                keximeiruguo: 0,
                doujiangyoutiao: 90,
                xiaochou: 0,
                daerwen: 0,
                shashou: 0,
              },
              year: '2013',
            },
          ],
        }
        this.clearHander()
        if (list3.data !== null) {
          this.zhangjieData = list3.data
          this.zjshow = false
          this.comparisonFn()
        } else {
          this.zjshow = true
        }
      })
    },
    // 周结论
    coverFn() {
      let myChart = this.zhoujielunCharts[0]
      const querys = this.datas
      let seriesData = []
      for (let key in querys) {
        seriesData.push({ value: querys[key], name: this.dates[key] })
      }
      console.log(seriesData, 'seriesData')

      myChart?.setOption({
        title: {
          trigger: 'item',
          top: '36%',
          left: '48%',
          textAlign: 'center',
          textStyle: {
            color: '#c23531',
            fontSize: 40,
            fontWeight: 500,
          },
        },
        backgroundColor: '#5A5476',

        color: ['rgb(255, 158, 68)', 'rgb(255, 70, 131)'],
        // 图例
        legend: {
          top: 'bottom',
        },
        tooltip: {
          trigger: 'item', //触发方式
          formatter: '{b}: {c} ({d}%)',
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
    },
    // 薛之谦
    rectificationFn() {
      let myChart = this.rectificationCharts3[0]
      const querys = this.rectificationdatas
      let seriesData = []
      for (let key in querys) {
        seriesData.push({ value: querys[key], name: this.rectificationList[key] })
      }
      myChart?.setOption({
        title: {
          trigger: 'item',
          top: '36%',
          left: '48%',
          textAlign: 'center',
          textStyle: {
            color: '#156292',
            fontSize: 40,
            fontWeight: 500,
          },
        },
        color: ['#e9f2b4', '#008ade'],
        // 图例
        legend: {
          top: 'bottom',
        },
        tooltip: {
          trigger: 'item', //触发方式
          formatter: '{b}: {c} ({d}%)',
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: seriesData,
          },
        ],
      })
      myChart.on('click', params => {
        this.$router.push({
          path: '',
        })
        this.$store.commit('user/rectifyAndReform', params.name)
        this.$store.dispatch('user/StartingOfTheYear', this.alterbeginyear)
        this.$store.dispatch('user/endOfTheYear', this.alterendyear)
      })
    },

    findFn() {
      let myChart = this.xuezhiqianCharts[0]
      // 第一步
      const problemList = this.yetData
      let seriesData = []
      for (let key in problemList) {
        seriesData.push({ value: problemList[key], name: this.patrolCharacters[key] })
      }
      // 名字
      let name = []
      seriesData.forEach(item => {
        name.push(item.name)
      })
      //  第二步
      let rectifiedList = this.inData
      let seriesData1 = []
      for (let key in rectifiedList) {
        seriesData1.push({ value: rectifiedList[key], name: this.patrolCharacters[key] })
      }
      // 第三步
      let notRectifiedList = this.rateData
      let seriesData2 = []
      for (let key in notRectifiedList) {
        seriesData2.push({ value: notRectifiedList[key], name: this.patrolCharacters[key] })
      }
      const op = {
        backgroundColor: '#ffffc6',
        grid: {
          left: '10%',
          top: '20px',
          bottom: '10%',
        },
        options3d: {
          enabled: true, // 否使用 3D 功能呈现图表
          alpha: 60, // 内旋转角度
          beta: 0, // 外旋转角度
        },
        // 图例
        legend: {
          icon: 'rect', //形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 30, // 设置宽度
          itemHeight: 15, // 设置高度
          itemGap: 24, // 设置间距
          textStyle: {
            //文字样式
            // color: '#c1dafc',
            fontSize: '12',
          },
          bottom: '0%',
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                // color: 'rgba(29, 163, 255, 1)',
              },
            },
            splitLine: {
              show: false,
            },
            nameGap: 15, //坐标轴名称与轴线间距离
            axisTick: {
              show: false, // 是否显示坐标轴轴线
              inside: true, // 坐标轴刻度是否朝内，默认朝外
              length: 10, //坐标轴刻度的长度
              lineStyle: {
                // color: '#FFF', //刻度线的颜色
                width: 30, //坐标轴刻度线宽
                type: 'solid', //坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
              },
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              fontSize: 14,
              fontFamily: 'TencentSans',
              formatter: function (value) {
                if (value !== undefined) {
                  if (value.length > 5) {
                    // 超出5个字符显示省略号
                    return `${value.slice(0, 5)}...`
                  }
                  return value
                }
              },
            },

            data: name,
          },
        ],

        yAxis: {
          type: 'value',
          minInterval: 1,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#ffdfc1',
              fontFamily: 'TencentSans',
            },
          },
        },
        axisLabel: {
          textStyle: {
            fontSize: '10',
          },
        },

        padding: [5, 20, 5, 20], // 上右下左
        series: [
          {
            name: '毛不易',
            type: 'bar',
            barGap: 0,
            barWidth: 20,
            barCategoryGap: '50%' /*多个并排柱子设置柱子之间的间距*/,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#ff9bf8', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#ff9bf8', // 0% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: seriesData,
          },
          {
            name: '张碧晨',
            type: 'bar',
            barMaxWidth: 300,
            barWidth: 20,
            barGap: 0,
            barCategoryGap: '50%' /*多个并排柱子设置柱子之间的间距*/,
            stack: '总量',
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#9fe085', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#9fe085', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                barBorderRadius: 0,
              },
            },
            data: seriesData1,
          },
          {
            name: '张靓颖',
            barMaxWidth: 300,
            barGap: 0,

            barWidth: 20,
            type: 'bar',
            barCategoryGap: '50%' /*多个并排柱子设置柱子之间的间距*/,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#e9a619', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#e9a619', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: seriesData2,
          },
        ],
      }
      myChart.setOption(op)
      myChart.off('click')
      myChart.on('click', params => {
        this.$router.push({
          path: '',
        })
        this.$store.commit('user/company', params.name)
        this.$store.commit('user/rectifyAndReform', params.seriesName)
        this.$store.dispatch('user/StartingOfTheYear', this.alterbeginyear)
        this.$store.dispatch('user/endOfTheYear', this.alterendyear)
        this.$store.dispatch('user/professionalWork', this.businessValue)
      })
    },

    comparisonFn() {
      let myChart = this.comparison[0]
      let xAxisList = [] //x轴的数组
      xAxisList = Object.values(maobuyi).map(v => v.text)
      const comparison = {
        // backgroundColor: '#008ade',
        grid: {
          containLabel: true,
        },
        options3d: {
          enabled: true, // 否使用 3D 功能呈现图表
          alpha: 60, // 内旋转角度
          beta: 0, // 外旋转角度
        },
        // 图例
        legend: {
          // show: false,
          bottom: '0%',
        },
        textStyle: {
          rich: {
            a: {
              color: '#f9ca56',
              verticalAlign: 'top',
              align: 'center',
              fontSize: 12,
              padding: [0, 0, 28, 0],
            },
            b: {
              align: 'left',
              fontSize: 18,
              padding: [0, 10, 10, 0],
              lineHeight: 25,
              color: '#181818',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval: 0,
              fontSize: 14,
              fontFamily: 'TencentSans',
              formatter: function (value) {
                if (value !== undefined) {
                  if (value.length > 5) {
                    // 超出5个字符显示省略号
                    return `${value.slice(0, 5)}...`
                  }
                  return value
                }
              },
            },
            axisTick: { show: false },
            data: xAxisList,
          },
        ],

        yAxis: {
          type: 'value',
          minInterval: 1,
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow',
          },
        },

        series: [],
      }
      this.zhangjieData.forEach(item => {
        comparison.series.push({
          name: '假如我很有钱',
          type: 'bar',
          stack: item.year,
          itemStyle: {
            normal: {
              color: {
                type: 'linear',

                colorStops: [
                  {
                    offset: 0,
                    color: '#6b4c47',
                  },
                  {
                    offset: 1,
                    color: '#6b4c47',
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          label: {
            normal: {
              show: true, //显示数值
              position: 'top', //  位置设为top
              formatter: function (params) {
                if (params.value === 0) {
                  return ''
                }
                return item.year
              },
            },
          },
          data: [
            item.one.keximeiruguo, //可惜没如果
            item.one.daerwen, //达尔文
            item.one.shashou, //杀手

            item.one.beiduibeiyongbao, //背对背拥抱
            item.one.xiaochou, //消愁

            item.one.xiaojiuwo, //小酒窝
            item.one.xiulianaiqing, //修炼爱情
            item.one.doujiangyoutiao, //豆浆油条
            item.one.caocao, //曹操
          ],
        }),
          comparison.series.push({
            name: '消愁',
            type: 'bar',
            stack: item.year,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',

                  colorStops: [
                    {
                      offset: 0,
                      color: '#efa49e',
                    },
                    {
                      offset: 1,
                      color: '#efa49e',
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            label: {
              normal: {
                show: true, //显示数值
                position: 'top', //  位置设为top
                formatter: function (params) {
                  if (params.value === 0) {
                    return ''
                  }
                  return item.year
                },
              },
            },
            data: [
              item.two.keximeiruguo, //可惜没如果
              item.two.daerwen, //达尔文
              item.two.shashou, //杀手
              item.two.beiduibeiyongbao, //背对背拥抱
              item.two.xiaochou, //消愁
              item.two.xiaojiuwo, //小酒窝
              item.two.xiulianaiqing, //修炼爱情
              item.two.doujiangyoutiao, //豆浆油条
              item.two.caocao, //曹操
            ],
          })
      })
      comparison && myChart.setOption(comparison)
      myChart.off('click')
      myChart.on('click', comparison, params => {
        const seriesIndex = params.seriesIndex //去除index
        const series = comparison.series
        const shift = []
        series.map((item, index) => {
          if (index === seriesIndex) {
            shift.push(item)
            return item
          }
        })
        const only = shift.map(item => {
          return item.stack
        })
        const sole = only[0]
        this.$store.dispatch('user/StartingOfTheYear', this.alterbeginyear)
        this.$store.dispatch('user/endOfTheYear', this.alterendyear)
        this.$store.dispatch('user/organization', params.name) //@@@
        this.$store.commit('user/tellApart', params.seriesName)
        this.$store.commit('user/preciseYear', sole)
        this.$store.commit('user/department', this.valueCode)
        this.$router.push({
          path: '',
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.cover-style {
  border: 1px solid;
  height: 36px;
  padding-left: 16px;
  line-height: 37px;
  font-size: 14px;
  color: #596378;
  border-bottom: 1px solid #f0f1f3;
}
.title-style {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 16px;
  color: black;
  font-weight: 500;
}
.earch-style {
  margin-top: 10px;
  height: 400px;
}
.topic-style {
  text-align: center;
  font-size: 18px;
  padding-top: 10px;
}

.y-style {
  margin-right: 15px;
  margin-top: 7px;
}

.small {
  width: 100%;
  height: 100px;
  background: pink;
}
.data-title {
  height: 36px;
  font-size: 14px;
  color: #596378;
  border-bottom: 1px solid #f0f1f3;
}
.chart-content {
  height: 280px;
  // margin-top: -50px;
}
.echarts {
  width: 100%;
  height: 100%;
}
.echarts1 {
  width: 100%;
  height: 100%;
}
.chart-conten1t {
  height: 500px;
  width: 100%;
  // background: #596378;
}
.charts-content {
  height: 280px;
}
.setstyle {
  min-height: 200px;
  padding: 0 !important;
  margin: 0;
  overflow: auto;
  cursor: default !important;
}
.toQ {
  margin-top: 20px;
  .toW {
    margin-right: 10px;

    .toT {
      margin-top: 10px;
      height: 30px;
      display: flex;
      justify-content: space-around;
    }
  }
  .toY {
    margin-left: 10px;
  }
  .toE {
    line-height: 26px;
  }
  .toR {
    text-align: center;
    padding-top: 20%;
  }
  .toU {
    margin-top: 10px;
    display: flex;
    height: 30px;
    flex-wrap: wrap;
    line-height: 20px;
  }
  .toI {
    width: 50%;
  }
  .toO {
    margin-top: 20px;
  }
  .toP {
    display: flex;
    justify-content: space-between;
    height: 36px;
    font-size: 14px;
    color: #596378;
    border-bottom: 1px solid #f0f1f3;
  }
  .toA {
    height: 280px;
    text-align: center;
  }
  .toS {
    padding-top: 10%;
  }
}
</style>