一、echarts的基本用法

1.初始化类

Html 里 面 创 建 一 个 id 为 box1 的 div ， 并 初 始 化 echarts 绘 图 实 例 var myChart =echarts.init(document.getElementById('box1'))

2.样式配置

• title:标题
• tooltip:鼠标悬停气泡
• xAxis : 配置横轴类别，type 类型为 category 类别
• series：销量数据，data 参数与横轴一一对应，如果想调样式，也可以简单调整，比如每个条形图的颜色可以通过函数进行数组返回渲染

3.渲染图展示表

myChart.setOption(option)

二、如何使用echarts

1. 获取echarts：在官网下载echarts版本或npm下载
2. 引入echarts：script引入或者vue在入口文件里引入
3. 创建一个dom元素用来防止图表
4. 配置echarts属性

三、echarts如何画圆

1.echarts 是通过 canvas 来实现的，由于 canvas 的限制，所以 echarts 在实现的时候多是绘制一些规则的，可预期的，易于实现的东西

2.echarts 的核心就是 options 配置的对象。一般使用最多的是直角坐标图，极点图，饼状图，地图。

3.对于直角坐标，必须配置 xAsix 和 yAxis，对于几点坐标必须配置 radiusAxis 和 angleAxis。

4.就是 series 系列的认识，它是一个数组，数组的每一项都代表着一个单独的系列，可以配置各种图形等等功能。然后 data一般是一个每一项都是数组的数组，也就是嵌套数组。里层数组一般代表坐标位置

四、echarts绘制条形图

1.初始化类

Html 里面创建一个 id 为 box1 的 div，并初始化 echarts 绘图实例

var myChart = echarts.init(document.getElementById('box1'))

2、样式配置

title:标题

tooltip ：鼠标悬停气泡

xAxis : 配置横轴类别，type 类型为 category 类别

series：销量数据，data 参数与横轴一一对应，如果想调样式，也可以简单调整，比如每个条形图的颜色可以通过函数进行数组返回渲染

3.渲染图展示表

五、echarts在vue中怎么引用

首先我们初始化一个 vue 项目，执行 vue init webpack echart,接着我们进入初始化的项目下。安装 echarts

npm install echarts -S //或cnpm install echarts -S

安装完成之后，我们就可以开始引入我们需要的 echarts 了，接下来介绍几种使用 echarts 的方式。

全局引用:

首先在 main.js 中引入 echarts，将其绑定到 vue 原型上：

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

接着，我们就可以在任何一个组件中使用 echarts 了。

局部使用:

当然，很多时候没必要在全局引入 ecahrts，那么我们只在单个组件内使用即可，代码更加简单：

<template>
  <div><div style="width: 500px; height: 500px" ref="chart"></div></div>
</template> <script>
const echarts = require("echarts");
export default {
  data() {
    return {};
  },
  methods: {
    initCharts() {
      let myChart = echarts.init(this.$refs.chart);
      myChart.setOption({
        title: { text: "在 Vue 中使用 echarts" },
        tooltip: {},
        xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] },
        yAxis: {},
        series: [{ name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20] }],
      });
    },
  },
  mounted() {
    this.initCharts();
  },
};
</script>

六、echarts支持哪些图标

折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K 线图、饼图（环形图）雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等 12 类图表

总结

echarts由2013年6月正式发布1.0，于2014年6月发布2.0。两个大版本。时至今日2021年1月28日echarts5进行线上发布会。同时带给我们更多的便利，拥有的图标更是比之之前更加的盈多，也进行了更好的优化为了我们的工作便利echarts也基于echarts5封装了一个组件能根据传入的option初始化图表。

希望各位掘友看见的时候可以多指点指点，毕竟作为一个刚加入我们前端这个大家庭的菜鸟能够得到各位宝贵的意见才是对我最大的支持。