elementUI + echar 实现饼图效果

原创

于 2021-11-18 09:48:33 发布 · 1.9k 阅读

CC 4.0 BY-SA版权

文章标签：

在Vue + elementUI项目中，本文介绍了如何实现两个echarts饼图的展示，包括数据输入功能和拖动效果。首先确保安装了echarts库，然后在HTML部分创建图表容器，并在JS部分引入echarts，利用echarts官网的例子定制样式，并在mounted生命周期钩子中初始化图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（在VUE + elementUI项目中）

今日的练习项目

需求：

1 两个echar图表（饼图）（柱形图）

2 展示输入的数据（两个录入按钮）

3 两组拖动效果

环境准备：

echarts :

npm install echarts -S

//或者

npm install echarts --save

代码：

HTML 部分：

准备一个拥有宽高的IDV

id选择器的作用在于将渲染后的输出写在DOM上


<template>
  <!--占位子-->
<div id="echarts_box" style="width: 600px;height:400px;"></div>
</template>

200万优质内容无限畅学