Vue项目中使用echarts

---

前言

本文将介绍如何在Vue项目中从0开始，使用echarts在项目中绘制一个简单的图表

---

一、echarts是什么？

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、使用步骤

1.引入库

从npm获取

npm install echarts

其他方式

echarts官网其他获取方式

2.项目中引入ECharts

全部引入

import * as echarts from 'echarts';

按需引入

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

在 示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。

---

2.项目实践

定义父容器

需要在 HTML 中先定义一个 < div > 节点，并且通过 CSS 使得该节点具有宽度和高度

// A code block
 <div id="main" style="width: 800px; height: 800px">
  </div>

获取刚刚创建的DOM节点，通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图表

  // 获取DOM节点
  var chartDom = document.getElementById("main");
  // 初始化一个Echarts实例
  var myChart = echarts.init(chartDom);
  // 设置配置生成图标
  myChart.setOption(option);

以下为完整代码

<template>
  <div id="main" style="width: 800px; height: 800px">
  </div>
</template>

<script>
import * as echarts from "echarts";

var option;

// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
const valueList1 = data.map(function (item) {
  return item[1] - 10;
});
option = {
  // Make gradient line here

  title: [
    {
      left: "center",
      text: "Gradient along the y axis",
    },
    {
      top: "55%",
      left: "center",
      text: "Gradient along the x axis",
    },
  ],
  tooltip: {
    trigger: "axis",
  },
  xAxis: [
    {
      data: dateList,
      alignTicks: true,
      splitLine: {
        show: true,
      },
      minorSplitLine: {
        show: true,
      },
      boundaryGap: false,
    },
    {
      data: dateList,
      gridIndex: 1,
      minorTick: {
        show: true,
      },
    },
  ],
  yAxis: [
    {
      splitLine: {
        show: true,
      },
    },
    {
      gridIndex: 1,
    },
  ],
  grid: [
    {
      bottom: "60%",
    },
    {
      top: "60%",
    },
  ],
  series: [
    {
      type: "line",
      showSymbol: false,
      stack: "Total",
      data: valueList,
    },
    {
      type: "line",
      showSymbol: false,
      stack: "main",
      data: valueList1,
    },
    {
      type: "line",
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1,
    },
  ],
};

export default {
  name: "test",
  data() {
    return {};
  },
  methods: {
    setOption() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      myChart.setOption(option);
    },
  },
  mounted() {
    this.setOption();
  },
};
</script>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Echarts的使用，还有echarts的配置项与api还未介绍，建议大家直接去 官网查看，不需要全部记得，大概有印象，需要时候去查。