<script>
import * as echarts from 'echarts'
export default {
data() {
return {
option: {
title: {
text: 'Traffic Sources',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines']
},
series: [
{
name: 'Traffic Sources',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' },
{ value: 234, name: 'Ad Networks' },
{ value: 135, name: 'Video Ads' },
{ value: 1548, name: 'Search Engines' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
},
onReady() {
const chart = echarts.init(this.$refs.echarts)
chart.setOption(this.option)
}
}
</script>
<template>
<div ref="echarts" class="echarts" autoresize></div>
</template>
<style scoped>
.echarts {
width: 100vw;
height: 400px;
display: flex;
}
</style>
- 发布:2023-04-25 11:16
- 更新:2023-04-25 11:16
- 阅读:413
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 11
浏览器平台: Edge
浏览器版本: 112.0.1722.58
项目创建方式: CLI
CLI版本号: vite v4.2.1
示例代码:
操作步骤:
点击图表任何位置均响应为 Direct 显隐
点击图表任何位置均响应为 Direct 显隐
预期结果:
点击饼图展示 tooltip,点击 legend 开关 label
点击饼图展示 tooltip,点击 legend 开关 label
实际结果:
点击图表任何位置均响应为 Direct 显隐
点击图表任何位置均响应为 Direct 显隐
bug描述:
ECharts图表点击事件不符合预期,疑似点击图表任意位置均触发左上角点击事件。
0 个回复