1. Echart入门使用

环境说明

• node版本

node -v  
# v12.16.0

• vue版本

vue 2

• node下载源

# 查看当前node下载配置
npm config get registry   
# 设置下载源为淘宝镜像
npm config set registry https://registry.npm.taobao.org 

方便演示，番茄Echarts系列博客环境都在 vue2; node版本为 v12.16.0下运行。

安装

官网说明地址

npm install echarts --save

下载需要注意的事项

1. 截止到 2022/04/06 默认安装的 echarts版本为："echarts": "^5.3.2",
2. 可以在node_module中查看下载的依赖，我记得4.9.0版本是会携带中国地图和世界地图的json文件
3. 4.9.0版本中包含：中国地图json；世界地图json；中国城市json；可自行下载，或者点击此处下载
4. 本文以最新的5.3.2为例进行演示说明

初体验

一开始啥也不会，那我们就去复制一个官网的示例去学习一下啊

代码

<!--
 * @Author: lazy_tomato
 * @Date:  2022-04-06 19:30:34
 * @LastEditTime: 2022-04-06 19:30:34
 * @LastEditors: lazy_tomato
 * @Description: 数据分析
-->

<template>
  <div class="data-visualization">
    我就是数据分析

    <!-- 1.写一个div -->
    <div id="main" class="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    // 2.在DOM加载完毕后 我们再操作DOM-拿到我们的main
    var myChart = echarts.init(document.getElementById("main"));

    // 3.传入参数即可
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>

<style lang="scss" scoped>
.data-visualization {
  width: 100%;
  height: 100%;

  .main {
    margin: 0 auto;
    width: 600px;
    height: 400px;
  }
}
</style>

运行截图

END

• 到现在就可以说是已经基本的安装和使用就ok啦
• 2.Echart----绘制饼图