百万级可视化开发进阶笔记——v-chart组件的使用

最新推荐文章于 2025-03-23 01:30:09 发布

每天发布一篇原创

最新推荐文章于 2025-03-23 01:30:09 发布

阅读量407

点赞数

分类专栏：可视化 echarts element ui 文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_26728817/article/details/116850694

版权

echarts 同时被 3 个专栏收录

13 篇文章

订阅专栏

element ui

10 篇文章

订阅专栏

可视化

6 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中引入Vue Echarts组件，通过修改模板代码将传统<div>元素替换为<v-chart>组件，实现更简洁的图表展示。示例中展示了累计用户数的条形图，包括日同比和月同比的数据，并提供了详细的图表配置代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装一下这个
在这里插入图片描述
main.js增加

import VueEcharts from 'vue-echarts'
Vue.component('v-chart', VueEcharts)

以上一篇为例

<div id="total-user-chart" :style="{width:'100%',height:'100%'}"></div>

修改为

  <v-chart :option="getOptions()"></v-chart>

看起来更简洁

<template>
  <common-card
  title="累计用户数"
  value="1,056,355"
  >
    <template>
<!--      <div id="total-user-chart" :style="{width:'100%',height:'100%'}"></div>-->
      <v-chart :option="getOptions()"></v-chart>
    </template>
    <template v-slot:footer>
      <div class="compare-wrapper">
        <div class="compare">
          <span>日同比</span>
          <span class="emphasis">5.06%</span>
          <div class="increase"></div>
        </div>
        <div class="compare">
          <span>月同比</span>
          <span class="emphasis">5.06%</span>
          <div class="decrease"></div>
        </div>
      </div>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'
export default {
  name: 'total-user',
  mixins: [commonCardMixin],
  methods: {
    getOptions () {
      return {
        title: {
          show: false,
          text: '累计用户数',
          textStyle: {
            color: '#FFFFFF'
          },
          left: '300px',
          top: '300'

        },
        tooltip: {
          show: false,
          formatter: '{b} <br> {c}%'

        },
        legend: {
          show: false
          // icon: 'circle',
          // bottom: '43%',
          // left: '10%',
          // itemWidth: 7,
          // itemHeight: 7,
          // itemGap: 40,
          // textStyle: {
          //   color: '#89A7AF'
          // },
          // data: [{
          //   name: '用户'
          // }
          // ]
        },
        xAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          data: [''],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }

        }],
        series: [
          {
            name: '用户',
            type: 'bar',
            barWidth: 16,
            stack: '累计用户数',
            // label: {
            //   normal: {
            //     borderWidth: 10,
            //     distance: 20,
            //     align: 'center',
            //     verticalAlign: 'middle',
            //     borderRadius: 1,
            //     borderColor: '#E8A61F',
            //     backgroundColor: '#E8A61F',
            //     show: true,
            //     position: 'top',
            //     formatter: '{c}%',
            //     color: '#000'
            //   }
            // },
            itemStyle: {
              color: '#E8A61F'
            },
            data: [{
              value: 70,
              itemStyle: {
                normal: {
                  color: {
                    type: 'bar',
                    colorStops: [{
                      offset: 0,
                      color: '#45c946' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#45c946' // 100% 处的颜色
                    }],
                    globalCoord: false// 缺省为 false

                  }
                }
              }
            }]
          },
          {
            name: '',
            type: 'bar',
            barWidth: 16,
            stack: '累计用户数',
            itemStyle: {
              color: '#0CD8A7'
            },
            // label: {
            //   normal: {
            //     borderWidth: 10,
            //     distance: 20,
            //     align: 'center',
            //     verticalAlign: 'middle',
            //     borderRadius: 1,
            //     borderColor: '#0CD8A7',
            //     backgroundColor: '#0CD8A7',
            //     show: false,
            //     position: 'top',
            //     formatter: '{c}%',
            //     color: '#000'
            //   }
            // },
            data: [{
              value: 30,
              itemStyle: {
                normal: {
                  color: {
                    type: 'bar',
                    colorStops: [{
                      offset: 0,
                      color: '#eee' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#eee' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false

                  }
                }
              }
            }]
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.compare-wrapper,.compare{
  display: flex;
  margin-right: 10px;
  align-items: center;
}
</style>