echarts初体验————制作柱状图和饼图

今天开发涉及到了图形，特意去看了下相关文档，实现了柱状图和饼图。

柱状图样式（点击上面的蓝绿黄可以选择是否显示这个记录）

代码：vue前端

<template>   
  </div> 
    <el-row>
      <el-col :span="12">
        <el-card >
            //柱状图
          <div class="echart" id="mychart" :style="myChartStyle"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
            //饼状图
        <el-card>
          <div style="height: 240px" ref="videoEcharts"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import * as echarts from 'echarts' //引用echarts

export default {
  data() {
    return {
      //柱状图，这里使用了三个纵坐标数据
      xData: [], //横坐标
      yData: [], //纵坐标数据
      taskDate: [], //纵坐标数据
      alpayData: [], //纵坐标数据
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式

      //饼状图 数据
      videoData: [
        {
          name: '华为',
          value: 2999
        },
        {
          name: '苹果',
          value: 5999
        },
        {
          name: '红米',
          value: 1500
        },
        {
          name: '小米',
          value: 1999
        },
        {
          name: 'oppo',
          value: 2200
        },
        {
          name: 'vivo',
          value: 4500
        }
      ],
    };
  },
mounted() {