简单实现在vue中引入echarts

一、npm安装

输入命令：npm install echarts --save

二、按需引入

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 
import * as echarts from "echarts/core";
// 引入柱状图表
import { BarChart } from "echarts/charts";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

三、注册必须的组件

 // 注册必须的组件
    echarts.use([BarChart, CanvasRenderer]);

四、设置放图表的容器

<div class="mychart" id="mychart" style="width: 600px; height: 400px"></div>

五、初始化图表

 // 初始化图表
      var myChart = echarts.init(document.getElementById("mychart"));

六、设置配置项

// 设置配置项
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });

完整

<template>
  <div class="about">
    <div class="mychart" id="mychart" style="width: 600px; height: 400px"></div>
  </div>
</template>
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入柱状图表
import { BarChart } from "echarts/charts";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    // 注册必须的组件
    echarts.use([BarChart, CanvasRenderer]);
    this.setECharts();
  },
  methods: {
    setECharts() {
      // 初始化图表
      var myChart = echarts.init(document.getElementById("mychart"));
      // 设置配置项
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
  },
};
</script>

效果