vue echarts 条纹柱状横向图

最新推荐文章于 2024-05-14 16:57:24 发布

新宇最优秀

最新推荐文章于 2024-05-14 16:57:24 发布

阅读量1.3k

点赞数 1

分类专栏： echarts 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/tendernessxy/article/details/115672529

版权

实现效果：
在这里插入图片描述

<template>
  <div id="BusinessTop5Chart" style="flex: 1; height: 300px; width: 614px; margin-left: 10px"></div>
</template>
<script>
import {
    getNoteMatters } from '@/api/government';
const colors = [
   'rgba(248, 75, 110, 1)',
   'rgba(239, 142, 47, 1)',
   'rgba(234, 202, 4, 1)',
   'rgba(79, 224, 255, 1)',
   'rgba(106, 196, 255, 1)',
 ];
export default {
   
  data() {
   
    return {
   
      list: [],
      list1: [],
      list2: [],
      Top5ListName: [],
      Top5ListValue:[]
    };
  },
  mounted() {
   
    this.getNoteMatters();
  },
  methods: {
   
    initMap() {
   
      var myChart = this.$echarts.init(document.getElementById('BusinessTop5Chart'));
      const option = {
   
        grid: {
   
          top: 20,
          bottom: 30,
          left: 10,
          right: 150,
          containLabel: true,
        },
        tooltip: {
   
          show: true,
          trigger: 'axis',
          axisPointer: {
   
            type: 'shadow',
          }