vue3中vue-echarts的基本使用

vue-echarts介绍：https://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.md
注意：vue-echarts在使用前要先安装echarts，不要只安装vue-echarts这一个

安装

 npm install echarts vue-echarts

使用

1. main.js中全局注册组件

import "echarts"
import ECharts from "vue-echarts"
app.component('v-chart',ECharts)

2. 在组件中使用

<template>
   <v-chart :option="option1"></v-chart>
</template>

<script setup>
import VChart from 'vue-echarts';
const option1 = ref({
	// 鼠标移入弹出框
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
        	// 自定义弹出框内容   （小圆点 + 名称 + 值）
            var dom = params.marker + params.name + '&nbsp;&nbsp;&nbsp;&nbsp;' + params.value + '小时'
            return dom
        }
    },
    // 图例
    legend: {
        type: "plain",
        show: true,
        top: 'middle',   // 上下位置居中
        right: "1%",     // 左右位置靠右
        orient: "vertical",   // 竖向排列
        align: "right",       // 小图标在右边
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
                show: true,
                formatter: '{b}\n{c}小时'
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: '{b}\n{c}小时'
                }
            },
            labelLine: {
                show: true
            },
            // 可以通过接口求取  onMounted
            data: use_operate_time.value
        }
    ],
    color: ['#bf7373', '#e3b897', '#a6bfa2', '#8c786d']
})

</script>

3. 添加图例点击事件

// 组件添加legendselectchanged事件
<v-chart :option="option2" @legendselectchanged="legendselectchanged"></v-chart>

// script标签中代码
const legendselectchanged = (res) => {
	//	点击图例默认会改变系列的显示状态
	//	自定义图例点击事件需要先阻止这个默认事件
	//  legend: {selectedMode: false},这个属性可以使点击事件不起效，但同样自定义legendselectchanged 事件也会失效，因此不能通过 selectedMode: false 来控制
	// option2.value.legend.selected = {[res.name] : true};这句代码可以使点击的图例系列重新显示
    option2.value.legend.selected = {[res.name] : true};
    //下面就可以做一些你想做的功能
    // .....
}