echarts

// An highlighted block
<template>
    <div :class="className" :style="{ height: height, width: width }" />
  </template>
  
  <script>
  let colorList = [
  "#1890ff",
  "#52c41a",
  "#faad14",
  "#f5222d",
  "#1DA57A",
  "#d9d9d9",
];
  export default {
  
    props: {
      className: {
        type: String,
        default: 'chart02'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '200px'
      },
      chartData: {
        type: Object
      }
    },
    data() {
      return {
        chart: null,
        timechartes: null,
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        let that = this
        that.chart = this.$echarts.init(this.$el, 'macarons')
        let option = {
          title:{
            text: '标题文字',
            textStyle:{
                  color:"#fff",
                  fontSize:14
              }
            },
          tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
  
            backgroundColor: 'rgba(32, 33, 36,0.7)',
            textStyle: {
              color: '#fff',
            },
          },
          // dataZoom: [
          //   {
          //     show: true,
          //     height: 6,
          //     type: 'slider', 
          //     xAxisIndex: 0,
          //     left: 30, 
          //     right: 30,
          //     bottom: 10,
          //     showDetail: false,
          //     fillerColor: '#2060a0'
          //   },
          //   {
          //     type: 'inside',
          //     show: true,
          //     height: 6,
          //     start: 1,
          //     end: 5
          //   }
          // ],
          grid: {
            top: '40',
            left: '3%',
            right: '10%',
            bottom: '0',
            containLabel: true
          },
          xAxis: {
            type: "value",
            axisLabel: {
              show:false
            },
            splitLine: {
              "show": false
            }
          },
          yAxis: {
            type: "category",
            data: that.chartData.xData,
            // 轴刻度
            axisTick: {
              show: false
            },
            //轴线
            axisLine:{
              show:false
            },
            //轴文字
            axisLabel: {
                color: '#c0d1f2'
            },
            //网格线
            splitLine: {
                show: false,
                lineStyle: {
                  color: 'rgba(22, 207, 208, 0.2)',
                  width: 0.5,
                  type: 'dashed'
                }
              },
            //背景  
            splitArea: {
                show: false,
            }
        },
          series: [
            {
              data: that.chartData.yData01,
              type: 'bar',
              name: '一xx',
              itemStyle: {
                barBorderRadius: [0, 4, 4, 0],
                color: (params) => {
                  return colorList[params.dataIndex];
                },
              },
              barWidth: 8,
              label: {
                  show: true,
                  fontSize: 12,
                  textStyle: {
                    color: '#fff',
                  },
                  position: 'right',
                  // formatter: (param) => {
                  //   let result = ''
                  //   result = `${param.data}%`
                  //   return result
                  // }
                }
            }
          ]
        }
        that.chart.setOption(option)
      }
    }
  }
  </script>