vue3中vue-echarts的基本使用
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 + ' ' + 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};
//下面就可以做一些你想做的功能
// .....
}
更多推荐
已为社区贡献1条内容
所有评论(0)