JT-CIM-ZHNY/src/components/jt-echarts/jt-echarts.vue

<template>
	<div ref="echarts" style="width: 100%;height: 100%;"></div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts-liquidfill';
export default {
	props: {
		isAxisChart: {
			type: Boolean,
			default: true,
		},
		chartData: {
			type: Object,
			default:{}
		},
	},
	data() {
		return {
			axisOption: {
				legend: {
					// 图例文字颜色
					textStyle: {
						color: "#333",
					},
				},
				grid: {
					left: "20%",
				},
				// 提示框
				tooltip: {
					trigger: "axis",
				},
				xAxis: {
					type: "category", // 类目轴
					data: [],
					axisLine: {
						lineStyle: {
							color: "#17b3a3",
						},
					},
					axisLabel: {
						interval: 0,
						color: "#333",
					},
				},
				yAxis: [
					{
						type: "value",
						axisLine: {
							lineStyle: {
								color: "#17b3a3",
							},
						},
					},
				],
				color: ["#2ec7c9", "#b6a2de"],
				series: [],
			},
			normalOption: {
				tooltip: {
					trigger: "item",
				},
				color: ["#0f78f4", "#dd536b", "#9462e5", "#a6a6a6", "#e1bb22", "#39c362", "#3ed1cf"],
				series: [],
			},
			echart: "",
		};
	},
	methods: {
		initChart() {
			this.initChartData();
			if (this.echart) {
				this.echart.setOption(this.options);
			} else {
				this.echart = echarts.init(this.$refs.echarts);
				this.echart.setOption(this.options);
			}
		},
		initChartData() {
			if (this.isAxisChart) {
				this.axisOption = this.chartData
				// this.axisOption.series = this.chartData
			} else {
				this.normalOption.series = this.chartData
			}
		},
	},
	watch: {
		chartData: {
			handler: function () {
				this.initChart();
			},
			deep: true,
		},
	},
	computed: {
		options() {
			return this.isAxisChart ? this.axisOption : this.normalOption;
		},
	},
	mounted() {

	}
};
</script>

<style scoped>
	
</style>