饼图柱状图增加点击事件

饼图

<template>
	<div :id="'chart' + id" class="pie-chart"></div>
</template>

<script>
import echarts from "echarts"

export default {
	name: "Chart",
	props: {
		id: Number,
		isCrmSellerAdmin: Boolean,
		searchParams: {
			type: Object,
			default: () => {},
		},
		chartData: {
			type: Array,
			default: () => [],
		},
		isCycle: {
			type: Boolean,
			default: false,
		},
	},
	watch: {
		chartData: {
			handler() {
				window.removeEventListener("resize", this.handle)
				this.initChart()
			},
			deep: true,
		},
	},
	mounted() {
		this.initChart()
	},
	data() {
		return {
			myChart: null, // 定义变量用来存放echarts实例
		}
	},
	methods: {
		initChart() {
			let _this = this
			this.myChart = echarts.init(document.getElementById("chart" + this.$props.id))

			const option = {
				tooltip: {
					trigger: "item",
				},
				series: [
					{
						name: "",
						type: "pie",
						radius: this.isCycle ? ["40%", "70%"] : "50%",
						data: this.$props.chartData,
						itemStyle: {
							normal: {
								color: function (colors) {
									var colorList = ["#fc8251", "#5470c6", "#9A60B4", "#ef6567", "#f9c956", "#3BA272"]
									return colorList[colors.dataIndex]
								},
							},
						},
						label: {
							normal: {
								show: true,
								// position: "inner", // 数值显示在内部
								// formatter: "{d}%", // 格式化数值百分比输出
								formatter: "{b}\n{d}% ",
							},
						},

						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)",
							},
						},
					},
				],
			}

			this.myChart.off("click")
			this.myChart.on("click", function (param) {
				_this.openSalePageOther(param.name)
			})
			this.myChart.setOption(option)
			window.addEventListener("resize", this.handle)
		},
		openSalePageOther(showStatus) {
			let newpage = this.$router.resolve({
				path: "/crm-sales-lead",
				query: {
					searchParams: JSON.stringify({
						...this.searchParams,
						productVersion: [ "团队版", "定制化"],
					}),
				},
			})
			window.open(newpage.href, "_blank","noopener=yes,noreferrer=yes")
		},
		handle() {
			this.myChart.resize()
		},
	},
	beforeDestroy() {
		window.removeEventListener("resize", this.handle)
	},
}
</script>

柱状图增加点击事件

		initChart() {
			this.myChart = echarts.init(document.getElementById("barChartCustom"))

			const option = {
				grid: {
					top: "10%",
					left: "10%", // grid布局设置适当调整避免X轴文字只能部分显示
					right: "10%", // grid布局设置适当调整避免X轴文字只能部分显示
					bottom: "25%",
				},
				tooltip: {
					trigger: "axis",
				},
				xAxis: {
					type: "category",
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					axisLabel: {
						// interval: 0,
						rotate: -80,
						formatter: function (value) {
							if (value.length > 10) {
								return value.substr(0, 5) + "..."
							} else {
								return value
							}
						},
					},
				},
				yAxis: {
					type: "value",
				},
				series: [
					{
						data: this.$props.yData,
						type: "bar",
						barMaxWidth: "45px",
						itemStyle: {
							normal: {
								color: "#eeb820",
								label: {
									show: true, //开启显示
									position: "top", //在上方显示
									textStyle: {
										//数值样式
										fontSize: 12,
									},
								},
							},
						},
					},
				],
			}

			this.myChart.setOption(option)

			this.myChart.getZr().on("click", (params) => {
				let pointInPixel = [params.offsetX, params.offsetY]
				if (this.myChart.containPixel("grid", pointInPixel)) {
					let xIndex = this.myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
					this.openSalePageOther(this.$props.xData[xIndex])
				}
			})
		},