【study】3分钟上手Vue项目ECharts 1.如何获取echarts (1)从Apache ECharts官网下

1.如何获取echarts

(1)从Apache ECharts官网下载界面获取官方源码包后构建
(2)在ECharts的GitHub获取
(3)通过npm获取 npm install echarts --save(在vue项目中推荐)
(4)通过jsDelivr等CDN引入

2.vue项目中引入ECharts

在入口文件main.js中

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

3.echarts在vue单页面中的使用

<template>
  <div>
   <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px; position: absolute"></div>
  </div>
</template>
<script>
export default {
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        dataset: {
          source: [
            ["jan", 34, 20, 40],
            ["Feb", 28, 14, 54],
            ["Mar", 45, 32, 42],
            ["Apr", 69, 46, 36],
            ["May", 39, 24, 38],
            ["Jun", 45, 32, 43],
          ],
        },
          grid: [
          { top: 40, bottom: "58%" },
          { top: "58%", bottom: 40 },
         ],
        xAxis: [
          { type: "category", gridIndex: 0     },
          { type: "category", gridIndex: 1      },
        ],
        yAxis: [
          { type: "value", gridIndex: 0    ,data: [0,5,10,15,20,25,30,35,40,45,50,55,60]},
          { type: "value", gridIndex: 1 ,data:[0,5,10,15,20,25,30,35,40,45,50,55,60]},
        ],
        series: [
          {
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 0,
            encode: { x: 0, y: 1 },
          },
          {
            type: "line",
            xAxisIndex: 1,
            yAxisIndex: 1,
            encode: { x: 0, y: 2 },
          },
          {
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            encode: { x: 0, y: 2 },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    // 调用的是内部的方法得注意加上this.
    this.drawChart();
  },
};
</script>
<style lang ="scss" scoped>
</style>

注：如有不同的需求，请查看ECharts官网echarts.apache.org/zh/index.ht…

4.ECharts基础概念

1.eaharts实例：一个网页中可以创建多个echarts实例。每个echarts实例中可以创建多个图表和坐标系等等,就是上述代码中的option。准备好一个DOM节点，作为echarts的渲染容器，就可以在上面创建一个echarts实例，每个echarts实例独占一个DOM节点。
2.echarts的series（系列）：一个系列至少包括：一组数值，图表类型（series.type），以及其他关于这些数据如何映射成图的参数。

（1）图表类型即系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）等等类同地，下图中是另一种配置方式，系列的数据从 dataset 中取：

3.component(组件)：在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、...

注：其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的

4.用option描述图表：描述对图表的各种需求，即是数据，数据如何映射成图形，交互行为。

(1)series.data

// 创建 echarts 实例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);

// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
var option = {
    // option 每个属性是一类组件。
    legend: {...},
    grid: {...},
    tooltip: {...},
    toolbox: {...},
    dataZoom: {...},
    visualMap: {...},
    // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
    xAxis: [
        // 数组每项表示一个组件实例，用 type 描述“子类型”。
        {type: 'category', ...},
        {type: 'category', ...},
        {type: 'value', ...}
    ],
    yAxis: [{...}, {...}],
    // 这里有多个系列，也是构成一个数组。
    series: [
        // 每个系列，也有 type 描述“子类型”，即“图表类型”。
        {type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
        {type: 'line', data: [2231, 1234, 552, ... ]},
        {type: 'line', data: [[4, 51], [8, 12], ... ]}
    }]
};

// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
chart.setOption(option);

(2)dataset

var option = {
    dataset: {
        source: [
            [121, 'XX', 442, 43.11],
            [663, 'ZZ', 311, 91.14],
            [913, 'ZZ', 312, 92.12],
            ...
        ]
    },
    xAxis: {},
    yAxis: {},
    series: [
        // 数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）
        {type: 'bar', encode: {x: 1, y: 0}},
        {type: 'bar', encode: {x: 1, y: 2}},
        {type: 'scatter', encode: {x: 1, y: 3}},
        ...
    ]
};

5.组件的定位

(1)类css的绝对定位:多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。 left right width 是一组（横向）、top bottom height 是另一组（纵向）

(2)中心半径定位:少数圆形的组件或系列，可以使用“中心半径定位”，例如，pie（饼图）、sunburst（旭日图）、polar（极坐标系）。中心半径定位，往往依据 center（中心）、radius（半径）来决定位置。

(3)其他定位:少数组件和系列可能有自己的特殊的定位方式。在他们的文档中会有说明。

6.坐标系:一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。

(1)我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 xAxis、yAxis 和一个 scatter（散点图系列），echarts 暗自为他们创建了 grid 并关联起他们： (2)再来看下图，两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis： (3)再来看下图，一个 echarts 实例中，有多个 grid，每个 grid 分别有 xAxis、yAxis，他们使用 xAxisIndex、yAxisIndex、gridIndex 来指定引用关系：

注：详细教程请看EChart官网 echarts.apache.org/zh/tutorial…

可能出现的小bug

点击切换echarts的时候视图不更新

使用watch监听,重新初始化init

待补充......