100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

vue3 vite 使用echarts绘制柱状图

echarts yekong

上一节，我们实现了数据可视化大屏入场动画教程，这一节我们来完成第一个区域的功能，使用echarts绘制柱状图.

根据数据大屏设计图来看，我们一共有10个区域，所以我们创建10个item,来对应这10个区域.
为什么用编号不用名称呢？一开始的项目中，用过拼音用过英文，但是实际开发的时候很容易混乱找不到对应的组件，而使用编号的话很容易找到对应的组件，所以大屏开发时，使用编号来命名组件更方便。

编号命名组件

数据大屏设计图

vue3 vite 使用echarts柱状图

安装依赖

我们使用的echarts是4.9.0所以安装的时候也安装4.9.0的版本。

pnpm i echarts@4.9.0

创建div

子组件宽高都设为100%，让其随着父div的宽高变化而变化。

<div class="echarts1" ref="echarts">

</div>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

引入组件

echarts4.9.0直接使用import echarts from "echarts"就可以，但考虑到后期可能会升级到5.x，5.x使用import echarts from "echarts"会报错，所以我们直接使用下面的方式引用。

import * as echarts from "echarts";

初始化echarts

这里我们不用id初始化，避免出现id冲突，使用vue的refs来初始化，还可以复用。

let myChart = echarts.init(this.$refs.echarts)

创建x轴数据

let xData = ["专科生", "留学生", "函授生", "折合在校生", "全日制在校生"];

创建y轴数据

let yData = [6800, 3126, 4821, 10000, 7400];

设置echarts上下左右距离

我们通过grid来设置echarts距离上下左右的距离

grid: {
  containLabel: true,
  left: 0,
  right: 0,
  bottom: 0,
  top: 40,
},

横坐标设置

横坐标参数设置

xAxis: {
  axisLabel: { //底部label样式
    color: 'rgba(215, 231, 255, 1)',
    fontSize: 13,
    interval: 0,
  },
  axisTick: { //刻度线
    show: false,
  },
  splitLine: { //不显示分割线
    show: false
  },
  axisLine: {
    lineStyle: {
      color: '#335971',
    },
    show: true,
  },
  data: xData,
},

纵坐标设置

yAxis: {
  name: '人', //左上角单位设置
  nameTextStyle: {
    color: 'rgba(11, 255, 168, 1)',
    padding: [0, 25, 0, 0],
    fontSize: 12,
  },
  axisLabel: { //纵坐标颜色
    color: 'rgba(181, 217, 255, 1)',
    fontSize: 14,
    interval: 0,
    fontFamily: 'DIN'

  },
  axisTick: { //不显示刻度
    show: false,
  },
  splitLine: { //分割线样式
    show: true,
    lineStyle: {
      color: '#335971',
      "type": "dashed"
    },
  },
  axisLine: { //不显示左侧坐标轴线
    show: false,
  }
},

柱状图配置

series: [
  {
    data: yData,
    type: 'bar', //类型 柱状图为bar
    barWidth: 27, //柱状图宽度
    itemStyle: { //柱状图颜色,通过linear实现渐变色
      color: {
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        type: 'linear',
        colorStops: [
          {
            offset: 0,
            color: 'rgba(18, 99, 255, 1)',
          },
          {
            offset: 1,
            color: 'rgba(4, 206, 247, 1)',
          },
        ],
      },
    },
    label: { //柱状图文字配置
      show: true,
      position: 'top',
      distance: 10,
      fontSize: 14,
      color: 'rgba(0, 234, 254, 1)',
      fontFamily: 'DIN-bold'
    },
  },
],

鼠标移入到柱状图的提示

tooltip: {
  show: true,
  formatter: '{b}:{c0}',
},

最终效果

这样我们的第一个组件便实现了。

vue3 vite 使用echarts绘制柱状图

完整的代码

<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'echarts1',
  components: {},
  data() {
    return {
      list: []
    }
  },
  watch: {
    list() {
      this.drawLine()
    },
  },
  computed: {
    colorList: function () {
      var list = [{
        start: 'rgba(30, 191, 244, 1)',
        end: 'rgba(57, 255, 234, 1)'
      }, {
        start: 'rgba(1, 66, 230, 1)',
        end: 'rgba(56, 172, 247, 1)'
      }, {
        start: '#fcae22',
        end: '#f9a611'
      }]
      var colorList = []
      list.forEach((type) => {
        var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: type.start
        },
          {
            offset: 1,
            color: type.end
          }
        ])
        colorList.push(color)
      });
      return colorList
    }
  },
  mounted() {
    this.drawEcharts()
  },
  methods: {
    drawEcharts() {
      var that = this
      window.addEventListener('resize', this.drawEcharts)
      let myChart = echarts.init(this.$refs.echarts)
      let xData = ["专科生", "留学生", "函授生", "折合在校生", "全日制在校生"];
      let yData = [6800, 3126, 4821, 10000, 7400];
      var option = {
        color: ['#00D7E9', 'rgba(0, 215, 233, 0.9)'],
        grid: {
          containLabel: true,
          left: 0,
          right: 0,
          bottom: 0,
          top: 40,
        },
        xAxis: {
          axisLabel: { //底部label样式
            color: 'rgba(215, 231, 255, 1)',
            fontSize: 13,
            interval: 0,
          },
          axisTick: { //刻度线
            show: false,
          },
          splitLine: { //不显示分割线
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#335971',
            },
            show: true,
          },
          data: xData,
        },
        yAxis: {
          name: '人', //左上角单位设置
          nameTextStyle: {
            color: 'rgba(11, 255, 168, 1)',
            padding: [0, 25, 0, 0],
            fontSize: 12,
          },
          axisLabel: { //纵坐标颜色
            color: 'rgba(181, 217, 255, 1)',
            fontSize: 14,
            interval: 0,
            fontFamily: 'DIN-bold'

          },
          axisTick: { //不显示刻度
            show: false,
          },
          splitLine: { //分割线样式
            show: true,
            lineStyle: {
              color: '#335971',
              "type": "dashed"
            },
          },
          axisLine: { //不显示左侧坐标轴线
            show: false,
          }
        },
        series: [
          {
            data: yData,
            type: 'bar', //类型 柱状图为bar
            barWidth: 27, //柱状图宽度
            itemStyle: { //柱状图颜色,通过linear实现渐变色
              color: {
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                type: 'linear',
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(18, 99, 255, 1)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(4, 206, 247, 1)',
                  },
                ],
              },
            },
            label: { //柱状图文字配置
              show: true,
              position: 'top',
              distance: 10,
              fontSize: 14,
              color: 'rgba(0, 234, 254, 1)',
              fontFamily: 'DIN-bold'
            },
          },
        ],
        tooltip: {
          show: true,
          formatter: '{b}:{c0}',
        },
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

接下来我们来做第二个饼状图组件。

更多数据可视化大屏教程

vue3 vite 数据可视化大屏教程

喜欢