echarts 柱状图多维数组

最新推荐文章于 2024-03-15 15:31:50 发布

sunlizhen

最新推荐文章于 2024-03-15 15:31:50 发布

阅读量1.6k

点赞数 1

分类专栏：前端框架、插件 vue JS类

本文链接：https://blog.csdn.net/sunlizhen/article/details/109297327

版权

这个博客展示了如何用Echarts库创建一个展示不同等级景区门票收入的多维柱状图。通过配置项设置，包括图表标题、提示、图例、X轴和Y轴信息，以及每个级别的颜色和样式，生成了五个级别（5A，4A，3A，2A，A）的柱状图，每个级别对应一个季度的数据。在组件挂载后，初始化Echarts实例并设置图表选项。

摘要由CSDN通过智能技术生成

<template>
  <div class="hello">
    <div ref="manyBar" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
let  seriesDatas  = [[ 83, 56, 77, 99 ], [ 62, 55, 67, 82 ], [ 71, 45, 62, 79 ], [ 78, 40, 58, 77 ], [ 76, 33, 52, 67 ]]
export default {
  name: 'HelloWorld',
  data () {
    return {
      option2: {
        title: {
          text: '景区门票收入走势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data : [ '5A', '4A', '3A', '2A', 'A' ]
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: [ '一季度', '二季度', '三季度', '四季度' ]
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name