课程设计项目准备——Echarts自学笔记

最新推荐文章于 2024-08-09 17:10:29 发布

水岸ShrINe

最新推荐文章于 2024-08-09 17:10:29 发布

阅读量258

点赞数

分类专栏： Echats 文章标签： js 数据可视化 javascript html

本文链接：https://blog.csdn.net/weixin_43985267/article/details/113823765

版权

本文是关于ECharts的自学笔记，介绍了如何在Vue中使用ECharts，包括安装、基础图表制作以及坐标系的理解。ECharts是一个基于JavaScript的数据可视化库，适用于各种柱状图、折线图、饼图等。文章详细讲解了ECharts的option配置，组件如坐标轴、提示框等，并探讨了系列（series）和组件（component）的概念。

摘要由CSDN通过智能技术生成

2.16自学笔记——初识Echarts与vue中应用

本文章仅记录自学进度及笔记，不用于任何商业用途，如有侵权请联系作者，作者将第一时间对相应内容进行删除。

为什么要学Echarts？Echarts有什么用？
在这里插入图片描述

获取Echarts

通过 npm 获取 echarts，npm install echarts --save，在安装后使用时出现问题，查询相关资料后得知新版本不兼容vue，需安装4.9版本。在main.js中进行引入：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts;

制作入门图表
首先需要为图标准备一个容器，定义为一个具有高宽的dom，这边为vue代码，宽高在style中定义：

  <div>
    <h2>vue中插入Echarts示例</h2>
    <div id="chart_example">
 
    </div>
  </div>

3.echarts官网有html引用图标的代码，查询相关资料后得知vue中代码整体如下，稍作浏览即可：

<script>
  import echarts from 'echarts'
  export default {
    
    data() {
    
      return {
    }
    },
    mounted() {
    
      let this_ = this;