Echarts图表的使用以及相关配置

前言

1、Echarts简介

Echarts，全称Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，能够流畅的运行在PC以及移动设备上，兼容当前绝大部分浏览器。为我们许多提供直观，生动，可交互，可高度个性化定制的数据可视化图表。能够支持折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交 互组件，支持多图表、组件的联动和混搭展现。

2、Echarts特点

1. 功能丰富： Echarts 支持多种图表类型、多种数据格式、多种交互方式，能够满足各种不同的数据可视化需求。
2. 易于使用： Echarts 提供了完整的 API 文档和示例代码，开发者可以轻松地上手使用。
3. 可定制性强： Echarts 提供了丰富的配置项，开发者可以根据自己的需求进行自定义设置，如修改图表样式、添加动画效果等。
4. 兼容性好： Echarts 支持主流的浏览器和移动端设备，能够兼容各种不同的平台。

3、Echarts基本名词

1. Series（系列）： 指图表中的数据系列，一般由多个数据点组成。常见的系列有折线图、柱状图、散点图等。
2. Axis（坐标轴）： 指图表中的坐标轴，一般包括横轴和纵轴。横轴又称为 x 轴，纵轴又称为 y 轴。
3. Legend（图例 ： 指图表中的图例，一般用于标识不同的数据系列。
4. Tooltip（提示框）： 指图表中的提示框，一般用于展示鼠标悬停在数据点上时的详细信息。
5. Label（标签）： 指图表中的标签，一般用于展示数据点的具体数值。
6. Grid（网格）： 指图表中的网格，一般用于将图表分成多个区域，便于展示不同的数据。
7. Toolbox（工具箱）： 指图表中的工具箱，一般包括导出图片、数据视图、刷新等工具。
8. Visual Map（视觉映射）： 指图表中的视觉映射，一般用于将数据映射到颜色、大小等视觉属性上，便于展示数据的变化趋势。

正文开始

1、通过 npm 安装 Echarts

npm install echarts --save

2、在 main.js 全局引入

import Vue from 'vue'
import * as echarts from "echarts";//引入echarts
Vue.prototype.$echarts = echarts//挂载到vue实例，方便全局使用

3、在 Vue 组件中使用

下面的使用的案例，相对比较完整，包含常用相关配置，以及如果如何基于窗口的自适应配置。

<template>
  <div style="width: 100%; height: 100%">
    <div ref="chart" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myChart: "",
      XData: [],
      lineData1: [],
      lineData2: [],
    };
  },
  mounted() {
    this.getEchartData();
    window.addEventListener("resize", this.echartResize);
  },
  methods: {
    echartResize() {
      this.myChart.resize();
    },
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        this.myChart = this.$echarts.init(chart);
        const option = {
          title: {
            text: "折线图案例", //图标标题
            left: "center", //标题位置-居中
          },
          //提示框组件
          tooltip: {
            trigger: "axis",
          },
          //图例配置
          legend: {
            top: "8%",
            textStyle: {
              //文字颜色
              color: "#0f0",
            },
          },
          //绘图区域配置
          grid: {
            show: true,
            left: "6%",
            right: "12%",
            bottom: "3%",
            containLabel: true,
            backgroundColor: "#eee",
          },
          //工具栏
          toolbox: {
            top: "16%",
            right: "6%",
            orient: "vertical",
            feature: {
              //数据视图工具
              dataView: {
                readOnly: true,
                backgroundColor: "rgba(146, 37, 37, 1)",
                textareaColor: "rgba(29, 93, 153, 1)",
                textColor: "rgba(233, 15, 208, 1)",
              },
              //数据区域缩放
              dataZoom: {
                yAxisIndex: "none",
              },
              //动态类型切换
              magicType: {
                type: ["line", "bar"],
              },
              //配置项还原
              restore: {},
              //保存为图片
              saveAsImage: {},
            },
            iconStyle: {
              borderColor: "rgba(21, 29, 134, 1)",
            },
          },
          //区域缩放配置信息
          dataZoom: {
            type: "inside",
          },
          //X轴配置
          xAxis: {
            type: "category",
            name: "时间/天",
            nameTextStyle: {
              color: "rgba(229, 8, 8, 1)",
            },
            nameGap: 4,
            axisLine: {
              lineStyle: {
                color: "rgba(97, 12, 12, 1)",
              },
            },
            axisLabel: {
              show: true,
              color: "rgba(195, 34, 34, 1)",
              fontSize: 13,
            },
            data: this.XData,
          },
          //Y轴配置
          yAxis: {
            type: "value",
            name: "数量/个",
            nameLocation: "middle",
            nameTextStyle: {
              color: "rgba(47, 18, 194, 1)",
            },
            nameGap: "40",
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(18, 61, 216, 1)",
              },
            },
          },
          // 数据配置
          series: [
            {
              name: "折线一", //线的名字
              type: "line", //显得类型
              symbol: "none", //是否显示拐点
              smooth: true, //拐点是否圆润
              //拐点属性
              itemStyle: {
                color: "#f00",
              },
              //线的属性
              lineStyle: {
                color: "#f00", // 线的颜色
                width: 2, //线的宽度
                type: "dashed", //线的类型
              },
              data: this.lineData1,
            },
            {
              name: "折线二", //线的名字
              type: "line", //显得类型
              symbol: "none", //是否显示拐点
              smooth: true, //拐点是否圆润
              //拐点属性
              itemStyle: {
                color: "#00f",
              },
              //线的属性
              lineStyle: {
                color: "#00f", // 线的颜色
                width: 2, //线的宽度
                type: "dashed", //线的类型
              },
              data: this.lineData2,
            },
          ],
        };
        this.myChart.setOption(option);
      }
    },
  },
  created() {
    let x = [];
    let line1 = [];
    let line2 = [];
    for (let i = 0; i < 20; i++) {
      x.push(i);
      line1.push(Math.floor(Math.random() * (500 - 200 + 1)) + 200);
      line2.push(Math.floor(Math.random() * (600 - 400 + 1)) + 400);
    }
    this.lineData1 = line1;
    this.lineData2 = line2;
    this.XData = x;
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.echartResize);
  },
};
</script>

效果展示

总结

charts 是一款功能强大、易于使用、可定制性强、兼容性好的图表库，是数据可视化的不二选择。