echarts的柱状图使用

原创

于 2024-05-15 15:06:06 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

1. 柱状图（柱体顶部使用外部图片

在这里插入图片描述
相关代码

<template>
  <div class="out-bg">
    <div class="container" ref="warnChartRef"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
   
   
  data() {
   
   
    return {
   
   
      jqrwChart: null,
      active: 0,
      xData: ['公交车', '卡车', '小客车', '工程车', '挖掘机', '未带安全帽', '烟雾', '货车', '轿车'], // 赋值x轴的数据
      seriesData: [147, 244, 2, 2, 174, 1, 1, 897, 1628],// 赋值Y轴的数据
      barTopImg: require('@/assets/images/bigScreen/bar-top.png'),
      symbolData: [],
      timer: null,
    }
  },
  mounted() {
   
   
    this.initData()
  },
  methods: {
   
   
    //echarts自适应
    fontSize(res) {
   
   
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = clientWidth / 1920;
      return res * fontSize;
    }