vue通过组件，按需引入echarts 柱状图 （全网最简单写法）

Posted 2021-09-29 水香木鱼

1.首先定义一个子组件.vue文件

<template>
  <div>
    <div style="width: 500px; height: 500px" ref="chart"></div>
  </div>
</template>
<script>
const echarts = require("echarts");
export default {
  data() {
    return {};
  },
  methods: {
    initCharts() {
      let myChart = echarts.init(this.$refs.chart);
      // 绘制图表
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "2015", "2016", "2017"],
            ["Matcha Latte", 40, 85.8, 93.7],
            ["Milk Tea", 83.1, 73.4, 55.1],
            ["Cheese Cocoa", 86.4, 65.2, 82.5],
            ["Walnut Brownie", 72.4, 53.9, 39.1],
          ],
        },
        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" }],
      });
    },
  },
  mounted() {
    this.initCharts();
  },
};
</script>

2.在父组件内引入基本模板，按需加载以及子组件

<template>
	<div>
	<!--加载子组件-->
		 <LeftTopOne></LeftTopOne>
	</div>
 </template>

import LeftTopOne from "../components/graph/leftTopOne.vue";

3.在 components里

 components: {
 //挂载
    LeftTopOne,
  },