vueHow to implement data visualization charts without Echarts in the project? The following article will introduce to you the method of using antv to implement data visualization charts in the Vue project. I hope it will be helpful to you!

Technology never ends, let’s see more different scenery

Still happily adding bricks and tiles to the mobile framework, supervisor He came over and asked me if he could spare a week to do other things. I was a little surprised by this tone. I asked what needed to be done. It turned out that the business department had a big data chart and there were no extra people to do it. I needed to provide support. Although I was a little refused, the supervisor spoke and I could only arrange it. I used to use echarts when making visual charts. The reason is that it was the first time I used it, and then I got used to it. It can basically meet my business needs. I am also familiar with documents, and the people who use it are also familiar with it. If you encounter problems, you can quickly find solutions. It's a bit unfortunate that this time the customer can only use Ali's antv when naming, so I have no second choice. [Related recommendations: vuejs video tutorial]

I don’t have much contact with antv. When it was first open source, I went to watch it. It was very cool. Compared with echarts, it is more beautiful, but at that time the documentation was not so complete and there were not many examples. Now when I look at it, it is already very comprehensive, with multiple series of different scenarios and commonly used chartsG2, G6 for data association diagrams, F2 for mobile visualization, and L7 focusing on maps, and of course the previous ones The basic chart is made into a layer of encapsulated plot classes, such as @antv/g2plot, @antv/l7plot. This development is about PC, so it will mainly involve G2 and L7. My feeling during the development process is that it is quite simple to use, but some property settings are not documented and you need to find them from examples. Then there are relatively few articles about its use on the Internet, not as many as echarts, maybe It takes time to find the answer by yourself in the documents and examples.

Area Chart

Line chart is a frequently used and relatively easy graph. There is no specific chart type in G2 (bar chart, scatter chart, line chart Charts, etc.) concept, users can draw a certain type of chart alone, such as a pie chart, or draw a mixed chart, such as a combination of a line chart and a column chart, and a mixture of a line chart and an area chart to achieve the effect shown;

Common parameter documentation

Chart

Coordinate system axis

chart.line(options)

Used to draw line charts, curve charts, stepped line charts, etc.

chart.area(options)

Used to draw area charts (area charts), cascading area charts, interval area charts, etc.

geom.position()

Configure position channel mapping rules

Example:

// 数据结构: [{ x: 'A', y: 10, color: 'red' }]
geom.position('x*y');

geom.color( )

Configure chart color

// 基础颜色设置
geom.color('#1890ff');
// 渐变
geom.color("l(90) 0:#0b83de 1:#0c1c2d")

geom.shape()

Graphic related settings, the instructions in the document are not very complete, you can Get the corresponding information from the chart example

<template>
  <div></div>
</template>
<script>
import { Chart } from "@antv/g2";
export default {
  mounted() {
    // 数据源
    const data = [
      { time: "8/1", value: 240 },
      { time: "8/10", value: 600 },
      { time: "8/20", value: 350 },
      { time: "8/31", value: 470 },
    ];
    // 初始化图表，列出图表属性
    const chart = new Chart({
      container: "container",
      autoFit: true,
      height: 276,
      padding: [100, 20, 30, 40],
    });
    // 图表关联数据chart.position()方法决定的，在下面有设置chart.position("time*value")
    // 前面为x轴，所以 time 为 x 轴， value 为 y 轴
    chart.data(data);
    // 度量
    // x，y轴坐标系是根据
    chart.scale({
      // y轴坐标系设置
      value: {
        min: 0,
        nice: true,
        alias: "用户",
      },
      // x轴坐标系设置
      time: {
        range: [0, 1],
      },
    });
    // 提示信息
    chart.tooltip({
      // 是否显示辅助线
      showCrosshairs: true,
      // 是否合并所有点展示
      shared: false,
    });
    // value 坐标系设置
    chart.axis("value", {
      grid: null,
      tickLine: null,
    });
    // time 坐标系设置
    chart.axis("time", {
      line: null,
      tickLine: null,
    });
    // 图表绘制设置
    // 面积图
    chart
      .area()
      .position("time*value")
      .color("l(90) 0:#0b83de 1:#0c1c2d")
      .shape("smooth");
    // 折线图
    chart.line().position("time*value").color("#0b83de").shape("smooth");
    // 渲染图表
    chart.render();
  },
};
</script>

Histogram

Histogram is normally used in daily data analysis , and it is relatively intuitive. Here I have listed some of the attributes used. Others are consistent with the common parameter documents above

Data label label

chart.coordinate()

Chart coordinate system Setting

##chart.interval(options)

<template>
  <div></div>
</template>
<script>
import { Chart } from "@antv/g2";
export default {
  mounted() {
    // 数据源
    const data = [
      { type: "香蕉", value: 460 },
      { type: "苹果", value: 600 },
      { type: "菠萝", value: 390 },
      { type: "榴莲", value: 205 },
    ];
    // 初始化图表
    const chart = new Chart({
      container: "container",
      autoFit: true,
      height: 276,
      padding: [50, 60, 10, 60],
    });
    // 关联数据
    chart.data(data);
    // 图表关联数据chart.position()方法决定的，在下面有设置chart.position("type*value")
    // 前面为x轴，所以 type 为 x 轴， value 为 y 轴

    // 设置 x 轴坐标系
    chart.axis("type", {
      grid: null,
      tickLine: null,
      line: null,
    });
    // 设置 y 轴坐标系
    chart.axis("value", {
      grid: null,
      label: null,
    });
    // 隐藏图例
    chart.legend(false);
    // x，y 轴置换
    chart.coordinate().transpose();
    // chart.interval(options) 柱状图
    // geom.position() 配置 position 通道映射规则
    // geom.size 设置图形大小
    // geom.color 设置图形颜色
    // geom.label 数据标签设置
    chart
      .interval()
      .position("type*value")
      .size(12)
      .color("#678ef2")
      .label("value", {
        style: {
          fill: "#8d8d8d",
        },
        offset: 10,
      });
    chart.interaction("element-active");
    // 渲染图形
    chart.render();
  },
};
</script>

Map

antvThe document does not fully describe the map, such as map level viewLevel and map boundary settings , map color configuration, these need to be slowly explored based on examples. I implemented the more commonly used China map, including toolTip, and the scatter plot of the province. Just modify the map level viewLevel , and with the corresponding data, scatter plots of different provinces and cities can be realized, and everyone can draw inferences from one example.

@antv/l7plot, and the map-related drawing is packaged internally. If @antv/l7 is used, it is mainly based on requests. The map path coordinate data request is drawn, and the data is quite large, which will be more troublesome.

Github to view the

map container configuration item map

地图等级 viewLevel

<template>
  <div></div>
</template>
<script>
import { Choropleth } from "@antv/l7plot";
// 地图数据
import data from "../data/userMap";
export default {
  mounted() {
    // 初始化地图
    // eslint-disable-next-line no-unused-vars
    const map = new Choropleth("container", {
      // 地图容器配置
      map: {
        type: "mapbox",
        style: "blank",
        center: [120.19382669582967, 30.258134],
        zoom: 3,
        pitch: 0,
        logo: false,
      },
      // 关联数据
      source: {
        data: data,
        joinBy: { sourceField: "code" },
      },
      // 地图等级
      viewLevel: {
        level: "country",
        adcode: 100000,
      },
      // 根据容器宽高自定义图表
      autoFit: true,
      // 设置地图颜色
      color: {
        field: "value",
        value: ["#B8E1FF", "#7DAAFF", "#3D76DD", "#0047A5", "#001D70"],
        scale: { type: "quantile" },
      },
      // 边框
      chinaBorder: {
        // 国界
        national: null,
        // 争议
        dispute: { color: "#ccc", width: 1, opacity: 0.8, dashArray: [2, 2] },
        // 海洋
        coast: { color: "#ccc", width: 0.7, opacity: 0.8 },
        // 港澳
        hkm: { color: "gray", width: 0.7, opacity: 0.8 },
      },
      // 边界颜色
      style: {
        opacity: 1,
        stroke: "rgb(93,112,146)",
        lineWidth: 0.6,
        lineOpacity: 1,
      },
      // 数据标签
      label: {
        visible: false,
      },
      // 选择高亮
      state: {
        active: { stroke: "black", lineWidth: 1 },
      },
      // 提示
      tooltip: {
        inPlot: false,
        items: ["name", "code", "value"],
      },
    });
  },
};
</script>
<style>
#container {
  width: 100%;
  height: 300px;
}
</style>

小结

如果你还没了解antv，现在它应该进入你的视野了，他提供了很多炫酷的图表，以及强大的图表功能，就算现在用不到，下次做个尝试也未尝不可，可能你会喜欢上它，并且替换掉echarts。

就举这些图表例子了，文章相关的例子源码也上传到Github了。这次开发过程中，也是把antv文档上上下下翻了好几遍，对于使用方式以及属性有一定的了解，如果你是刚刚要使用antv或者使用中遇到问题，可以评论区留言，共同成长，fighting~

（学习视频分享：web前端开发、编程基础视频）

The above is the detailed content of Let's talk about how vue+antv implements data visualization charts. For more information, please follow other related articles on the PHP Chinese website!