Vue

Vue-echarts使用教程

Vue-echarts学习笔记

Posted by QianYe on November 10, 2021

Vue-echarts学习笔记

一、什么是Echarts？什么是Vue-echarts?

在学习Vue-echarts之前，您需先了解Echarts。Echarts是一个基于 JavaScript 的开源可视化图表库，其丰富的图表，多种的样式的特点，让其使用广泛。简单来说，Echarts可以将数据以可视化形式（图表）展示出来，让数据更加生动形象，全面直观。其拥有的图表包括常见的折线图、柱状图、饼图、散点图，还有专业的K线图、热力图、树图、雷达图、路径图等。

先了解一下，Echarts有哪些例子吧。 官网例子

image-20211128140525455

您还需阅读Echarts的文档资料，里面介绍了获取Echarts的方式和在项目(开发环境使用npm包管理方式)中引入Echarts的操作流程。由于本项目是Vue-cli开发(version 2.9.6),就不再采用普通的Echart引入方式，选用Vue-echart，开发更方便。

那为什么要使用vue-echarts呢?直接用echarts不好吗？

根据echarts的官方文档，绘画图表的流程是：画一个图表要先新建一个容器，然后在JS中通过getElementById获取这个容器。这是非常原始的JS和html交互，在开发Vue项目时，比较麻烦，不太方便，不符合经常使用vue开发的同学的使用习惯。而vue-echarts则将echarts获取元素的代码进行封装，变成一个组件，减少开发的冗余。使用Vue-echarts，平均每个图可以让我们少写十行左右代码。vue-echarts最主要的就是完成这个使命，剩下的图表配置项我们要自行看echarts的文档。

Vue-echarts是Apache ECharts 的 Vue.js 组件。

这里是Vue-echarts的中文文档。https://github.com/ecomfe/vue-echarts/blob/main/README.zh-Hans.md

二、配置Vue-echarts

由于我开发项目使用Vue-cli(2.9.6)，后面的开发的配置，都是在此开发环境基础之上，假定您的Vue配置一切正常。

在阅读Apache ECharts和Vue-echarts的文档之后，让我们开始无脑上手操作吧！！！

在安装Vue-echarts之前，请确保您已经安装@vue/composition-ap

1

npm i -D @vue/composition-api

Step1 安装

1

npm install echarts vue-echarts

Step2 进行注册

可以使用全局注册，也可以使用局部注册。为了更小的打包体积，建议使用局部注册从Echarts单个引入图表或组件。若您使用全局注册，您可在任意组件使用

；如若使用局部注册，您只可在当前组件使用。在这里只介绍局部注册的方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import Vue from 'vue'
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'
// 手动引入 ECharts 各模块来减小打包体积

import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

在了解局部注册之后，那就开始操作吧！只有简单一行代码！！

1

<v-chart class="chart" :option="option" />

再进行一些简单的配置即可

设置一下CSS样式

1
2
3

.chart {
  height: 500px;
  }

在设置一下option参数(以简单的折线图为例)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

option:{
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
 }

到这里，就在页面绘画出一个简单的折线图，看看效果。

image-20211128140623402

三、在项目中使用Vue-Echarts

在项目往往需要效果丰富的图表，会设值一系列包括但不限于标题、工具盒、提示框、主题、图例组件、X和Y轴、坐标轴指示器、区域缩放、视觉映射……。

从头到尾，有这么多配置项。

image-20211128140801115

例如，如下例子echart.vue组件，使用了一些基本的配置，并且自定义了主题。（主题文件，可到Echarts官网进行配置，在下载到本项目）

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

<template>
  <div>
    <v-chart class="chart" theme="ovilia-green" :option="option1"/>
  </div>
</template>

<script>
import {use} from "echarts/core";
import {CanvasRenderer} from "echarts/renderers";
import {PieChart, BarChart} from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart from "vue-echarts";
// 导入自定义配置的主题
import theme from "../../theme.json"

const {registerTheme} = require("echarts");
 /*设置绘画图表的各种图表、提示工具组件*/
use([
  CanvasRenderer,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

//注册自定义主题
registerTheme("ovilia-green", theme);
    
  export default {
  name: "echart",
  components: {
    VChart
  }, data() {
    return {
       option1: {
           //设置标题
        title: {
          text: "2021年计算机系专业招生情况",
          left: "center"
        },
        // 设置提示框
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },
           // 设置X轴
        xAxis: {
          type: 'category',
          data: ['计算机科学与技术', '软件工程', '物联网工程', '网络工程', '信息安全',],
          axisPointer:
            {
              show: true,
              type: 'line',
            }

        },
           // 设置Y轴
        yAxis: {
          type: 'value',
          axisPointer: {
            show: true,
            type: 'line',
            snap: true,
          }
        },
        // 添加图表的文字说明(图例组件)
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "计算机科学与技术",
            "软件工程",
            "物联网工程",
            "网络工程",
            "信息安全"
          ]
        },
        series: [
          {
            name: "计算机系",
            type: "bar",
            radius: "40%",
            center: ["50%", "50%"],
            data: [
              {value: 135, name: "计算机科学与技术"},
              {value: 110, name: "软件工程"},
              {value: 134, name: "物联网工程"},
              {value: 135, name: "网络工程"},
              {value: 148, name: "信息安全"}
            ],
            // 强调某一数据的样式
            emphasis: {
              itemStyle: {
                // color: "rgba(161,8,8,0.5)" ,
                shadowBlur: 8,
                shadowOffsetX: 0,
                shadowColor: "rgba(112,112,112,0.5)"
              }
            }
          }
        ]
      },
    }
  }

}
</script>
<style scoped>
.chart {
  height: 500px;
  background-color: #fffdfb;
  width: 800px;
}
</style>

来一起，看看效果吧。

image-20211128141250804

最后，来看看一个完整的案例,几乎使用到所有配置项(以折线图为例)

image-20211128140925649

思考一下，这张图使用那些配置？？

可以去到配置项找一找答案

最后，还可以去下载官方主题或者自定义主题→

四、更加灵活的使用Vue-Echarts

参考github上的代码，总结归纳一下github地址→

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

 <template>
  <main>
 <!-- 条形图 -->
    <h2 id="bar">
      <a href="#bar">Bar chart <small>(with async data &amp; custom theme)</small></a>
      <button
        :class="{
          round: true,
          expand: expand.bar
        }"
        @click="expand.bar = !expand.bar"
        aria-label="toggle"
      ></button>
    </h2>
    <section v-if="expand.bar">
      <figure>
        <v-chart
          :option="bar"
          :init-options="initOptions"
          ref="bar"
          theme="ovilia-green"
          autoresize
          :loading="barLoading"
          :loadingOptions="barLoadingOptions"
          @zr:click="handleZrClick"
          @click="handleClick"
        />
      </figure>
      <p v-if="seconds <= 0"><small>Loaded.</small></p>
      <p v-else>
        <small
        >Data coming in <b></b> second...</small
        >
      </p>
      <p>
        <button @click="refresh" :disabled="seconds > 0">Refresh</button>
      </p>
    </section>
  </main>
</template>

导入部分(关键部分)

1
2
3
4

// 引入getbar.js
import getBar from "./data/bar";
// registering custom theme
registerTheme("ovilia-green", theme);

配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14

export default {
  components: {
    VChart
  },
  data() {
    const options = qs.parse(location.search, { ignoreQueryPrefix: true });
    return {
      options,
      bar: getBar(),
      // 其他配置
      ........
      }
    }
  }

最后，关于加载:option=”bar”，使用getBar.js进行封装一下，在data() { return {}} 中引用，避免过度冗余。这是getBar.js

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

function random() {
  return Math.round(300 + Math.random() * 700) / 10;
}

export default function getData() {
  return {
    textStyle: {
      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
    },
    dataset: {
      dimensions: ["Product", "2015", "2016", "2017"],
      source: [
        {
          Product: "Matcha Latte",
          2015: random(),
          2016: random(),
          2017: random()
        },
        {
          Product: "Milk Tea",
          2015: random(),
          2016: random(),
          2017: random()
        },
        {
          Product: "Cheese Cocoa",
          2015: random(),
          2016: random(),
          2017: random()
        },
        {
          Product: "Walnut Brownie",
          2015: random(),
          2016: random(),
          2017: random()
        }
      ]
    },
    xAxis: { type: "category" },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
  };
}

五、其他

之后，还有一些应用型的内容，或更加复杂的配置，如

  • 数据集与数据转换的问题

  • 视觉映射的问题

  • 时间与行为(鼠标点击或代码触发)

  • 处理动态的异步数据

  • 一些跨平台的方案(微信小程序)

    如果想更进一步掌握Echarts，您还需要掌握以上内容。

CATALOG
    FEATURED TAGS
    FRIENDS