中使用echarts

提示：android系统定制开发避免花里胡哨，android系统定制开发直接上方法

---

---

前言

提示：vue3中使用echarsandroid系统定制开发的七步骤如下：其中第5-7android系统定制开发的步骤都写在Dom渲染完成的生命周期中：可以是 onMounted() 也可以是 Mounted()

---

最终效果展示：

一、官网地址

下面的三个地址可以方便我们进行官网的直接跳转（省时省力）
主要是为了方便xdm

二、Echars的创建步骤(Vue3中使用的写法)

这里是直接封装的组件进行使用的
只需传入数据就可以一劳永逸
大大滴方便

第一步：安装echars

在终端中执行：npm install echarts --save

 npm install echarts --save
1

如下图所示：

第二步：导入echarts

在文件中导入echarts
import * as echarts from “echarts”;

import * as echarts from "echarts";
1

第三步：创建Dom结构

创建Dom结构（并且设定div的大小）用来展示echars图表

<template>  <div ref="EcharRef" style="width: 300px; height: 300px"></div></template>
1
2
3

如下图所示：

第四步：ref获取创建的Dom结构

通过ref获取到创建的Dom结构 (！！！！！Dom加载完成的生命周期！！！！！)

  const main = this.$refs.EcharRef;
1

如下图所示

第五步：初始化图表

init（）初始化图表（到这里基础的引入工作已经完成了）

  const myChars = echarts.init(main);
1

如下图所示

第六步：配置对应的option数据

需要配置对应的option数据可以采用对象拼接的数据

如下图所示：

第七步：setOption方法进行数据的设置

通过setOption方法进行数据的设置

   myChars.setOption(this.options);
1

如下图所示

三、完整代码如下（包含父组件中的传值,Vue3中Vue2的分写法）

父组件（echars父组件传值格式）

      <EcharsCommon :seriesOpeion="{series:[    {      name: 'Email',      type: 'line',      stack: 'Total',      data: [120, 132, 101, 134, 90, 230, 210]    },    {      name: 'Video Ads',      type: 'line',      stack: 'Total',      data: [150, 232, 201, 154, 190, 330, 410]    },    {      name: 'Search Engine',      type: 'line',      stack: 'Total',      data: [820, 932, 901, 934, 1290, 1330, 1320]    }  ]}"></EcharsCommon>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

子组件（echars子组件封装）

这个是定义的公用组件Echars（子组件）

<template>  <div ref="EcharRef" style="width: 300px; height: 300px"></div></template><script lang="ts">import { defineComponent } from "vue";//第一步：先在官网中的指令进行安装// npm install echarts --save//第二步：导入echartsimport * as echarts from "echarts";export default defineComponent({  //第三步：创建Dom结构（并且设定div的大小）用来echars图表  //第四步：通过ref获取到创建的Dom结构 (！！！！！Dom加载完成的生命周期！！！！！)  mounted() {    const main = this.$refs.EcharRef;    //第五步：初始化咱们的图表内容（到这里基础的引入工作已经完成了）    const myChars = echarts.init(main);    //第六步：需要配置对应的option数据可以采用对象拼接的数据    //第七步：通过setOption进行数据的设置    myChars.setOption(this.options);  },  //父组件传过来的数据  props: {    seriesOpeion: [Array, Object],  },  //使用计算属性进行合并  computed: {    options() {      return Object.assign(this.baseOption, this.seriesOpeion);    },  },  data() {    return {      /* 一些配置项的设置内容 */      baseOption: {        //标题        titile: {          text: "测试折线图",        },        //legend图例的设置 plain是横向排，scroll是垂直排（具体属性请对照官方文档）        legend: {          type: "plain",        },        //X轴设置        xAxis: {          type: "category",          name: "日期",          data: [1, 2, 3, 4, 5, 6, 7],        },        //y轴数据        yAxis: {          type: "value",          name: "数量",        },        //鼠标悬浮在图表上的tip提示(这里的trigger属性需要重视：axis是折线等，itme是扇形等)        tooltip: {          trigger: "axis",        },        //工具栏的对应设置，详细内容可以阅读文档        toolbox: {          feature: {},        },      },    };  },  });</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

四、Vue3的写法完整写法如下(setup篇)

展示效果如下

第一种数据结构(入门)

第二种数据结构展示图(复杂,可按需配置)

代码图解,如下所示:

完整的使用代码如下:

<script setup lang="ts">//1.导入echartsimport * as echarts from 'echarts';import { Ref, ref, onMounted } from 'vue'//2.事先外部声明的一些图表结构(如果是使用公共组件的话,这里可以用函数进行封装+对数据进行处理的函数)import {options,option} from './dataScource'//3.获取定义的Dom模板const echarsDom:Ref<HTMLElement|any> = ref(null)//4.在组件挂载的生命周期中获取到DOm节点onMounted(() => {    //5.创建echarts初始化对象    const myEcharts = echarts.init(echarsDom.value);    //6.校验表结构是否存在,存在就渲染    options && myEcharts.setOption(option);})</script> <template>    <!-- 创建一个div去显示echarts -->    <div ref="echarsDom" style="width: 800px;height: 600px;"></div></template>```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28