数据可视化 el-card布局 ECharts图表

el-row表示一行，一行分成24份
:gutter="12"表示间隔的大小
el-col 表示一列 span表示占据一列8格的大小
shadow="always" 阴影总是显示
shadow="hover" 鼠标悬浮时显示
shadow="never" 从不显示

<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="8">
        <el-card shadow="hover">
          <bar-chart></bar-chart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <line-chart></line-chart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <pie-chart></pie-chart>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-card shadow="hover"> 中国地图 </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BarChart from "@/components/BarChart.vue";
import LineChart from "@/components/LineChart.vue";
import PieChart from "@/components/PieChart.vue";
export default {
  components: {
    BarChart,
    PieChart,
    LineChart,
  },
  mounted(){
    // 页面尺寸发生变化时，就重新resize渲染图表
    window.onresize=function(){
       window.BarChart.resize()
       window.LineChart.resize()
       window.PieChart.resize()
    }
  }
};
</script>

图表组件

<template>
  <div class="barchart">
    <div id="bar" ref="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "BarChart",
  //dom挂载之后
  mounted() {
    // var myChart=echarts.init(this.$refs.main)
    var myChart = echarts.init(document.getElementById("bar"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "柱状图",
      },
      tooltip: {},
      xAxis: {
        axisLabel: {
          color:'red', 
          /* 显示所有的x轴的数据 */
          interval: 0,
          /* 放不下的倾斜角度 */
          rotate: 0,
          /* 数据距离刻度线的距离 */
          margin: 10,
        },
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          // 柱子颜色
          color: "pink",
          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: "yellow", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "orange", // 100% 处的颜色
                    },
                  ],
                  global: false,
                },
              },
            },
            { value: 10, name: "裤子" },
            { value: 10, name: "高跟鞋" },
            { value: 20, name: "袜子" },
          ],
        },
      ],
    });
    // 把实例化echarts对象存在全局变量中
    window.BarChart = myChart;
  },
};
</script>

<style scoped lang="scss">
#bar {
  height: 300px;
}
</style>