echarts的柱状图使用

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


echarts的柱状图使用_第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;

你可能感兴趣的:(echarts,echarts,前端,javascript)