视图可视化(Echarts)

新建一个柱状图component

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

<script>
import * as echarts from "echarts";
export default {
  name: "BarEchart",
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    // 这边用ref可以id相同，如果用document获取dom，id不能相同
    var myChart = echarts.init(this.$refs.main);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        axisLabel: {
          rotate: 0,
          interval: 0,
          margin: 15,
        },
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          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: "袜子",
            },
          ],
        },
      ],
    });
    window.BarEchart = myChart;
  },
};
</script>

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

在页面去引用这个组件

      <el-col :span="8">
        <el-card shadow="always">
          <BarEchart></BarEchart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <line-echart></line-echart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <PieEchart></PieEchart>
        </el-card>
      </el-col>
    </el-row>

上面的代码还需要引入element-ui和echart