Vue2怎么用echarts绘制折线图,饼图和大图

阅读：1224 来源：乙速云作者：代码code

Vue2怎么用echarts绘制折线图,饼图和大图

chartPan.vue




.echarts {
	width: 100%;
}
.no-data {
	width: 100%;
	height: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.chart-title {
	font-weight: 600;
	color: #333333;
	font-size: 16px
}

使用 chartPan.vue 之饼图


console.log('arr', arr); // [ {"name": "master节点","value": "1" },{ "name": "worker节点", "value": "1"}]
console.log('sum', sum); // sum 2
this.$refs.pieNode ? this.$refs.pieNode.pieInit(arr, `${this.tab === 'node' ? '节点' : ''}总数`, sum, 'node) : '';

效果

Vue2怎么用echarts绘制折线图,饼图和大图

使用 chartPan.vue 之折线图

console.log('chartDate', chartDate); // ['2023-04-25 17:57:01', '2023-04-25 17:58:01', '2023-04-25 17:59:01',] console.log('chartData', chartData); // [4.92, 4.84, 5.07, 4.96, 5.06,] this.$refs.cpu ? this.$refs.cpu.lineInit(chartDate, chartData, this.tab === 'node' ? '(%)' : '(核)', this.tab) : '';

效果

Vue2怎么用echarts绘制折线图,饼图和大图

展开大图

handlePreViewChart 事件

            
        // 展示大dialog 图形
        handlePreViewChart(type, title) {
            console.log('maxCpuChartData', this.maxCpuChartData); //
			{
				subtext: "(%)", 
				maxChartDate : [ "2023-04-25 17:57:10", "2023-04-25 17:58:10","2023-04-25 17:59:10","2023-04-25 18:00:10",],
				maxChartData : [4.92,4.84,5.07]
			}
            this.chartPublicData = type === 'cpu' ? { ...this.maxCpuChartData } : { ...this.maxMemChartData };
            this.$refs.maxChart.title = title;
            this.$refs.maxChart.dialogVisible = true;
        },

大图组件 maxChart.vue




.echarts {
	width: 100%;
	height: 500px;
}

大图效果

Vue2怎么用echarts绘制折线图,饼图和大图

分享到：

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们： hlamps#outlook.com （#换成@）。

上一篇： vue2怎么封装input组件

下一篇： vue中v-model双向绑定input输入框问题怎么解决

你可能感兴趣