demand.vue

<template>
    <div class="demand ">
        <triangle>
            <slot>
                <div class="common-title">
                    <img class="icon-title" src="/images/screen/boardsDemand.png" alt="">
                    <span class="title">{{title}}</span>
                    <img class="bg" src="/images/screen/title02_bg.png" alt="">
                </div>
                <div id="barDemand" @click="echartsClick"></div>
            </slot>
        </triangle>
    </div>
</template>

<script>
  import triangle from '../components/slot/triangle'
  export default {
    name: 'demand',
    data() {
      return {
        title:'互动频次'
      }
    },
    components:{triangle},
    mounted() {
      setTimeout(()=>{
        this.init()
      },100)
    },
    methods: {
      init(){
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            top:20,
            left: '0%',
            right: '2%',
            bottom: '15%',
            containLabel: true
          },
          // dataZoom: [{
          //   type: "slider",
          //   show: true,
          //   bottom: '20',
          //   start: 0,
          //   end: 100,
          //   height: 18,
          //   handleStyle: {
          //     color: "#d3dee5",
          //   },
          //   textStyle: {
          //     color: "#fff",
          //     fontSize: "10px"
          //   },
          // }
          // ],
          xAxis: {
            type: 'category',
            boundaryGap: true,//坐标轴两边留白
            data: [
              '北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府',
             ],
            axisLabel: { //坐标轴刻度标签的相关设置。
              interval:0,
              textStyle: {
                color: '#FFFFFF',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 14,
              },
              formatter: function (value, index) {
                if(value.length > 4){
                  return value.slice(0,4)+ '...'
                }else {
                  return value
                }
              }
            },
            axisTick:{//坐标轴刻度相关设置。
              show: false,
            },
            axisLine:{//坐标轴轴线相关设置
              lineStyle:{
                color:'rgba(98,186,255,0.6)',
                type:'solid'
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: false,
            }
          },
          yAxis: [
            {
              type: 'value',
              name:'单位/次',
              splitNumber: 5,
              max:100,
              axisLabel: {
                textStyle: {
                  color: '#FFFFFFFF',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
                interval:'auto'
              },
              axisLine:{
                show: false
              },
              axisTick:{
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(98,186,255,0.6)',
                  type:'dashed'
                }
              }

            }
          ],
          series: [
            {
              type: 'bar',
              barWidth: 16, // 柱子宽度
              itemStyle:{
                barBorderRadius: 120, // 圆角（左上、右上、右下、左下）
              },

              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                'rgba(78,255,253,1)', 'rgba(255,74,83,1)'
              ].map((color, offset) => ({
                color,
                offset
              }))), // 渐变
              data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse()
            }
          ]
        };
        let echartsDiv = this.$echarts.init(document.getElementById('barDemand'))
        echartsDiv.setOption(option)
      },
      // 点击事件
      echartsClick(){
        this.$emit('itemClick',{type:1,title:this.title})
      }
    }
  }
</script>

<style lang=scss>
   #barDemand{
       width: 100%;
       height: calc(100% - 0.6rem);
       margin-top: 0.6rem;
   }
</style>