【echarts】12、echarts+vue2 - 柱状图

前言

基于echarts5.x和vue2实现
记录以便日后查阅
1
2

实现效果

在这里插入图片描述

代码实现

<template>
  <div class="chart-wrap">
    <ul class="legend-list">
      <li
        v-for="(item, index) in yData"
        :key="index"
        :class="['legend', item.selected ? '': 'un-active']"
        @mouseenter="enterHandler(item)"
        @mouseleave="leaveHandler(item)"
        @click="clickHandler(item)"
      >
        <i class="rect" :style="{ backgroundColor: item.color1 }" />
        <span>{{ item.name }}span>
      li>
    ul>
    <div id="chart09" class="chart" />
  div>
template>

<script>
import echarts from '@/utils/echarts'

export default {
  name: 'Index',
  data () {
    return {
      chart: null,
      yData: [
        { name: '居民', color1: 'rgba(0, 145, 255, 1)', color2: 'rgba(36, 220, 240, 0)', value: [280, 180, 30, 230, 240, 50], selected: true },
        { name: '临时车牌', color1: 'rgba(247, 181, 0, 1)', color2: 'rgba(247, 181, 0, 0)', value: [220, 180, 30, 230, 240, 50], selected: true }
      ],
      xData: ['7-2', '7-3', '7-4', '7-5', '7-6']
    }
  },
  mounted() {
    this.createChartHandler()
  },
  methods: {
    // 创建图表
    createChartHandler () {
      this.chart = this.$echarts.init(document.getElementById('chart09'))
      this.chart.setOption(this.getChartOption(this.yData, this.xData))
      window.addEventListener('resize', () => {
        setTimeout(() => {
          this.chart.resize()
        })
      })
    },
    // 获取图表配置项
    getChartOption (yData, xData) {
      return {
        tooltip: {
          axisPointer: {
            type: 'shadow'
          },
          position: 'top',
          extraCssText:
            'color:#fff;background: rgba(0, 38, 118, 0.5);border:none; box-shadow: 0px 0px 8px 1px rgba(0, 145, 255, 0.5);border-radius: 2px;z-index:99',
          formatter: function (e) {
            let str = ''
            const item = e.value
            if (e.seriesName === '临时车牌') {
              const d = `${yData[1].name}: ${item}`
              str += d
              str += '
'
              return str
            } else {
              const d = `${yData[0].name}: ${item}`
              str += d
              str += '

'
              return str
            }
          }
        },
        legend: {
          show: false,
          data: yData.map((i) => i.name)
        },
        grid: {
          top: '5%',
          left: '8%',
          right: '5%',
          bottom: '15%'
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisLabel: {
              interval: 0,
              fontFamily: 'PingFangReg',
              lineHeight: 17,
              fontSize: 12,
              color: '#fff'
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
              lineStyle: {
                color: '#0091FF'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0091FF'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            interval: 100,
            axisLabel: {
              fontFamily: 'PingFangReg',
              fontSize: 12,
              color: '#0091FF'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0091FF'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0091FF',
                type: 'dashed'
              }
            }
          }
        ],
        series: yData.map((i) => {
          return {
            name: i.name,
            type: 'bar',
            barWidth: 9,
            barGap: 0.2,
            data: i.value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                // 前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                // 通过修改前4个参数，可以实现不同的渐变方向
                /* 第五个参数则是一个数组，用于配置颜色的渐变过程。
                  每项为一个对象，包含offset和color两个参数
                */
                0, 0, 0, 1, [{ // 代表渐变色从正上方开始
                  offset: 0, // offset范围是0~1，用于表示位置，0是指0%处的颜色
                  color: i.color1
                }, // 柱图渐变色
                  {
                    offset: 1, // 指100%处的颜色
                    color: i.color2
                  }
                ]
              ),
              barBorderRadius: [10, 10, 0, 0]
            }
          }
        })
      }
    },
    // 鼠标移入图例触发
    enterHandler (item) {
      if (!this.chart) return
      this.chart.dispatchAction({
        type: 'highlight',
        name: item.name
      })
    },
    // 鼠标移出图例触发
    leaveHandler (item) {
      if (!this.chart) return
      this.chart.dispatchAction({
        type: 'downplay',
        name: item.name
      })
    },
    // 选中切换
    clickHandler (item) {
      if (!this.chart) return
      item.selected = !item.selected
      this.chart.dispatchAction({
        type: 'legendToggleSelect',
        name: item.name
      })
    }
  }
}
script>

相关阅读:
C++STL----list的模拟实现
【算法笔记】LCR 086. 分割回文串
[附源码]java毕业设计乒乓球俱乐部管理系统
C++中.h和.hpp文件有什么区别？
GCC使用入门
Spring Boot 自动注入失败的原因
搭建全连接网络进行分类（糖尿病为例）
1186. 删除一次得到子数组最大和；1711. 大餐计数；1834. 单线程 CPU
自动挂载磁盘
【计算机视觉 | 目标检测】目标检测常用数据集及其介绍（十四）

原文地址：https://blog.csdn.net/weixin_44402694/article/details/126001807