VChart 组件基本使用

不会秃头的Tzr

已于 2024-03-07 18:19:04 修改

阅读量806

点赞数 8

文章标签：前端 javascript 开发语言

于 2024-03-07 17:18:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43273592/article/details/136539133

版权

本文介绍了如何在Vue项目中引入并使用vue-echarts的VChart组件创建饼图，包括全局引入、在页面上使用组件以及自定义option配置。还展示了如何添加点击事件处理函数。

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

1.引入,安装

import VChart from 'vue-echarts'

export default {
  components: {
    VChart
  },

全局引入,在main.js中操作

import Vue from 'vue'
import { VChart } from 'vue-echarts'

Vue.component('VueEcharts', VChart)

2.直接在页面使用组件

 <VChart
       style="width: 100%; height: 250px"
       :option="middleRightOption"
       ref="middleRightMain"
       autoresize>
</VChart>

style="width: 100%; height: 250px" 是给整个盒子一个宽高 , :option="middleRightOption" 是这个图表的数据 , 直接定义middleRightOption即可 , ref="middleRightMain" 给这个图表的标识 .

3.定义option , 配置项与echarts基本一致

 getMiddleRightCharts() {
    this.$refs.middleRightMain.chart.on('click', () => {
        this.openLagDetail()  //后续操作
      })
    var xdata = [
        { value: 25, name: '已滞后', color: '#f59a23' },
        { value: 75, name: '已完成', color: '#70b603' }
      ]
      this.middleRightOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '35%',
          left: '10%',
          orient: 'vertical', //图例列表的布局朝向。
          itemGap: 50 //图例间距
        },
        series: [
          {
            type: 'pie',
            // 饼图颜色设置
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#f59a23', '#70b603']
                  return colorList[colors.dataIndex]
                }
              }
            },
            radius: ['40%', '70%'],
            center: ['60%', '50%'],
            labelLine: {
              show: false
            },
            label: {
              formatter: `{c}个`, //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
              textStyle: {
                align: 'center',
                fontWeight: 'bolder'
              }
            },
            data: xdata
          }
        ]
      }
}