echart图表1

柱状图：

template：

<template>
  <div class="bar-chart">
    <div class="chart-sty" ref="main"></div>
  </div>
</template>

script：

import * as echarts from "echarts";
export default {
  name: "BarChart",
  mounted() {
    //基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById('main'));
    var myChart = echarts.init(this.$refs.main);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "柱状图",
      },
      tooltip: {},
      xAxis: {
        axisLabel: {
          /* 显示所有的x轴的数据 */
          interval: 0,
          /* 放不下的倾斜角度 */
          rotate: 0,
          /* 数据距离刻度线的距离 */
          margin: 15,
        },
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          /* 所有的柱子都会变成红色 */
          /* color: 'red', */
          data: [
            {
              value: 5,
              name: "衬衫",
            },
            {
              value: 20,
              name: "羊毛衫",
            },
            {
              value: 36,
              name: "雪纺衫",
              /* 给某一个柱子单独设置颜色 */
              itemStyle: {
                /* 设置渐变色的柱子颜色 */
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "red", // 柱子最上面的颜色是红色
                    },
                    {
                      offset: 1,
                      color: "blue", // 柱子最下面的颜色是蓝色
                    },
                  ],
                  global: false,
                },
              },
            },
            {
              value: 10,
              name: "裤子",
            },
            {
              value: 10,
              name: "高跟鞋",
            },
            {
              value: 20,
              name: "袜子",
            },
          ],
        },
      ],
    });
    /* 把实例化echarts对象存在全局变量中 */
    window.BarChart = myChart;
  },
};

折线图：

export default {
  name: "LineChart",
  mounted() {
    //基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById('main'));
    var myChart = echarts.init(this.$refs.main);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "折线图",
      },
      tooltip: {},
      xAxis: {
        axisLabel: {
          /* 显示所有的x轴的数据 */
          interval: 0,
          /* 放不下的倾斜角度 */
          rotate: 0,
          /* 数据距离刻度线的距离 */
          margin: 15,
        },
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "line",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });

    window.LineChart = myChart;
  },

饼图：

 name: "PieChart",
  mounted() {
    //基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById('main'));
    var myChart = echarts.init(this.$refs.main);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "饼图",
      },
      /* grid: {
        height: "50%",
        width: "50%",
      }, */
      tooltip: {},
      xAxis: {
        show: false,
        /*  data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], */
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          name: "销量",
          type: "pie",
          radius: "40%",
          data: [
            {
              value: 5,
              name: "衬衫",
            },
            {
              value: 20,
              name: "羊毛衫",
            },
            {
              value: 36,
              name: "雪纺衫",
            },
            {
              value: 10,
              name: "裤子",
            },
            {
              value: 10,
              name: "高跟鞋",
            },
            {
              value: 20,
              name: "袜子",
            },
          ],
        },
      ],
    });

    window.PieChart = myChart;
    

调用组件

import BarChart from "@/components/BarChart.vue";
import LineChart from "@/components/LineChart.vue";
import PieChart from "@/components/PieChart.vue";

定义组件

 components: {
    BarChart,
    LineChart,
    PieChart,
  },

使用：

<el-row :gutter="5">
      <el-col :span="8">
        <!-- shadow="always" 卡片的阴影效果一直显示 -->
        <!-- shadow="hover" 卡片的阴影效果手摸上去显示 -->
        <!-- shadow="never" 卡片的阴影效果永不展示 -->
        <el-card shadow="always">
          <bar-chart />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <line-chart />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <pie-chart />
        </el-card>
      </el-col>
    </el-row>

监听并动态改变size：

 mounted() {
    /* 页面尺寸一发生变化 就重新resize渲染图表 */
    window.onresize = function () {
      window.BarChart.resize();
      window.LineChart.resize();
      window.PieChart.resize();
    };
  },